How do I show y-axis with data converted to percentage

[Suhas Patil]

I have two arrays:
Y = [180, 200,160,190,120,140,150]
X = [1,2,3,4,5,6,7]

I want to plot a chart where Y axis shows percentage of the data and X shows just labels. Thus Y axis in above example should show:
Yvalues = [90,100,80,95,60,70,75]
X axis simply should show 1 through 7 for the corresponding points.

Further, if possible, the user should be able to switch between absolute values or percentage.

How do I achieve this?

[Thangaraj Raman]

Suhas Patil,

You can use labelFormatter function on axisY to convert the axisY labels to percentages.

To switch the axisY labels from percentages to absolute values you can create a drop-down menu with the respective options. Based on the option selected you can update the labelFormatter function and then call chart.render().

document.getElementById("changeAxisYLabel").addEventListener('change', function(event){
  if (event.target.value == "absoluteValue") {
    chart.options.axisY.labelFormatter = function(e) {
      return e.value;
    }
  }
  else if (event.target.value == "percentage") {
    chart.options.axisY.labelFormatter = convertToPercentage;
  }
  chart.render();
});

Please take a look at this JSFiddle for a working example on the same.

—
Thangaraj Raman
Team CanvasJS