The goal is to try and show a breakdown of a pie chart by displaying bar graphs off of each slice. This way the user can see the sub-values of each slice in a "different way".
Any idea how to add the bars?
EDIT:
Here is a current iteration. The larger the value, the smaller the "innerSize" value for the outer ring.
Have you considered using a "wind rose" chart? It's similar in style and function to what your higher-ups are suggesting. See http://www.highcharts.com/demo/polar-wind-rose in the Highcharts demo page.
Related
How can I achieve this graph in Highcharts?
Graph design : https://i.stack.imgur.com/8G7DE.png
Help please
You can achieve it in many ways. You can start from this demo: https://www.highcharts.com/demo/combo, next you need to add some logic to show the percentage line in the second axis. To show the table under use: https://www.highcharts.com/demo/column-parsed
https://institutional.fidelity.com/app/item/RD_13569_45180/the-art-and-science-of-investment-decision-making.html
There is a very nice graph and pie chart under Investment Decision-Making in 2016.
I know it is highcharts now. I want to write something similar. But I can't find any chart type similar in its document.
Could you tell me what kind of chart it is? And how to put different data items inside the bubble.
It looks like a combination of line, bubble and pie series.
Line series (alternative: scatter with lineWidth > 0) lies under the bubbles. All interaction with this series should be disabled (hover state, tooltip, etc.).
Text inside the bubble is data label (dataLabels.enabled property should be set to true). You can manage its content in dataLabels.formattercallback function.
You can handle showing/adding pie (donut) charts in plotOptions.bubble.point.events.mouseover callback function. Text in the middle of a donut can be rendered via SVGRenderer.text().
All options that I mentioned can be found in the API: https://api.highcharts.com/highcharts/
function chart (data, selector) {
// generate chart with zoom feature. it scales the X domain and update the chart accordingly.
}
chart(dataset1, "#chart1")
chart(dataset2, "#chart2")
chart(datasetn, "#chartn")
the code above is a chart generator function which I give it different datasets to make me charts. in all charts, the dataset has the same X values but different Y values.
problem:
lets say we have 3 charts, all the X axis ranges are between 0-100. In the first chart, I drag mouse and create a zoombox between 30-60 and the first chart updates, now it is scaled between 30-60. But the second and third chart are intact. I need them to be updated as well between 30-60.
similarly if I do the same for second chart, I need the first and third one get updated.
here is jsfiddle to illustration
I made not so big modification to make this works.
First of all we remember globally the information about single chart in var charts array. This is done during creation of charts
charts.push(lineChart(data1,"#chart1"));
charts.push(lineChart(data2,"#chart2"));
charts.push(lineChart(data3,"#chart3"));
Next we can use this array in function zoomdrag and update.
This work maybe not perfect (reset of chart is missing) but show how to handle it and get the same zoom in all charts.
Here is jsfiddle
I'm not sure if this is possible, but I have separate, stacked highcharts. I'd like to keep them on the same graph, but stacked on top of each other, resetting the y axis to 0 each time. Here is a Fiddle of them all separate:
I've also attached an example graph of what I am imagining. The blue horizontal lines represent each new chart series's 0 point.
Sample graph example
//random line so it will let me post the fiddle. Ignore this
You can also achieve a similar effect using different height of multiple yAxis.
Example:
http://jsfiddle.net/6b9prwjc/
You are making highchart for each series in the array seriesAll by looping through it and that is causing it to create seperate charts for each series. If you just create 1 highchart and give it the series array, it will plot all the series on the same chart. Here is a modified version of your code to give you what your looking for.
https://codepen.io/Nasir_T/pen/zdzdrW
Also please check out the docs of highcharts and it will give you all the information you need. E.g. here is the combined charts link:
https://www.highcharts.com/docs/chart-and-series-types/combining-chart-types
[Edit for stacking option]
You can also stack them on top of each other by setting the plotOption > series > stacking properties. e.g.
plotOptions: {
series: {
stacking: 'normal'
}
}
Learn more on stacking in the following doc link.
http://api.highcharts.com/highcharts/plotOptions.area.stacking
Hope this helps.
I have plotted chart bars as Stacked, but overlapped one on another. but only last two series need to overlap, not first one. First series(additional income) need to be plot as same as 'stacked : "normal"' do.
Here is the jsfiddle to explain my experiment with highchart.
Is there any option for Series object to achieve that?
Thanks
Peter
You should disable gruping or set pointWidth http://api.highcharts.com/highcharts#plotOptions.column.pointWidth