canvasjs in decimal format with suffix is not working properly

Question

I use canvasJS to make a line graph report, the issue now is it didn't show properly in tooltip using yValueFormatString.

my goal is to display the value:

{
    type:"stepLine",
    name: "title",
    showInLegend: true,
    connectNullData: true,
    yValueFormatString: "##.## %",
    dataPoints: [     
       { x: new Date(2019, 1, 20), y: 12.78 },
          { x: new Date(2019, 1, 19), y: 12.79 },
          { x: new Date(2019, 1, 18), y: 12.80 },
       ]
}

in tooltip, it shows

1278 %
1279 %
1280 %

I think there's something wrong with it, I wanted to display like:

12.78 %
12.79 %
12.80 %

any idea?

Answer 1

According to documentation, "%" Multiplies a number by 100 i.e. 12.78("##.## %") => 1278%. Instead setting yValueFormatString to "##.#0 '%'" should work fine in this case.

Here is an example:

var chart = new CanvasJS.Chart("chartContainer", {
  data: [{
    type:"stepLine",
    name: "title",
    showInLegend: true,
    connectNullData: true,
    yValueFormatString: "##.#0 '%'",
    dataPoints: [     
      { x: new Date(2019, 1, 20), y: 12.78 },
      { x: new Date(2019, 1, 19), y: 12.79 },
      { x: new Date(2019, 1, 18), y: 12.80 },
    ]
  }]
});
chart.render();

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div id="chartContainer" style="width: 100%; height: 260px"></div>