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
Related
I would like to know if this is possible to do with Chart.js. I have not been able to figure it out.
Basically, I want a horizontal bar chart where time is on the X axis, and the bars have data that is a start date/time and end date/time, such that the bars "float" and are not anchored to the left side of the chart. The bar would start at the start time and end at the end time, as labeled on the x axis.
Also, I need the y axis labels to be inside the horizontal bar.
Does Chart.js support this use case? Does anyone have sample code? Thanks!
Yes they support floating bars (https://www.chartjs.org/docs/latest/samples/bar/floating.html) if you add the property indexAxis: 'y' in the options object it will become a horizontal bar chart. to get the labels in the bars you will need to use the datalabels plugin: https://chartjs-plugin-datalabels.netlify.app/samples/charts/bar.html
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.
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.
I'm currently using a the NVD3 discreteBarChart but I have a lot of data and the labels on the X axis, which are dates in my application, are encroaching upon each other like this : ). This doesn't happen with a multiBar or a linePlusBar chart, where the labels are automatically adapted :
How can I prevent the lablels on the discreteBar chart to impinge on the others?
Thanks for your answers!
Little late to answer, but to get similar results but using multi-barchart as mentioned by Lars , you can use following command to get a similar graph (i.e hide "stacked" and "grouped", as well as legend buttons).
n1$chart(showControls = FALSE, showLegend = FALSE)
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