23833

Highcharts: Bar inside of a stacked bar

Question:

I want to create a chart with a bar inside of a stacked bar as seen on the image bellow. <a href="http://i61.tinypic.com/317axx4.jpg" rel="nofollow">Chart http://i61.tinypic.com/317axx4.jpg</a>

I managed to put the column inside of the column but, I can't make it work for the bar. How can I put the bar inside of the stacked bar?

<a href="http://jsfiddle.net/danijelf/zs6juetp/1/" rel="nofollow">My code - JsFiddle</a>

var chart = new Highcharts.Chart({ chart: { renderTo:'container', }, title: { text: 'Test %' }, xAxis: { categories: ['2014', '2013', '2012', '2011'] }, yAxis: { opposite: true, labels: { format: '{value}%', }, }, plotOptions: { series: { stacking: 'normal' }, column: { stacking: 'percent' } }, legend: { enabled: false }, series: [{ name: 'red', type: 'bar', data: [70, 70, 70, 70], color: 'rgba(253, 155, 155, 1)', pointPadding: 0.1, pointPlacement: -0.2, stack: 'bar' }, { name: 'yellow', type: 'bar', data: [5, 5, 5, 5], color: 'rgba(255, 255, 153, 1)', pointPadding: 0.1, pointPlacement: -0.2, stack: 'bar' }, { name: 'green', type: 'bar', data: [25, 25, 25, 25], color: 'rgba(204, 255, 153, 1)', pointPadding: 0.1, pointPlacement: -0.2, stack: 'bar' }, { name: 'Value', type: 'bar', data: [35, 30, 25, 20], color: 'rgba(126,86,134,.9)', pointPadding: 0.35, pointPlacement: -0.2, dataLabels: { enabled: true, format: '{y}%' }, }] });

Any help appreciated.

Answer1:

You could set grouping to false, so all stacks will be placed on top of each other - overlap each other.

Example: <a href="http://jsfiddle.net/zs6juetp/2/" rel="nofollow">http://jsfiddle.net/zs6juetp/2/</a>

plotOptions: { series: { grouping: false ...

API reference: <a href="http://api.highcharts.com/highcharts#plotOptions.bar.grouping" rel="nofollow">plotOptions.bar.grouping</a>

Answer2:

It looks like you're making a bullet graph.

I have examples of this here:

<ul><li><a href="http://jsfiddle.net/jlbriggs/UGs2E/17/" rel="nofollow">http://jsfiddle.net/jlbriggs/UGs2E/17/</a></li> </ul>

.

plotOptions:{ bar:{ grouping: false, shadow:false, borderWidth:0, pointPadding:.25, groupPadding:0 }, scatter:{ marker:{ symbol:'line', lineWidth:3, radius:9, lineColor:'#333' } } }

Also uses a function to extend the marker object for the target line, on a scatter series:

Highcharts.Renderer.prototype.symbols.line = function(x, y, width, height) { return ['M',x ,y + width / 2,'L',x+height,y + width / 2]; };

Recommend

  • How can I put custom color in High Charts PIE data | Slice and want to change slice text
  • How to sort the items within each stacking column?
  • Add a line on the y axis d3
  • JavaFX BarChart doesn't update
  • Butterfly Chart using Highcharts
  • IE7 dropdown menu appears behind image
  • Placing labels inside pie chart slices (Highchart)
  • CSS: Overlapping DIVs issue
  • How to correct mouse event in Highcharts
  • Multiple XAxis with ZedGraph
  • How to get mouse position in chart-space
  • How can I alter the spacing for the Y-Axis Labels in MPAndroidchart?
  • How to center the y-axis label horizontally in Highcharts?
  • Email SAS html output
  • how to convert JSONString to Javascript Object
  • jqPlot date axis - bars drawn on wrong day?
  • Neo4j: Legacy Indexes and auto index vs new label bases schema indexes
  • Scala using regex with or syntax in match case statement
  • Convert two columns Pandas data frame to dictionary of list with first column as keys
  • PyQt4 application on Windows is crashing on exit
  • C# List of Panels
  • Activation Function choice for Neural network
  • How to Cache Real-time Data?
  • Display issues when we change from one jquery mobile page to another in firefox
  • Deselecting radio buttons while keeping the View Model in synch
  • MySQL WHERE-condition in procedure ignored
  • JSON with duplicate key names losing information when parsed
  • How to model a transition system with SPIN
  • Font Awesome Showing Box instead of Icons
  • Web-crawler for facebook in python
  • Jquery - Jquery Wysiwyg return html as a string
  • Properly structure and highlight a GtkPopoverMenu using PyGObject
  • trying to dynamically update Highchart column chart but series undefined
  • Is it possible to post an object from jquery to bottle.py?
  • sending mail using smtp is too slow
  • Busy indicator not showing up in wpf window [duplicate]
  • Why is Django giving me: 'first_name' is an invalid keyword argument for this function?
  • How can I use `wmic` in a Windows PE script?
  • Python/Django TangoWithDjango Models and Databases
  • java string with new operator and a literal