How to add markers to a grouped bar plot in Highcharts?

问题

I'm using Highcharts to create a grouped bar chart and looking to add markers for each bar.

I've created a multi-series (bar + scatter) plot that is similar to what I want, but since there is no "grouped scatter" plot, the circle marks are centered (Screenshot attached below).

Is there a way to change it so the marks appear on the same row as the bar?

JSFiddle

Highcharts Config

{
        chart: {
            type: 'bar'
        },
        title: {
            text: ''
        },
        xAxis: {
            categories: ['One', 'Two', 'Three']
        },
        tooltip: {
                        enabled: true
        },
        series: [
          {
              name: '2015',
              data: [7, 8, 9]
          }, 
          {
              name: '2015 Goal',
              marker: {
                 symbol: 'circle'
              },
              data: [5, 6, 6],
              type:'scatter'
          },
          {
              name: '2016',
              data: [9, 9, 10]
          }, 
          {
              name: '2016 Goal',
              marker: {
                 symbol: 'circle'
              },
              data: [10,12,13],
              type:'scatter'
          }
        ]
    }

回答1:

Set x value for the point. By default x values for the scatter are integers - 0, 1, 2 so they are centered according to the category. You can move them a little by 0.15 and then in the pointFormatter round those values.

    series: [{
  name: '2015',
  data: [7, 8, 9]
}, {
  name: '2015 Goal',
  marker: {
    symbol: 'circle'
  },
  data: [
    [-0.15, 5],
    [1 - 0.15, 6],
    [2 - 0.15, 6]
  ],
  type: 'scatter'
}, {
  name: '2016',
  data: [9, 9, 10]
}, {
  name: '2016 Goal',
  marker: {
    symbol: 'circle'
  },
  data: [
    [0.15, 10],
    [1 + 0.15, 12],
    [2 + 0.15, 13]
  ],
  type: 'scatter'
}]

In pointFormatter:

    plotOptions: {
  scatter: {
    tooltip: {
      pointFormatter: function() {
        return `x: <b>${Math.round(this.x)}</b><br/>y: <b>${this.y}</b><br/>`
      }
    }
  }
},

example: http://jsfiddle.net/kh8b4jy3/

来源：https://stackoverflow.com/questions/44979825/how-to-add-markers-to-a-grouped-bar-plot-in-highcharts

标签

javascript

Highcharts