score:1
Accepted answer
You can use mosueOver
point's event and create a custom crosshair by using Highcharts.SVGRenderer
class.
point: {
events: {
mouseOver: function() {
const chart = this.series.chart,
x = this.plotX + chart.plotLeft,
y1 = this.plotY + chart.plotTop,
y2 = chart.plotHeight + chart.plotTop
if (!chart.customcrosshair) {
chart.customcrosshair = chart.renderer.path().attr({
'stroke-width': 1,
'stroke-dasharray': '8,3',
stroke: 'red'
}).add();
}
chart.customcrosshair.attr({
d: ['M', x, y1, 'L', x, y2]
});
}
}
}
Live demo: http://jsfiddle.net/BlackLabel/osphtxjg/
API Reference: https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#path
Source: stackoverflow.com
Related Query
- How to end crosshair line where x meets y on line chart in high charts
- Drawing a small vertical line on top of chart using High charts by specifying end coordinates
- High chart - Column Range Chart with Time range. How to get tooltip as Start and End time
- How to remove sliced line from pie high chart if there there is only one object in data
- How to add trend line to high charts
- Responsive Line Chart using High Charts & Bootstrap 3
- How to set color of each slice in pie chart in high charts library?
- High Charts Multiple Line Chart not displaying tooltip for multiple lines
- Highcharts how to create dot hover at end of line chart
- High Charts Line Chart with missing data
- High charts Issue with stock bar chart multiple line series
- How to show BAr graph rather than line graph in High Stoch Chart
- how to pass the dates to the x-axis in the base line high charts instead of the values
- How to combine Bar chart and data as table in High Charts
- How to hide the Axis line in stack bar chart high chart
- How could we plot graphical representation using High Charts where one x-axis value have multiple y-axis value
- How can get the position of line series in high stock chart
- How to append dynamic values to the area chart in High charts or convert the data to arrays?
- How can I make a custom line type in high charts
- High charts remove dots from the line graph
- In high chart how to add event for label click
- How do I get remove of 'data table' option from High chart export
- knockoutJS dynamic chart with high charts
- High and low line on candlestick chart
- How do I reduce the space between title and chart of a High Chart?
- How to set the x value for High Charts error bar
- How to plot line in highcharts on charts click event?
- How to call typescript function inside High chart click event
- How to use add series and update methods in the high chart wrapper for angular?
- How to generate multiple high charts in ng-repeat
More Query from same tag
- Highcharts + add sub headers / group in legend
- How to update chart only on unique data in HighCharts
- How can I get every bar in different colour using Highchart?
- Highcharts - top justify instead of center entire chart
- Is it possible to have synchronized charts with error lines?
- custom ticks based on selected range from rangeSelector in Highstock
- Dates are overlapped in Highchart's areachart
- HighCharts show/hide data points
- Retain Parent DataLabel in Treemap Highcharts
- HighCharts - Horizontal line with the zoomed average of the values
- Highcharts - change values when checkbox checked
- Change background color of highcharts on hover
- High chart export not working in android webview
- Highcharts - export to base64
- Issue with Datepicker UI and Highcharts and the dateFormat
- Is it possible to get a statechange of the zoom or other zoom-related parameters in order to dynamically set tickInterval in Highcharts?
- Highchart: Datetime X-Axis labels are not showing correctly
- Add lower labels to highstock control
- HighChart irrgular Mapping
- highcharts pie window resize issue
- Highstock timezone trouble
- GWT:creat a simple meteogram in GWTHighCharts
- How to change the color of series(grouped column chart) only with json object(without js function) on Highchart?
- Display series.data.name after drilldown dynamically
- remove item from my export list highcharts
- testing React Highcharts config object with formatter callback
- Highcharts multiple yaxis plotband collision
- Style highcharts x and y axis
- Highcharts position dataLabels on hide/show event
- HighStocks with Reactjs - Make it occupy full size of div container