Using a highstock chart with stacked series

Question

I currently have a highcharts stacked column chart that looks like this:

And I have so much data to put in that chart that it just would look ugly and wouldn't fit with the width:

Notice that I have 4 colours in each column in the two screenshots

So I wanted to use a highstock chart where the user is able to zoom in and out of data such as: https://www.highcharts.com/stock/demo/column

Is there a way, however, that I can use it while maintaining the stacking?

Here's a fiddle that contains a small sample data of my stacked chart and here's its code:

// Create the chart
Highcharts.chart('container', 
    {
  "chart": {
    "type": "column"
  },
  "title": {
    "text": ""
  },
  "xAxis": {
    "categories": [
      "Start Term 1",
      "Start Term 2",
      "29-Sep",
      "Start Term 3",
      "03-Oct",
      "05-Oct",
      "Start Term 4",
      "12-Oct",
      "20-Oct",
      "23-Oct",
      "30-Oct",
      "17-Nov",
      "21-Nov"
    ],
    "labels": {
      "style": {
        "font-size": "12px"
      },
      "useHTML": true
    }
  },
  "yAxis": {
    "title": {
      "text": "Time (hh:mm)"
    },
    "tickInterval": 600,
    "labels": {},
    "gridLineWidth": 0,
    "plotLines": [
      {
        "value": 0,
        "width": 1,
        "color": "#000",
        "zIndex": 4
      }
    ],
    "tickmarkPlacement": "on"
  },
  "plotOptions": {
    "column": {
      "stacking": "normal",
      "events": {}
    }
  },
  "credits": {
    "enabled": false
  },
  "tooltip": {
    "shared": true,
    "crosshairs": true
  },
  "legend": {
    "align": "right",
    "verticalAlign": "top",
    "itemStyle": {
      "display": "none"
    },
    "title": {
      "text": "Click a colour"
    }
  },
  "series": [
    {
      "name": "On Task Teacher Recommended",
      "data": [
        null,
        null,
        10688,
        null,
        4624,
        4330,
        null,
        5220,
        169,
        5220,
        4330,
        9144,
        4345
      ],
      "color": "#86E067",
      "events": {},
      "point": {
        "events": false
      },
      "customEvents": {
        "series": {},
        "point": {}
      }
    },
    {
      "name": "On Task Student Discovered",
      "data": [
        null,
        null,
        10373,
        null,
        5384,
        5301,
        null,
        5521,
        1002,
        5599,
        5387,
        15535,
        5373
      ],
      "color": "#5CB5E5",
      "events": {},
      "point": {
        "events": false
      },
      "customEvents": {
        "series": {},
        "point": {}
      }
    },
    {
      "name": "Uncategorised",
      "data": [
        null,
        null,
        341,
        null,
        226,
        226,
        null,
        226,
        425,
        2240,
        1281,
        3727,
        1334
      ],
      "color": "#F98157",
      "events": {},
      "point": {
        "events": false
      },
      "customEvents": {
        "series": {},
        "point": {}
      }
    },
    {
      "name": "Off Task",
      "data": [
        null,
        null,
        -18937,
        null,
        -7056,
        -7034,
        null,
        -7163,
        -1271,
        -7208,
        -7091,
        -21658,
        -7050
      ],
      "color": "#E3454D",
      "events": {},
      "point": {
        "events": false
      },
      "customEvents": {
        "series": {},
        "point": {}
      }
    }
  ]
}
);

Deep 3015 Deep 3015 · Accepted Answer · 2017-11-21T06:41:36

You can use scrollbars-for-any-axis to add scroll in highcharts like highstock. you have to use highstock js instead of highcharts js.

You have to use max attribute to set number of column you want to see in x-axis.

// Create the chart
Highcharts.chart('container', {
  "chart": {
    "type": "column"
  },
  "title": {
    "text": ""
  },
  "xAxis": {
    "categories": [
      "Start Term 1",
      "Start Term 2",
      "29-Sep",
      "Start Term 3",
      "03-Oct",
      "05-Oct",
      "Start Term 4",
      "12-Oct",
      "20-Oct",
      "23-Oct",
      "30-Oct",
      "17-Nov",
      "21-Nov"
    ],
    "labels": {
      "style": {
        "font-size": "12px"
      },
      "useHTML": true
    },
    min: 0,  
    max: 4,  //this is value to be changed based on column number 
    scrollbar: {
      enabled: true
    },
  },
  "yAxis": {
    "title": {
      "text": "Time (hh:mm)"
    },
    "tickInterval": 600,
    "labels": {},
    "gridLineWidth": 0,
    "plotLines": [{
      "value": 0,
      "width": 1,
      "color": "#000",
      "zIndex": 4
    }],
    "tickmarkPlacement": "on",

  },
  "plotOptions": {
    "column": {
      "stacking": "normal",
      "events": {}
    }
  },
  "credits": {
    "enabled": false
  },
  "tooltip": {
    "shared": true,
    "crosshairs": true
  },
  "legend": {
    "align": "right",
    "verticalAlign": "top",
    "itemStyle": {
      "display": "none"
    },
    "title": {
      "text": "Click a colour"
    }
  },
  "series": [{
    "name": "On Task Teacher Recommended",
    "data": [
      null,
      null,
      10688,
      null,
      4624,
      4330,
      null,
      5220,
      169,
      5220,
      4330,
      9144,
      4345
    ],
    "color": "#86E067",
    "events": {},
    "point": {
      "events": false
    },
    "customEvents": {
      "series": {},
      "point": {}
    }
  }, {
    "name": "On Task Student Discovered",
    "data": [
      null,
      null,
      10373,
      null,
      5384,
      5301,
      null,
      5521,
      1002,
      5599,
      5387,
      15535,
      5373
    ],
    "color": "#5CB5E5",
    "events": {},
    "point": {
      "events": false
    },
    "customEvents": {
      "series": {},
      "point": {}
    }
  }, {
    "name": "Uncategorised",
    "data": [
      null,
      null,
      341,
      null,
      226,
      226,
      null,
      226,
      425,
      2240,
      1281,
      3727,
      1334
    ],
    "color": "#F98157",
    "events": {},
    "point": {
      "events": false
    },
    "customEvents": {
      "series": {},
      "point": {}
    }
  }, {
    "name": "Off Task",
    "data": [
      null,
      null, -18937,
      null, -7056, -7034,
      null, -7163, -1271, -7208, -7091, -21658, -7050
    ],
    "color": "#E3454D",
    "events": {},
    "point": {
      "events": false
    },
    "customEvents": {
      "series": {},
      "point": {}
    }
  }]
});

<!--<script src="https://code.highcharts.com/highcharts.js"></script>-->
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<script src="https://code.highcharts.com/modules/drilldown.js"></script>

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

Fiddle demo

OR

You can use chart.zoomType to zoom chart.

// Create the chart
Highcharts.chart('container', 
    {
  "chart": {
    "type": "column",
    zoomType:'x' //only x axis zoom
  },
  "title": {
    "text": ""
  },
  "xAxis": {
    "categories": [
      "Start Term 1",
      "Start Term 2",
      "29-Sep",
      "Start Term 3",
      "03-Oct",
      "05-Oct",
      "Start Term 4",
      "12-Oct",
      "20-Oct",
      "23-Oct",
      "30-Oct",
      "17-Nov",
      "21-Nov"
    ],
    "labels": {
      "style": {
        "font-size": "12px"
      },
      "useHTML": true
    }
  },
  "yAxis": {
    "title": {
      "text": "Time (hh:mm)"
    },
    "tickInterval": 600,
    "labels": {},
    "gridLineWidth": 0,
    "plotLines": [
      {
        "value": 0,
        "width": 1,
        "color": "#000",
        "zIndex": 4
      }
    ],
    "tickmarkPlacement": "on"
  },
  "plotOptions": {
    "column": {
      "stacking": "normal",
      "events": {}
    }
  },
  "credits": {
    "enabled": false
  },
  "tooltip": {
    "shared": true,
    "crosshairs": true
  },
  "legend": {
    "align": "right",
    "verticalAlign": "top",
    "itemStyle": {
      "display": "none"
    },
    "title": {
      "text": "Click a colour"
    }
  },
  "series": [
    {
      "name": "On Task Teacher Recommended",
      "data": [
        null,
        null,
        10688,
        null,
        4624,
        4330,
        null,
        5220,
        169,
        5220,
        4330,
        9144,
        4345
      ],
      "color": "#86E067",
      "events": {},
      "point": {
        "events": false
      },
      "customEvents": {
        "series": {},
        "point": {}
      }
    },
    {
      "name": "On Task Student Discovered",
      "data": [
        null,
        null,
        10373,
        null,
        5384,
        5301,
        null,
        5521,
        1002,
        5599,
        5387,
        15535,
        5373
      ],
      "color": "#5CB5E5",
      "events": {},
      "point": {
        "events": false
      },
      "customEvents": {
        "series": {},
        "point": {}
      }
    },
    {
      "name": "Uncategorised",
      "data": [
        null,
        null,
        341,
        null,
        226,
        226,
        null,
        226,
        425,
        2240,
        1281,
        3727,
        1334
      ],
      "color": "#F98157",
      "events": {},
      "point": {
        "events": false
      },
      "customEvents": {
        "series": {},
        "point": {}
      }
    },
    {
      "name": "Off Task",
      "data": [
        null,
        null,
        -18937,
        null,
        -7056,
        -7034,
        null,
        -7163,
        -1271,
        -7208,
        -7091,
        -21658,
        -7050
      ],
      "color": "#E3454D",
      "events": {},
      "point": {
        "events": false
      },
      "customEvents": {
        "series": {},
        "point": {}
      }
    }
  ]
}
);

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<script src="https://code.highcharts.com/modules/drilldown.js"></script>

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

Fiddle demo

Using a highstock chart with stacked series

1 Answers