I'm unsure if this is a feature Highcharts provides, but I would like to link two separate bar graphs together. I've created two seperate bar graphs with the goal to have them side by side in a div like the image shows below. At the moment my issue is that graph #2 on the right side's 7% graph larger then the 12% and 19% in graph #1 because it its determining the size based off of the entries in graph #2. Is it possible to link the two so that all values being shown on both graphs account for one another? Or configure one to have a similar outcome to the one below?
Here is a like to a jsfiddle example
You can synchronize y-axis extremes by using setExtremes method:
var yAxis1 = chart1.yAxis[0],
yAxis2 = chart2.yAxis[0],
yMin = yAxis1.min < yAxis2.min ? yAxis1.min : yAxis2.min,
yMax = yAxis1.max > yAxis2.max ? yAxis1.max : yAxis2.max;
yAxis1.setExtremes(yMin, yMax, true, false);
yAxis2.setExtremes(yMin, yMax, true, false);
Live demo: https://jsfiddle.net/BlackLabel/tmv540y2/
API Reference: https://api.highcharts.com/class-reference/Highcharts.Axis#setExtremes
Or create one chart with two y-axes linked to each other.
Live demo: https://jsfiddle.net/BlackLabel/ok8746eh/
API Reference: https://api.highcharts.com/highcharts/yAxis.linkedTo
Related
I know this can be done in d3 Sankey but I don't need anything that complex. I have my Highcharts sankey complete and all my formatting is done, save one thing.
The chart renders aligned along the centerline. I'd like to set it so that the entire sankey diagram is flat against the top border of the frame.
The first node will be flat against the top, and all other nodes and links will flow down from that point. I've searched here and on the Highcharts support sites, read the APIs, and consulted The Google but I have not turned up anything.
Since this is purely aesthetic it's not a showstopper if I can't do it but since I've now seen it done in d3, I'm hoping there is a Highcharts equivalent.
Thank you
See diagram for reference (ignore colors and link weights of course)see illustration
I've slightly edited the core code and achieved the desired result.
Live working example: http://jsfiddle.net/kkulig/dzdsjwbs/
I've overwritten Highcharts.seriesTypes.sankey.prototype.translate function and commented out two lines in these two code fragments:
1.
fromNodeTop = (
//column.top(factor) +
column.offset(node, factor)
),
2.
toY = (
//toColTop +
(toNode.offset(point, 'linksTo') * factor) +
nodeColumns[toNode.column].offset(
toNode,
factor
)
),
I have a chart where two graphs/series have different units. Therefore the y-Axis is different and the extremes are calculated separately from each other.
Is there a way to tell Highcharts to use the same scale, despite the different units, across all graphs/series?
Below is the chart. Relevant y-axis are the ones on the right, as an example. The units are different: "W/m^2" and "kW/kWp", however I want the scale to be the same.
Of course, one way would be a manual approach: in my controller, to go through all the data series and check the overall minimum and maximum value of all data series and then apply the extremes manually via
chart.yAxis[i].setExtremes(min, max)
but I was wondering if Highcharts has any way, like a configuration option, to achieve this.
I didn't find anything in the docs so far.
Thanks.
There is an option to achieve that. You can link one axis to another via linkedTo property.
From API:
linkedTo : Number
Index of another axis that this axis is linked to. When an axis is linked to a master axis, it will take the same extremes as the master, but as assigned by min or max or by setExtremes. It can be used to show additional info, or to ease reading the chart by duplicating the scales.
http://api.highcharts.com/highcharts/yAxis.linkedTo
Example: http://jsfiddle.net/n8tokqru/
yAxis: [{
}, {
linkedTo: 0
}],
I have designed a treemap using highcharts with custom algorithm.It has a drilldown to 1 level. There is a drop down for my chart and it has two options for selection. treemap is displayed on the basis of dropdown selection which has a group by feature implemented using underscore.js library. The feature is working fine. But the problem is, all the tiles which are grouped together, are placed next to each other. My requirement is : i want all those tiles to be packed in one big tile with one label. something like header title in D3(exactly the same). Please let me know how to go about it. Is it something like treemap within a treemap? Also i wanted to know if its feasible to have different labels and tooltips for parent and children in the same treemap. any leads would be helpful.
actual image
For a rails web application I need a timeline with on the top (stacked) bar charts and on the bottom single events that should be recognizably different using e.g. forms (squares, rhombus, circles) and colors.
It's also important that I get some kind of picture back in order to reuse it to build a pdf.
At the moment I do the bar chart part with google charts, but I can't find a way to do the events. Those could also be on a separate chart that I then align in html or the pdf.
have you ever try the highcharts.
Here is an example of time series with events made with amCharts: http://www.amcharts.com/stock-chart/stock-events/
You can have any number of graphs stacked on each other, if this is what you want to do.
Disclaimer: I am the author of amCharts.
I would like to fill the area between two serieses (when serieses cross each other). See below. I tried the 'arearange' chart type but it filled most of the chart with solid colors. I saw a similar question but I wanted to know if Highcharts supports what I want or I have to use the solution posted in that question.
Chart now:
What I want:
type:'arearange'
You need to use three series, first / second as lines, third as arearange with defined values.
Related topic: How to fill the Area between two series with multiples yAxis in HighChart?