Highcharts - linear chart hidden in combination of graphs

Question

The highcharts examples and a combination of graphs, work great for lines and graphs. They also seem to overlap nicely. However, when I move the linear graph to show first, it gets 'hidden' behind the rest of the graphs. [ Linear chart hidden ] or

Moving the 'line' to display first hides it behind the rest of the data. I want the line to still show, but it needs to be the first piece of data mapped to the graph:

In the second example link, updating the code thus, hides the linear chart behind the rest of the charts:

$(function () {
    $('#container').highcharts({
        title: {
            text: 'Combination chart'
        },
        xAxis: {
            categories: ['Apples', 'Oranges', 'Pears', 'Bananas', 'Plums']
        },
        labels: {
            items: [{
                html: 'Total fruit consumption',
                style: {
                    left: '50px',
                    top: '18px',
                    color: (Highcharts.theme && Highcharts.theme.textColor) || 'black'
                }
            }]
        },
        series: [{
            type: 'spline',
            name: 'Average',
            data: [3, 2.67, 3, 6.33, 3.33],
            marker: {
                lineWidth: 2,
                lineColor: Highcharts.getOptions().colors[3],
                fillColor: 'white'
            }
        },{
            type: 'column',
            name: 'Jane',
            data: [3, 2, 1, 3, 4]
        }, {
            type: 'column',
            name: 'John',
            data: [2, 3, 5, 7, 6]
        }, {
            type: 'column',
            name: 'Joe',
            data: [4, 3, 3, 9, 0]
        },  {
            type: 'pie',
            name: 'Total consumption',
            data: [{
                name: 'Jane',
                y: 13,
                color: Highcharts.getOptions().colors[0] // Jane's color
            }, {
                name: 'John',
                y: 23,
                color: Highcharts.getOptions().colors[1] // John's color
            }, {
                name: 'Joe',
                y: 19,
                color: Highcharts.getOptions().colors[2] // Joe's color
            }],
            center: [100, 80],
            size: 100,
            showInLegend: false,
            dataLabels: {
                enabled: false
            }
        }]
    });
});

You can simply use index in your series for setting the index of your series (for example if you want to have line series in front). Here you can see an example how it can work: http://jsfiddle.net/aurvdk62/ if this example will meet your requirements I will post it as an answer — Grzegorz Blachliński, Oct 11 '16 at 07:56
I need 'Average' to be the first piece of data in the 'x-axis' [Average, Jane, John, Joe]. In your example it is the last with index:5 — Loser Coder, Oct 11 '16 at 16:47
Trying out the legend : { reversed: true } option, but is there a way to only set 'reverse: true' on a certain data element? — Loser Coder, Oct 11 '16 at 18:51
So maybe you can simply use legendIndex? http://jsfiddle.net/aurvdk62/9/ — Grzegorz Blachliński, Oct 12 '16 at 10:46

score 0 · Answer 1 · answered Oct 19 '16 at 12:22

You should be able to make your chart using series.legendIndex parameter. You can find more information about this parameter in Highcharts API: http://api.highcharts.com/highcharts/series.legendIndex

    series: [{
  type: 'spline',
  name: 'Average',
  legendIndex: 0,
  data: [3, 2.67, 3, 6.33, 3.33],
  index: 5,
  marker: {
    lineWidth: 2,
    lineColor: Highcharts.getOptions().colors[3],
    fillColor: 'white'
  }
}, {
  legendIndex: 1,

  type: 'column',
  name: 'Jane',
  data: [3, 2, 1, 3, 4]
}, {
  legendIndex: 2,

  type: 'column',
  name: 'John',
  data: [2, 3, 5, 7, 6]
}, {
  legendIndex: 3,

  type: 'column',
  name: 'Joe',
  data: [4, 3, 3, 9, 0]
}, {
  type: 'pie',
  name: 'Total consumption',
  data: [{
    name: 'Jane',
    y: 13,
    color: Highcharts.getOptions().colors[0] // Jane's color
  }, {
    name: 'John',
    y: 23,
    color: Highcharts.getOptions().colors[1] // John's color
  }, {
    name: 'Joe',
    y: 19,
    color: Highcharts.getOptions().colors[2] // Joe's color
  }],
  center: [100, 80],
  size: 100,
  showInLegend: false,
  dataLabels: {
    enabled: false
  }
}]

Here you can find an example how your chart may work with this parameter: http://jsfiddle.net/aurvdk62/9/

Highcharts - linear chart hidden in combination of graphs

1 Answers1