javascript - Proper x-axis for Highcharts stack group column - Stack Overflow

admin管理员组

文章数量:1345285

I'm trying to develop a chart that visualizes data using 1 measurement and 3 dimensions. I put one dimension on the x-axis, one as stack and one as list of series.

HighCharts has the stacked-grouped-column chart that I use as basis. See my jsfiddle.

    series: [{
        name: 'John',
        color: '#ff4400',
        data: [5, 3, 4, 7, 2],
        stack: '2014'
    }, {
        name: 'Joe',
        color: '#44ff00',
        data: [3, 4, 4, 2, 5],
        stack: '2014'
    }, {
        name: 'John',
        color: '#ff4400',
        data: [2, 5, 6, 2, 1],
        showInLegend: false,
        stack: '2015'
    }, {
        name: 'Joe',
        data: [3, 0, 4, 4, 3],
        color: '#44ff00',
        showInLegend: false,
        stack: '2015'
    }]

I would like to be able to display the stack name on a second level x-axis. I know of the group-plugin, but that does not seems to work together with stacks.

Any hints?

I'm trying to develop a chart that visualizes data using 1 measurement and 3 dimensions. I put one dimension on the x-axis, one as stack and one as list of series.

HighCharts has the stacked-grouped-column chart that I use as basis. See my jsfiddle.

    series: [{
        name: 'John',
        color: '#ff4400',
        data: [5, 3, 4, 7, 2],
        stack: '2014'
    }, {
        name: 'Joe',
        color: '#44ff00',
        data: [3, 4, 4, 2, 5],
        stack: '2014'
    }, {
        name: 'John',
        color: '#ff4400',
        data: [2, 5, 6, 2, 1],
        showInLegend: false,
        stack: '2015'
    }, {
        name: 'Joe',
        data: [3, 0, 4, 4, 3],
        color: '#44ff00',
        showInLegend: false,
        stack: '2015'
    }]

I would like to be able to display the stack name on a second level x-axis. I know of the group-plugin, but that does not seems to work together with stacks.

Any hints?

• javascript
• charts
• highcharts
• stacked-chart

Share Improve this question Follow edited Jun 24, 2015 at 14:40 isherwood 61.2k1616 gold badges121121 silver badges170170 bronze badges asked Jun 24, 2015 at 13:44 Rob AudenaerdeRob Audenaerde 20.1k1212 gold badges8282 silver badges134134 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 11

It might not be the best solution (so please keep 'm ing), but I now fake a dataseries.

See jsfiddle update

  xAxis: [{
            categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
        },
               {
            categories: ['2014', '2015', '2014', '2015', '2014', '2015','2014', '2015', '2014', '2015'],
                   opposite: true
        }],        
  series: [{
        name: 'John',
        color: '#ff4400',
        data: [5, 3, 4, 7, 2],
        stack: '2014',

    }, {
        name: 'Joe',
        color: '#44ff00',
        data: [3, 4, 4, 2, 5],
        stack: '2014',

    }, {
        name: 'John',
        color: '#ff4400',
        data: [2, 5, 6, 2, 1],
        showInLegend: false,
        stack: '2015'
    }, {
        name: 'Joe',
        data: [3, 0, 4, 4, 3],
        color: '#44ff00',
        showInLegend: false,
        stack: '2015'
    }, {
        name: '',
        data: [0, 0, 0,0, 0, 0,0, 0, 0,0],
        showInLegend: false,
        stack: '2015',
        xAxis: 1            
    }]

Result:

Update

Fiddled around with fake axis labels: http://jsfiddle/b72e0vh4/8/

本文标签： javascriptProper xaxis for Highcharts stack group columnStack Overflow