Highcharts: How to combine Column Range and Line Chart? - javascript

I basically want to just combine these two charts:
1) Column range: https://www.highcharts.com/demo/columnrange
2) Basic line: https://www.highcharts.com/demo/line-basic
Is this possible, considering that the first chart has a categorical Y-Axis?
I don't need to use categories, I only want the Y-Axis of the line chart. And the lines would be overlaid on top of the horizontal bars.
So both charts would be using the X-Axis time series, but only the line chart would be using the Y-Axis numbers.

You can link both charts into one but you need to remember, that the columnrange chart is inverted and if you want to display line chart exactly like in this example (https://www.highcharts.com/demo/line-basic), you need to swap x values with y values of line series and both axis should have the same scale.
API Reference:
http://api.highcharts.com/highcharts/chart.inverted
Examples:
http://jsfiddle.net/jmmsyv9w/ - not inverted
http://jsfiddle.net/8unrzm1j/ - inverted

Related

Highchart Absolute Percentage Stacked Area

I have 10 series in one chart and using the Percentage Stacked Area chart type in Highchart, I can get the percentage distribution for each series.
However, when I deselect one series from the legend, it recalculate the percentage by only the active series. How do I tell Highchart to use the original total series instead of the active ones only?
You can set chart.ignoreHiddenSeries to false, see: http://jsfiddle.net/quthyjta/
API: http://api.highcharts.com/highcharts#chart.ignoreHiddenSeries

Google Charts Horizontal BarChart calculate percentage

Is there a way to make the google BarChart to work like the PieChart?
The google´s PieChart sums all values you provided and give percentages. The BarChart does not do that when you work with horizontal columns, the length of the columns and the graph itself are based only on the values you provided and it does not label the horizontal axis with the percentage.
Even though I format it with 'percentage' it only adds the % simbol to the current values.
Is there any way of doing that?
use the option isStacked:'percent'
https://jsfiddle.net/kzk07ocw/

Highcharts.js combined bar/line chart with timespan bars

What I am trying to achieve is to develop a graph that combines line series with bars. The x axis should be a simple timeline (dates) and the 2 y axes should be linear or logarithmic values. I have no problem creating the line series and the timeline axis.
My problem is when I am trying to implement the "time span bars". It's sort of a gantt chart combined with a line chart I guess. The bars represent data where each bar has a start date, and optionally an end date. I want each bar to start at the start date (aligned with the x axis) and end at the end date if available. If no end date is available, the bar should fill the entire chart until the right edge. I cannot figure out how to combine these time span bars with the line series. I have checked out the jsfiddle /8JhXv/1/ which is pretty close to what I am trying to achieve, except in that example, they are not on top of each other. Anyone who could give me some hints on how to put these on top of each other?
Look at some of the options here:
http://highcharts.uservoice.com/forums/55896-general/suggestions/804783-gantt-chart
Best option is not to use actual bars, but to use line series with lineWidth set to a high enough value to mimic bars visually.
You can try to use line series and columnrange (http://www.highcharts.com/demo/columnrange)

How to draw a bar chart serie over another one bar chart serie

I'm using Jqplot and I want to draw two series on my graph.
I want these two series to be drawn as bar chart. I also want the first series to be drawn over the second one in case of there x value are the same.
How can I do it? I've tried to specify the barPadding option to 0 but the two series are drawn side by side.
Thanks for your answer.
I'm not sure I understand what you mean by "first series drawn over the second one". Would a stacked bar chart suit your purposes? Check the third example on this page: http://www.jqplot.com/deploy/dist/examples/barTest.html.

Decimal values for yAxis categories in Highcharts

I need my yAxis categories to be 0 = 'Poor', 0.25 = 'Below Average', 0.75 = 'Average' 1="Good"
I set the categories right, but Highcharts seems to interpret each point I plot to be equal to "1" step on the yAxis. See http://jsfiddle.net/54cFG/
Ideally, that chart should always show 4 labels on the yAxis and the plotted points should line up at "Below Average" and "Average".
Is there a setting I'm missing? I think I pretty much tried everything at http://www.highcharts.com/ref/
You could always use plot bands to display categories on the Y axis. That way you could still keep the actual values. I have demonstrated that with your code here.
EDIT
Here is another example with the grid lines taken off and the plotBands each with their own color. Here is the color chart if you wan to change any of them.
If you prefer to use the plot bands and no y-axis labels, here is an example of that. I think it works just fine. If the user really wants to see the exact value they can hover over the point.

Categories