Question 52516 in Javascript Question posted in
A very good W3school tutorial can be found here.

Highcharts display series as labels next to a barchart – Javascript

I am trying to replicate following chart:

enter image description here

So I want to have labels for the bars, but also another series as a text, which are the differences from previous month (the numbers in the brackets). So far, I have not been able to add these "extra" labels to the chart.

here is my sample code https://jsfiddle.net/hyj13Ltb/ :

// Define chart options
var options = {
  chart: {
    type: 'bar'
  },
  title: {
    text: 'Sales by Product'
  },
  xAxis: {
    categories: ['RO', 'RS', 'HU']
  },
  yAxis: {
    title: {
      text: 'Sales (USD)'
    }
  },
  series: [{
    name: 'Sales',
    data: [110, 122, 133],
    dataLabels: {
      enabled: true
      }
  }, {
    name: 'Difference from last month',
    data: [-10, 45, 23],
    color: 'gray',
    showInLegend: false,
    visible: false,
    dataLabels: {
      enabled: true,
      inside: false,
      align: 'left',
      color: 'gray'
    }
  }]
};

// Initialize chart
Highcharts.chart('container', options);
Tags:

2

Answers


  1. 0

    We can display additional info next to point if we need. We can pass series data in the form of object and can have custom keys for our custom data. Then using format option we can format the data the way we want.

    Here is an example.

        // Define chart options
    var options = {
      chart: {
        type: 'bar'
      },
      title: {
        text: 'Sales by Product'
      },
      xAxis: {
        categories: ['RO', 'RS', 'HU']
      },
      yAxis: {
        title: {
          text: 'Sales (USD)'
        }
      },
      series: [{
        name: 'Sales',
        data: [{y:110, diff:-10}, {y:122, diff:45}, {y: 133, diff: 23}],
        dataLabels: {
          enabled: true,
          format: "{point.y} <span style='color: gray'>({point.diff})</span>"
          }
      }]
    };

    // Initialize chart
    Highcharts.chart('container', options);
    <script src="https://code.highcharts.com/highcharts.js"></script>

<div id="container"></div>

    You can refer to the API docs for more details:
    https://api.highcharts.com/highcharts/series.bar.dataLabels.formatter

    Login or Signup to reply.
  2. 0

    You can use one series (with data structure suggested by @CodeThing) and multiple data-labels. For example:

      series: [{
    name: 'Sales',
    data: [{
      y: 110,
      diff: -10
    }, {
      y: 122,
      diff: 45
    }, {
      y: 133,
      diff: 23
    }],
    dataLabels: [{
      enabled: true
    }, {
      enabled: true,
      x: 9e9,
      align: 'right',
      pointFormat: '({point.diff})'
    }]
  }]

    Live demo: https://jsfiddle.net/BlackLabel/4yt0jo5w/

    API Reference: https://api.highcharts.com/highcharts/series.bar.dataLabels

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search