Stacked Column Chart With Unequal SubGroups in HighCharts.js

user3351605

I am attempting to create a stacked column chart with an unequal number of "sub-groups".

For example, given the following data:

Category#1 : [SubCategory1: 2, SubCategory2: 4, SubCategory3: 3], 
Category#2 : [SubCategory4: 5, SubCategory5: 3], 
Category#3 : [SubCategory6: 4, SubCategory7: 3, SubCategory8: 3, SubCategory9: 5]
...

I want to create a column chart where the first column is comprised of three stacked segments and has a total height of 9, the second column has a stack of two segments with total height of 8, and the third column has four segments with a total height of 15.

After having worked for a little while with the HighCharts API and generally getting good results, I believe what I want to accomplish is probably doable and I am likely just missing some combination of options or structuring my data incorrectly. Does anyone know what I need to do in order to create such a chart?

Halvor Holsten Strand

Two of the ways you can solve this are:


  1. Giving each point in your series a specific x index that relates to the category index.

    Example of a series (JSFiddle):

    series: [{
        name: 'John',
        data: [{x:0,y:5},{x:3,y:7},{x:4,y:2}]
    }
    

    Here we skip the 2nd and 3rd category (index 1 and 2), so they will not have a value.


  1. Using null values in your series to skip having it appear in a category.

    Example of a series (JSFiddle):

    series: [{
        name: 'John',
        data: [5, null, null, 7, 2]
    }
    

    This series also skips the 2nd and 3rd category, like the one above.


Your solution choice may rely on how many null values you would end up with. If it is only a few, then that might be the most lightweight solution. If it is a lot, then using Point objects with x values may be more suitable and cleaner.

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

From Dev

Highcharts tooltip bug with stacked column chart

From Dev

How to modify Column stacked percent Chart in Highcharts

From Dev

HighCharts Stacked Column Adding Onclick Event to the chart

From Dev

stacked group column chart in highcharts example

From Dev

Pass data to Stacked Column Chart (Highcharts Framework)

From Dev

Updating highcharts.js data on a 'stacked columns' chart : update() or setData()?

From Dev

HighCharts stacked column range

From Dev

Highcharts overlapping and stacked column

From Dev

HighCharts stacked column range

From Dev

HighCharts: Drilldown to a Stacked Column

From Dev

Highcharts drilldown in stacked area chart

From Dev

Grouping a stacked bar chart in Highcharts

From Dev

Highcharts - Detail chart with stacked columns

From Dev

Grouped and Stacked Column Chart

From Dev

Stacked column chart in Excel

From Dev

Issue on Switching Highcharts.js Spider Web Chart and Column Chart

From Dev

Highcharts stacked column bar with line

From Dev

Highcharts datalabel for each stacked column

From Dev

Highcharts Stacked Percentage Column Hyperlink

From Dev

Highcharts Stacked Percentage Column Hyperlink

From Dev

Highcharts 4.0.3 stacked bar chart bug adds â-

From Dev

HighCharts stacked grouped chart - with grouped caregories plugin

From Dev

Highcharts column chart grouping

From Dev

Issue with creating stacked column chart

From Dev

HighChart: Stacked Column Chart with dropdown

From Dev

Issue with creating stacked column chart

From Dev

Turn a stacked column google chart into a waterfall chart

From Dev

set color of grouped stacked column in highcharts

From Dev

Stacked column highcharts change x and y

Related Related

HotTag

Archive