mk.developer
Posts: 84
Joined: Wed Mar 17, 2021 6:07 pm

Round Stock Chart y Axis data points to two decimal digits

I have two questions:

1) How can I round / truncate Stock Chart Y axis in Angular?

2) The date line shows date as "Thursday, Jun 27, 23: 00". How can I format it to show the date in dd/mm/yyyy format?

Please see attached screenshot circled in blue colour.

Example:
Capture.JPG
Capture.JPG (65.85 KiB) Viewed 328 times
Code:

Code: Select all

chartOptions: any = {
    credits: {
      enabled: false
    },
    chart: {
      type: 'line',
      zoomType: 'x'
    },
    title: {
      text: null,
    },
    subtitle: {
      text: null,
    },
    xAxis: {
      type: 'datetime'
    },
    yAxis: {
      title: {
        text: 'Cumulative Return'
      },
      labels: {
        formatter: function () {
          return this.value * 100;
        }
      }
    },
    legend: {
      enabled: true
    },
    tooltip: {
      pointFormatter: function () {
        return '<b>' + this.series.name + '</b>: ' + Highcharts.numberFormat(this.y * 100, 2);
      }
    },
    plotOptions: {
      series: {
        marker: {
          enabled: false
        }
      }
    },
    series: [{},{}]
  };

Thanks.
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: Round Stock Chart y Axis data points to two decimal digits

Hello mk.developer,

Thanks for contacting us with your question.

1) To round / truncate values for Y axis labels you should use yAxis.labels.format API option, or formatter for more complex changes.
Demo: https://jsfiddle.net/BlackLabel/qy2pagxh/
API reference: https://api.highcharts.com/highstock/yA ... els.format,
https://www.highcharts.com/docs/chart-c ... formatting
https://api.highcharts.com/highstock/yA ... .formatter

2) Here you can learn more about date format and supported format keys: https://api.highcharts.com/class-refere ... dateFormat Element that you want to change is tooltip header and to adjust date format you should use tooltip.headerFormat API option.
Demo: https://jsfiddle.net/BlackLabel/9802jfod/
API reference: https://api.highcharts.com/highstock/to ... aderFormat

Let me know if that was what you were looking for!
Best regards!
Mateusz Bernacik
Highcharts Developer
mk.developer
Posts: 84
Joined: Wed Mar 17, 2021 6:07 pm

Re: Round Stock Chart y Axis data points to two decimal digits

Both issues are fixed.

Thanks @mateusz.b for your help.
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: Round Stock Chart y Axis data points to two decimal digits

You're welcome! In case of any further questions, feel free to contact us again.
Mateusz Bernacik
Highcharts Developer

Return to “Highcharts Usage”