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
- selectInput variable to influence chart output - group argument? Preferably using highcharter output [Shiny app]
- How to parse datetime for use in highchart graph?
- Remove line in the graph - highcharts
- Highcharts - Funnel, Line and Scatter
- Highcharts Pie Charts Show Outline When Empty
- Highstock scrollbar issue with single point
- highcharter custom animation
- Highchart merge won't enable labels in xAxis
- Highcharts Export PDF offline by clicking external button
- Highcharts Marimekko chart refresh
- How to scrape data from Highcharts charts using selenium and python?
- Highcharts Synchronized charts
- change distance of x-axis labels from axis in highchart
- Divide y-axis values by 10 onclick
- How to display no data found in highcharts
- How do I change RRDTool graphs?
- GWT Highcharts tooltip positioning
- Highstock Flags Series with stacked data
- In a multiple column layout my highchart is not visible in Safari
- How do I line up series points on a compare intervals graph?
- Highcharts shankey diagram percentage not showing
- How can I do a padding between my highest x-value and the plot's right gap in Highcharts?
- IE 6 Export Menu size issue
- Override default highlighting on hover in networkgraph
- Chrome Dev Editor Using Bower and Highcharts Shim
- How to make yAxis start from a specific time with bar series in highchart?
- Highchart: how to update a dynamic chart by clicking on a button?
- Highchart network graph with tooltip when hover on every node
- Highcharts Pie Chart from Ajax
- How to hide intermediate values of solid gauge chart of highcharts?