Home Forums Chart Support Y-axis decimal value precision

Y-axis decimal value precision

Viewing 2 posts - 1 through 2 (of 2 total)
  • #33533


    I am using multi series line chart with real time data. In the graph, the y-axis decimal value precision is dynamic. Can you please explain on what value it depends.



    The precision level of Axis-Y labels depends on multiple factors such as range of axis(minimum and maximum), interval and the dataSeries, etc.

    You can change axis label’s decimal value precision by setting valueFormatString as shown below:

    	valueFormatString: "###0.00", //axisY labels with values upto two decimal places

    While zooming, you can further increase or decrease the precision of axis labels based on the zoom level by updating valueFormatString when the rangeChanged event is triggered. The code snippet below shows how you can achieve the same:

    function customAxisLabel(e) {
      var viewportRange = e.chart.axisY[0].viewportMaximum - e.chart.axisY[0].viewportMinimum;
        e.chart.options.axisY = {};
      if(e.trigger === "reset") {
        e.chart.options.axisY.interval  = null;
        e.chart.options.axisY.valueFormatString = "####0"
      else {
        if(viewportRange > 1000) {
          e.chart.options.axisY.valueFormatString = "###0";
        else if(viewportRange <= 1000 && viewportRange > 100) {
          e.chart.options.axisY.valueFormatString = "###0.00";
        else {
          e.chart.options.axisY.valueFormatString = "###0.0000";

    Please take a look at this JSFiddle for a working example with a sample code.

    AxisY custom valueFormatString based on zoom level

    Shashi Ranjan
    Team CanvasJS

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.