Remove decimals when at 0 valueAxis number

[Fabio]

Hi

I've implemented a bar chart to show the amount a customer has bought in USD but on the Y axis the 0 is showing with three decimals.

Understandable since I've added "n3" to the format property but how to remove the trailling zeros from it?

$("#chart_year").kendoChart({
     title: {
            text: '"Year To Date Purchases'
        },
        seriesDefaults: {
            type: "column",
        },
series: [
       {
          //Dummy Data before getting real data
          data: [122.142, 222.672],
          color: "rgb(0,125,195)",
          name: "Total",
       },
    ],
legend: {
    labels: {
       font: "Jost",  
    }
},
           valueAxis: {
   labels: {
       culture: "en-US",
       format: "${0:n3}",
       font: "Jost"
   },
   axisCrossingValue: 0
  },
   categoryAxis: {
      categories: previousYearsArray.reverse(),
       labels: {
            padding: {top: 5},
            font: "Jost"
        },
        majorGridLines: {
       visible: true  
    }
            },
    tooltip: {
        visible: true,
        format: "{0}",
        template: "#= series.name #: $#= value #"
}
   });

And also, whenever the values from the series.data are only between $0 and $1000 the higher values in the valueAxis is $1.200.000 which causes a bit of confusion to the user seeing a million there. It's probably better to create a function and change the format depending on the maximum amount in the series.data but how do I get the series.data into the function as a parameter and create the logic from it?

[Fabio]

I was able to find a solution using the template property:

template: "#= kendo.format('{0:c}',value*1000) #",

Now the valueAxis reflects the correct amount depending on the data values.

[Jay]

You can set a template for the valueAxis labels, e.g.

           valueAxis: {             
   labels: {
       culture: "en-US",
       format: "${0:n3}",
       font: "Jost",
       template: "#= formatLabels('chart_year', value) #"
   },
   axisCrossingValue: 0
  },

and then adjust the label appropriately:

function formatLabels(chartId, value) {
  var chart = $('#' + chartId).getKendoChart();
  var series = chart.options.series[0];
  var seriesMax = Math.max.apply(null, series.data);
  var seriesMin = Math.min.apply(null, series.data);
  var chartMax = chart.options.valueAxis.max;
  var max = (chartMax && chartMax > seriesMax) ? chartMax : seriesMax;
  
  var label = "";
  if (value === 0) {
    label = "0";
  } else {
    label = kendo.format("${0:n3}", value);
  }
  return label;
}

If you set a valueAxis max value, you can use that to make better choices on formatting. Unfortunately, we don't have access to the autoAxisMin or autoAxisMax or autoMajorUnit functions which kendo uses to determine the axis min, max and step between values, which if we did, would let us make even more informed decisions on the label format.