1. Home
  2. Forum
  3. JavaScript - EJ 2
  4. Dynamically changing primaryYAxis format

Dynamically changing primaryYAxis format

Hello again!  We are trying to dynamically change the charts primaryYAxis format, but this doesn't seem to work in the onChange event listener for the select box:

chart.primaryYAxis = {labelFormat: 'n0'};
if(jQuery('#slctCategory').find('option:selected').attr('isCurrency')==1){
    chart.primaryYAxis = {labelFormat: 'c'};
}

We must be doing something wrong!  Any assistance is greatly appreciated!



3 Replies
SM Srihari Muthukaruppan Syncfusion Team June 1, 2020 09:00 AM UTC

Hi Mark, 
  
We have analyzed your query. From that, we would like to let you know that we can achieve your requirement using redraw() method in the chart. Based on the provided code snippet we have prepared a sample for your reference in EJ1 platform. Kindly revert us if you are using EJ2 platform. Please find the sample, code snippet, and screenshot.  
   
   
Code Snippet:  
 // add your additional code here 
<div class="col-md-3"> LabelFormat </div> 
<div class="col-md-3 aligntop"> 
  <select name="selectIndex" autocomplete="off" id="type"> 
       <option value="{value}%">%</option>       
       <option value="n0">n0</option> 
       <option value="c">c</option> 
  </select> 
</div> 

 <script type="text/javascript"> 
$(function () 
{ 
        $("#container").ejChart( 
        {  
           // add your additional code here 
        }); 
        $('#type').change(function () { 
             var chart = $("#container").ejChart("instance"); 
             chart.model.primaryYAxis.labelFormat= $('#type')[0].value; 
             chart.redraw(); 
         }); 
}); 
 </script> 
   
Screenshot:  
  
label Format as % 
 
  
label format as "n0": 
 
label format as "c": 
 
  
Let us know if you have any concerns.  
   
Regards,  
Srihari M   
 

  


MA Mark June 1, 2020 11:17 PM UTC

We are using EJ2 not EJ1, but your code helped.  This works now:

chart.primaryYAxis.labelFormat='n0';
if(jQuery('#slctCategory').find('option:selected').attr('isCurrency')==1){
    chart.primaryYAxis.labelFormat='c';
}
The only problem is a now get this error in the browser console and the crosshair tooltip stops working (this error increments every pixel the mouse moves over the chart):
constants.js:93 Uncaught TypeError: e.toFixed is not a function
    at Function.e.processFraction (constants.js:93)
    at Function.e.intNumberFormatter (constants.js:93)
    at t.format (constants.js:93)
    at t.formatPointValue (constants.js:93)
    at t.parseTemplate (constants.js:93)
    at t.getTooltipText (constants.js:93)
    at t.renderGroupedTooltip (constants.js:93)
    at t.tooltip (constants.js:93)
    at t.mouseMoveHandler (constants.js:93)
    at e.notify (constants.js:93)

The code for the chart is:
var chart = new ej.charts.Chart({
    width: '1020',
    height: '500',
    useGroupingSeparator: true,
    zoomSettings:
        {
            enableMouseWheelZooming: true,
            enablePinchZooming: true,
            enableSelectionZooming: true
        },
    primaryXAxis: {
        majorGridLines: { width: 0 },
        valueType: 'DateTime',
        crosshairTooltip: { enable: true },
        labelFormat: 'MM-dd'
    },
    primaryYAxis:
        {
            crosshairTooltip: { enable: true }
        },
    annotations: [{ // watermark for chart
        content: '
XXXXX Report™
',
        x: '13%',
        y: '84%',
        coordinateUnits: 'Pixel',
        verticalAlignment: 'Top'
    },
    ],
    tooltip: { enable: true, shared: true, format: '${series.name} - ${point.y}' },
    crosshair: { enable: true },
});

SM Srihari Muthukaruppan Syncfusion Team June 2, 2020 08:06 AM UTC

Hi Mark,  
   
We have analyzed your query. From that, we would like to let you know that the chart is working fine. We have also tried to reproduce the reported scenario with the provided code snippet. Unfortunately, we are unable to reproduce the reported scenario. We have also attached the sample used for testing. Please find the below sample, code snippet, and screenshot.  
   
  
Code Snippet:  
var chart = new ej.charts.Chart({ 
    width: '1020', 
    height: '500', 
    useGroupingSeparator: true, 
    zoomSettings: 
        { 
            enableMouseWheelZooming: true, 
            enablePinchZooming: true, 
            enableSelectionZooming: true 
        }, 
    primaryXAxis: { 
        majorGridLines: { width: 0 }, 
        valueType: 'DateTime', 
        crosshairTooltip: { enable: true }, 
        labelFormat: 'MM-dd' 
    }, 
    primaryYAxis: 
        { 
            crosshairTooltip: { enable: true } 
        }, 
    annotations: [{ // watermark for chart 
        content: '<div id="chart_cloud">XXXXX Report™</div>', 
        x: '13%', 
        y: '84%', 
        coordinateUnits: 'Pixel', 
        verticalAlignment: 'Top' 
    }, 
    ], 
    series: [ 
            { 
                type: 'Line', 
                dataSource: [ 
                    { x: new Date(2005, 0, 1), y: 21 }, { x: new Date(2006, 0, 1), y: 24 }, 
                    { x: new Date(2007, 0, 1), y: 36 }, { x: new Date(2008, 0, 1), y: 38 }, 
                    { x: new Date(2009, 0, 1), y: 54 }, { x: new Date(2010, 0, 1), y: 57 }, 
                    { x: new Date(2011, 0, 1), y: 70 } 
                ], 
                xName: 'x', width: 2, marker: { 
                    visible: true, 
                    width: 10, 
                    height: 10 
                }, 
                yName: 'y', name: 'Germany', 
            }, 
            { 
                type: 'Line', 
                dataSource: [ 
                    { x: new Date(2005, 0, 1), y: 28 }, { x: new Date(2006, 0, 1), y: 44 }, 
                    { x: new Date(2007, 0, 1), y: 48 }, { x: new Date(2008, 0, 1), y: 50 }, 
                    { x: new Date(2009, 0, 1), y: 66 }, { x: new Date(2010, 0, 1), y: 78 }, { x: new Date(2011, 0, 1), y: 84 } 
                ], 
                xName: 'x', width: 2, marker: { 
                    visible: true, 
                    width: 10, 
                    height: 10 
                }, 
                yName: 'y', name: 'England', 
            } 
        ], 
    tooltip: { enable: true, shared: true, format: '${series.name} - ${point.y}' }, 
    crosshair: { enable: true }, 
}); 
chart.appendTo('#line-container'); 
  
  
Screenshot:  
  
  
   
  
If you still face this issue. Please share the following information which will be more helpful for further analysis and provide you the solution sooner.   
   
  • Try to reproduce the reported scenario in the above sample
  
  • Please share the data source used in the project.
  
  • Share the details if you have done any other customization in your sample.
  
Regards, 
Srihari M 


Loader.
Up arrow icon