Highcharts Formatting Axes, Labels & Tooltips

Question

I'm evaluating Highcharts and I'm struggling to format my axes and data labels correctly. On the tooltip object for a series I can set the prefix, suffix and decimals ( this is wonderful ). I cannot find similar options for data labels and the axes?

What is the correct way to format the axis, tooltips and labels to all use the correct prefix, suffix, decimals and use a comma for the thousands separator? Is there a single place this can be set to be inherited?

I have tried using a formatter on data labels but I've been unable to implement it as it does not know what "this" is.

Below is my example using a new angular 14 project:

Thank you

import { Component, OnInit } from '@angular/core';
import { SeriesColumnOptions, SeriesLineOptions } from 'highcharts';
import * as Highcharts from 'highcharts';

@Component({
  selector: 'app-format',
  template: ''
})
export class FormatComponent implements OnInit {

  Highcharts = Highcharts;
  options!: Highcharts.Options;

  constructor() {
  }

  ngOnInit(): void {
    this.options = {
      title: {
        text: ''
      },
      xAxis: {
        title: {
          text: 'xAxis'
        },
        categories: ['Cat A', 'Cat B', 'Cat C', 'Cat D', 'Cat E']
      },
      yAxis: [
        {
          title: {
            text: 'currency axis'
          }
        },
        {
          title: {
            text: 'percent axis'
          },
          opposite: true
        }
      ],
      series: []
    };

    const currencySeries: SeriesColumnOptions = {
      type: 'column',
      name: 'Currency',
      data: [123.45, 4324.12, 17245.23, 123.5, 13453.4],
      dataLabels: {
        enabled: true
      },
      tooltip: {
        valuePrefix: '£',
        valueDecimals: 2
      }
    };
    this.options.series?.push(currencySeries);

    const percentSeries: SeriesLineOptions = {
      type: 'line',
      name: 'Percent',
      data: [34.1, 62, 82.3, 76.6, 12.3, 99],
      yAxis: 1,
      dataLabels: {
        enabled: true
      },
      tooltip: {
        valueSuffix: '%',
        valueDecimals: 1
      }
    };
    this.options.series?.push(percentSeries);
  }
}

Sebastian Hajdus · Answer

To format axis labels check xAxis.labels.format, datalabels units or custom formating you can set in dataLabels.format, also recomended options is use callback formatter().

"This" depending on where it is called, refers to an axis or a series.

Highcharts.chart('container', {
  xAxis: {
    labels: {
      formatter: function() {
        let label = this.axis.defaultLabelFormatter.call(this);
        console.log('xAxis this:', this);
        return label;
      }
    }
  },

  series: [{
    data: [29.9, 71.5, 106.4, 129.2, ],
    pointStart: 9000,
    type: 'column',
    dataLabels: {
      enabled: true,
      formatter: function() {
        console.log('datalabels this:', this);
        return this.y;
      }
    }
  }]

});

Demo: https://jsfiddle.net/BlackLabel/vam2t5hw/

Highcharts Formatting Axes, Labels & Tooltips

1 Answers