score:1
Accepted answer
There is an experimental wrap on Highcharts User Voice - multiple axis alignment control. It was written some time ago but it still works.
The wrap:
/**
* Experimental Highcharts plugin to implement chart.alignThreshold option. This primary axis
* will be computed first, then all following axes will be aligned to the threshold.
* Author: Torstein Hønsi
* Last revision: 2016-11-02
*/
(function (H) {
var Axis = H.Axis,
inArray = H.inArray,
wrap = H.wrap;
wrap(Axis.prototype, 'adjustTickAmount', function (proceed) {
var chart = this.chart,
primaryAxis = chart[this.coll][0],
primaryThreshold,
primaryIndex,
index,
newTickPos,
threshold;
// Find the index and return boolean result
function isAligned(axis) {
index = inArray(threshold, axis.tickPositions); // used in while-loop
return axis.tickPositions.length === axis.tickAmount && index === primaryIndex;
}
if (chart.options.chart.alignThresholds && this !== primaryAxis) {
primaryThreshold = (primaryAxis.series[0] && primaryAxis.series[0].options.threshold) || 0;
threshold = (this.series[0] && this.series[0].options.threshold) || 0;
primaryIndex = primaryAxis.tickPositions && inArray(primaryThreshold, primaryAxis.tickPositions);
if (this.tickPositions && this.tickPositions.length &&
primaryIndex > 0 &&
primaryIndex < primaryAxis.tickPositions.length - 1 &&
this.tickAmount) {
// Add tick positions to the top or bottom in order to align the threshold
// to the primary axis threshold
while (!isAligned(this)) {
if (index < primaryIndex) {
newTickPos = this.tickPositions[0] - this.tickInterval;
this.tickPositions.unshift(newTickPos);
this.min = newTickPos;
} else {
newTickPos = this.tickPositions[this.tickPositions.length - 1] + this.tickInterval;
this.tickPositions.push(newTickPos);
this.max = newTickPos;
}
proceed.call(this);
}
}
} else {
proceed.call(this);
}
});
}(Highcharts));
All you need to do is set alignThresholds
in chart
options.
Highcharts.chart('container', {
chart: {
alignThresholds: true
},
live example: http://jsfiddle.net/f3urehs0/
Source: stackoverflow.com
Related Query
- Primary and Secondary yAxis zero on different levels
- highcharts and different yAxis for different categories
- highcharts how to make x and y axis starting on the same zero using categories on yAxis
- How to make Column type series Secondary yAxis values dynamic and not always start with 0?
- Highcharts, make the yAxis start at zero
- Highcharts - how to properly update series[0].data and yAxis title of a VUMeter?
- Highcharts shared tooltip requires different valueSuffix and varying decimals
- Can color of data label be different inside and outside of the bar in Highchart
- Highcharts - best way to handle and display zero (or negative) values in a line chart series with logarithmic Y axis
- Plotting seconds, minutes and hours on the yAxis with Highcharts
- Possible to use xAxis with type "datetime" and yAxis with categories?
- Remove space between yAxis and data in highcharts
- Highcharts: X and Y Axis cross at zero in scatter chart
- Highcharts - yAxis logarithmic scale and allowDecimals set to false not seeming to have any effect
- display content on highcharts Xaxis and Yaxis title in form of subscript and superscript
- Highcharts - Hide child labels in a multiple levels and multiple layouts treemap
- Highcharts - Global configuration with common code and unique data & Headings
- Changing yAxis and plotOptions for drilldown
- Highcharts show the same yAxis start and end value with multiple data series
- Highcharts plotLines with multiple xAxis and yAxis
- React highchart: Shared tooltip in same and different chart
- Negative color with area color fill and yAxis
- Highcharts - reduce the space between zero data line and x-axis
- How to change space value between grid and yAxis in Highcharts line chart
- How do I force highcharts to pay attention to min and max on my secondary axis?
- How do I dynamically change the yAxis min, max and tickInterval in HighCharts
- Legend and DataLabels with different "names"
- Highcharts Columnrange data labels high and low different colors
- Highcharts series showing different data for 'column' and 'line' chart
- Change xAxis and yAxis title of drilldown chart after entering into second series
More Query from same tag
- Point title in bubble chart (Highcharts)
- Highcharts: how to loop through array to add series
- Highcharts Pie Chart Drilldown not showing on third drill
- How do you show grid lines for both x axis and y axis in highchart?
- How to set the highcharts interactive with select option
- Rails 4 + Filtration of Data on the basis of Day, Week, Month and Year in HighCharts
- Highcharts data series label. for each data point
- Php to JSON passed thru to high charts
- Hours: Mintues: Seconds in HighCharts Bargraph
- share colors between pie and column in highchart
- Can't show the array to charts
- DotNet.HighCharts - PieChart by populating data by code
- Custom bar chart text with Highcharts
- How to update the colour of minColor and maxColor when data is changed in high charts' solid gauge in ReactJS?
- Highstock Column Chart dragging issue
- HighCharts tooltip appearing behind the dialog holding the chart
- How to hyperlink bar graph in highcharts
- Google Analytics audience chart with Highcharts
- Show Highcharts series.name outside of chart margin
- Adding Series during componentWillReceiveProps does not work
- Download an image using axios post request
- Revert line style in highcharts v4 with null values to old style (v2.2)
- Adapting CSV file to HighStock
- How to show a loading state before show the complete page?
- datepicker - Highcharts Gauge Json
- offset long series labels with lines
- How to use the default colors when specifying patterns in a zone in Highcharts
- Lazy_high_chart: why options.xaxis undefined?
- How to color point in HighCharts
- Displaying dynamic data using charts and graphs in ruby on rails