score:4
solution for highcharts v7.2+
force some options to prevent chart from reserving space for axes, then use plugin:
(function(h) {
h.addevent(
h.axis,
'init',
function(e) {
if (h.defined(e.useroptions.matchaxis)) {
h.merge(
true,
e.useroptions, {
labels: {
reservespace: false
},
title: {
reservespace: false
},
offset: -1,
opposite: this.isxaxis ? true : false
}
);
}
}
);
h.addevent(
h.chart,
'render',
function() {
let chart = this;
chart.axes.foreach(function(axis) {
let newoffset,
matchaxis = axis.options.matchaxis,
translate = axis.horiz ? 'translatey' : 'translatex',
newtranslation = {},
offset = axis.options.offset || 0,
crisp = axis.options.linewidth % 2,
otheraxes = axis.isxaxis ? chart.yaxis : chart.xaxis;
if (h.defined(matchaxis)) {
newoffset = otheraxes[matchaxis.index || 0].topixels(matchaxis.value || 0, true);
newtranslation[translate] = newoffset + offset + crisp;
if (axis.axisgroup) {
axis.axisgroup.animate(newtranslation);
}
if (axis.labelgroup) {
axis.labelgroup.animate(newtranslation);
}
}
});
}
);
})(highcharts);
demo: https://jsfiddle.net/blacklabel/2k0bw6q3/
plugin's api:
x/yaxis.matchaxis.value
- set value that should be picked from the opposite axis. defaults to 0.x/yaxis.matchaxis.index
- when using multiple axes, set index which opposite axis should be used for calculations. defaults to 0.
setting e.g. yaxis.matchaxis = {}
is completely fine: https://jsfiddle.net/blacklabel/qwyczoxb/ (because of defaults)
list of options that are forced (in plugin):
x/yaxis.labels.reservespace
to falsex/yaxis.title.reservespace
to falsex/yaxis.offset
to a negative value (e.g. -50)xaxis.opposite
is set to trueyaxis.opposite
is set to false
note: tested only with v7.2.0
old solution (v3+)
right now the only solution is to use offset parameter. however since highcharts 3.0 you can control freely that property and update axis:
chart.yaxis[index].update( options );
where options is an object with options for yaxis, including offset. to get pixel position, you can use inner function chart.xaxis[index].translate(value)
(little hacky, but works). so when both are combined, see example: http://jsfiddle.net/ugppv/6/
Source: stackoverflow.com
Related Query
- Highcharts: X and Y Axis cross at zero in scatter chart
- Highcharts - best way to handle and display zero (or negative) values in a line chart series with logarithmic Y axis
- Scatter chart using HTML and Java Script (makeing y axis starting from zero (upside down) )
- How to add space between chart and axis in highcharts
- Highcharts blank chart with x and y axis
- Highcharts connecting scatter chart and pie chart with single legend
- Highcharts - Bar - Setting the X axis width and the chart area width to be constant
- Tooltip in chart with line- and scatter plot in highcharts 3.0.7
- Is it possible to have two Y Axis in a highstock chart from highcharts one on the left and another on the right?
- highcharts how to make x and y axis starting on the same zero using categories on yAxis
- HighCharts Line Chart draw y axis line for entire line points and only one line
- Google Charts, HighCharts or ChartJS Dual Axis Gantt Chart and Line Chart Visualization
- Highcharts column chart extends off container and doesn't properly show X axis
- Highcharts chart axis exceeding set min and max values
- min and max axis value not respected in HighCharts chart with a logarithmic axis
- Highcharts x-range chart datetime type for x and y axis
- How to create a column range chart in Highcharts using range and navigator functions?
- Hide axis and gridlines Highcharts
- Highcharts - labels inside and outside a pie chart
- Highcharts scatter chart with a name per point
- Highcharts / jQuery - destroy and rebuild chart with original options
- How do you increase the performance of highcharts chart creation and rendering
- Highcharts Pie Chart ignores percentageDecimals tooltip setting and has floating point inaccuracy issue
- Using html2canvas to render a highcharts chart to pdf doesn't work on IE and Firefox
- Using Highcharts and displaying a message over or on the chart when there is no data
- Highcharts - How can I remove starting and ending padding from area chart
- Highcharts - Scatter chart with a line connecting the dots in the series
- Ajax and Highcharts - Display 'loading' until data is retrieved, then populate chart
- Highcharts shared tooltip for line series and scatter plot not working
- Highcharts - Display only year in x axis and stop auto formatting
More Query from same tag
- Add lower labels to highstock control
- Highstocks: Move Renderer elements along with navigator/ Draw Trendlines
- HighCharts series Z index
- disappearing highstock series
- How to show full date to my labels and each x axis in different colour in highcharts?
- Highcharts backgroundColor for multiple charts is only applied to one chart
- Highcharts. Pie chart. DataLabels formatter
- Switch from pie to column and show labels
- ZoomRange Highstock works not correct?
- How to relate the y-axis of different types of graphs?
- Highchart grouped column with drill down
- Asyncronously Load Panels using jQuery in ASP.NET application
- Highcharts two datetime xAxis chart with same ticks interval
- Change Highcharts Series color
- Make only one point draggable on highcharts
- How to make xAxis on bar chart match pointWidth
- HighChart dynamic drill down
- highmaps stopped updating after move to .NET Core
- Highcharts pie/variablepie align multilines label on plotedge
- Multiple Highcharts on a PDF page - SVG Page Layout
- Bar-chart gradient background not showing - Highcharts
- Highcharts Timeline inconsistent point width in multiple series
- Highstock - multiple plotlines value from json
- Array loop to determine a range average
- How to add space between series in stacked columns in HighChart?
- Highcharts/stock xAxis display only year
- HighCharts - Pie chart drilldown for multilevel (3 to 4 level)
- Cannot modify highcharts initilized as a global variable
- Highcharts Uncaught TypeError: Cannot set property 'day' of undefined
- How to change tooltip valueSuffix after chart is rendered?