CODEWITHSUNDEEP
javascripthighcharts
srikriss
srikriss

Reputation: 13

Highstock stacked bar chart with slider overlayed on the graph

I am trying to implement a bar chart with slider overlayed on the graph similar to following image Bar chart with slider overlayed on chart.

Is there any existing highstocks api options that I can take leverage of to implement this behaviour?

Note: I tried with navigator option available with high stock. But Navigator option helps to display a slider below the graph. I want to silder to be overlayed on the chart itself

Upvotes: 1

Views: 181

Answers (2)

Sebastian Wędzel
Sebastian Wędzel

Reputation: 11633

  1. From the API options you can achieve it by manipulating navigator options such as: height, margin etc. However, this solution, in my opinion, disturbs the chart working and readability.

Demo: https://jsfiddle.net/BlackLabel/nqeuhdgk/

"navigator": {
    maskInside: false,
  yAxis: {
    lineWidth: 1,
    minorTicks: true,
    labels: {
      enabled: true
    }
  },
  height: 260,
  margin: 150,
  "enabled": true,
  "series": {
    "stacking": 'normal',
    "type": 'column',
    dataGrouping: {
        enabled: false
    }
  },

},

Notice that comparing to your demo, not every column is shown and the yAxis readability is different.

  1. I did some changes in the core code and here is my output, which is a better solution I think.

Demo: https://jsfiddle.net/BlackLabel/07mdwou6/

Test it and let me know what do you think.

API: https://api.highcharts.com/highstock/navigator.height

Upvotes: 0

Barbara Laird
Barbara Laird

Reputation: 12717

You can hide the main chart and just display the navigator: https://jsfiddle.net/bqhz2fwn/

The only changes I made to your fiddle were to hide the xAxis and make the height of the yAxis 0:

    "xAxis": {
  "categories": [
    1996,
    1997,
    1998,
    1999,
    2000,
    2001,
    2002,
    2003,
    2004,
    2005,
    2006,
    2007,
    2008,
    2009,
    2010,
    2011,
    2012,
    2013,
    2014,
    2015,
    2016
  ],
  lineWidth: 0,
  tickLength: 0,
  labels: {
    enabled: false
  }
},
yAxis: {
  height: 0,
  gridLineWidth: 0,
  labels: {
    enabled: false
  }
},

And then increase the height of the navigator to fill the space: 

    "navigator": {
  height: 275,

Upvotes: 1

Related Questions