CODEWITHSUNDEEP
graphhighchartsdoublebullet
AJ Mieskolainen
AJ Mieskolainen

Reputation: 29

Highcharts Bullet Chart with 2 x axes... possible?

I'd like to plot progress versus timeline on a 2 x-axis bullet chart.

See this JSFiddle for what I currently have: http://jsfiddle.net/ejhnnbk0/

Highcharts.chart('container3', {
xAxis: [{
        type: 'linear',
},{
        type: 'datetime',
        opposite: true
    }],
yAxis: {
    plotBands: [{
        from: 0,
        to: 14,
        color: '#f00'
    }, {
        from: 14,
        to: 20,
        color: '#ff0'
    }, {
        from: 20,
        to: 29,
        color: '#0f0'
    }],
    labels: {
        format: '{value}'
    },
    title: null
},
series: [{
    data: [{
        y: 16,
        target: 21
    }]
}],
tooltip: {
    pointFormat: '<b>{point.y}</b> (with target at {point.target})'
}
});

What I am looking to implement is something like this, where a date range is on the top x-axis, and a numeric range is on the bottom x-axis. I'd like the bullet to represent progress (in this case, 16 out of 24), and I'd like the target line to indicate the current date in the date range (in this case, somewhere before 02/12/2018).

enter image description here

Any thoughts would be appreciated.

Upvotes: 1

Views: 856

Answers (1)

Kamil Kulig
Kamil Kulig

Reputation: 5826

Yes, it's possible.

Fist of all notice that your chart is inverted so you need to add another y axis (not x).

There're going to be 2 series: first that displays column (associated with first y axis) and second that displays target (associated with second y axis). In this case grouping has to be disabled (otherwise column and target won't be aligned properly).

Since there's no need to show target for the first series it's type can be changed to column:

  series: [{
    type: 'column',
    data: [{
      y: 16,
    }]
  }, {
    yAxis: 1,
    data: [{
      target: Date.UTC(2018, 0, 7)
    }]
  }]

Live demo: http://jsfiddle.net/BlackLabel/e847jztb/

Upvotes: 1

Related Questions