jscharts

JScharting Angular 7 precision for y-Axes

I am using chart.js with Angular 7. I am providing array and rendering the chart.

Initialization.

import * as JSC from 'jscharting';

 this.phLiveChart = JSC.chart('phChart', {
      debug: false,
      type: 'step',
      chartArea_boxVisible: false,
      legend_visible: false,
      defaultTooltip_enabled: false,
      xAxis: {
        scale: {
          range: { min: 0, max: 100, padding: 0.1 }
        }
      },
      defaultSeries: {
        opacity: 0.7
      },
      defaultPoint_label_text: '%yValue',
      series: [{
        name: 'pH',
        points: []
      }]
    });

When data come from server.

for (let i = 0; i < records.length; i++) {
      if (this.device.sensors.ph == true) {
        records[i].ph  = Number(records[i].ph.toFixed(3));
        this.phLiveChart.series(0).points.add([new Date(records[i].recorded_at), records[i].ph]);
      }
}

Problem: Sometimes charts shows values with more precision which I am providing it. In console log it shows correct precission but in chart its showing wrong. enter image description here

Solution

  • It is easy to control the precision in JSCharting by specifying a format string with option such as:

    yAxis_formatString:'n3'

    This will make all y axis related values be numbers with 3 decimal places.

    Alternatively, you can apply the formatting for the label alone with

    defaultPoint_label_text: '{%yValue:n3}'

    Hope that helps.