CODEWITHSUNDEEP
javascriptjquerycss
Anonymous
Anonymous

Reputation: 145

Highcharts: How to add multiple lines on the same x-axis

I'm using highcharts to create a multiple axes graph. I know it doesn't make sense since there is no comparison between the data. But still I'm required to do so.

So now what I want is that the orange line passing through the bars. I don't want it to pass through all the bars. Instead I want the orange line to be on each bar from top to bottom. So I want this orange line to only go through the top of abc, qwe and xyz individually and end on the bottom. So basically I want to have multiple lines on the same x-axis. I don't want the same line to go through all the bars. But each has its own vertical line which only starts from the top edge of the bar and ends at the bottom edge of the bar.

How can I do that. Any help will be appreciated. Here's my code below.

Upvotes: 4

Views: 1451

Answers (1)

Grzegorz Blachliński
Grzegorz Blachliński

Reputation: 5222

You can divide your dashed series into 3 dashed series. Then you can use x parameter to set the value on axis where your lines should be at. for example you can set 

{
    name: 'Average',
    type: 'fakeLine',
    color: 'orange',
    dashStyle: 'shortdash',
    data: [{
      name: 'QWE',
      x: 0.84,
      y: 3000
    }, {
      name: 'QWE',
      x: 1.2,
      y: 3000
    }],
    stack: '',
    tooltip: {
      formatter: function() {
        return ' ' + this.point.name + ":" + this.point.y + '<br />'
      }
    },
  },

And have one line going only from top to bottom of your middle column.

example: https://jsfiddle.net/dto3Lt1f/3/

Upvotes: 3

Related Questions