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 Articles
- 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
- Responsive Line Chart using High Charts & Bootstrap 3
- High Charts Multiple Line Chart not displaying tooltip for multiple lines
- High Charts Line Chart with missing data
- High charts Issue with stock bar chart multiple line series
- High charts remove dots from the line graph
- knockoutJS dynamic chart with high charts
- High and low line on candlestick chart
- Laravel 5.5 Console TV Bar Chart High Charts multipleDatasets and label
- High charts queue chart updates after ajax with multiple charts in firefox
- High charts - Increasing the space between chart and title
- Jump Line charts in High Charts
- 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
- High Charts - Split color of bar chart
- Remove the border around the pie chart in high charts
- High Charts Column Chart - Y axis Label Formatting
- Adding multiple series to the spline chart using dotnet high charts in asp.net mvc3
- Highcharts: rapid, real-time data updates in high volume line charts using boost
- x axis label word wrap in high charts for radar chart
- high charts - lost animation when pie chart sliced is programmatically set
- Show tooltip in column chart when hovering crosshair line
- high charts pie chart should be displayed in ascending order
- Bar chart in High chart for indication of value with two colors in each bar where one color is always kept fixed
- Arched square chart using high charts
- High Charts - area chart with gradient & threshold
- High Charts donut chart percentages adding to 100.1%
- How to set color of each slice in pie chart in high charts library?
- High Charts - Organizational Chart
- Golang Highcharts dynamic data
- How to have different cursor style for legends in Highcharts?
- JSon with HighCharts and ASP.NET
- Highcharts show blank colum with text
- Highcharts Percentile Distribution Graph issue
- Highchart UTC date always set to January, 1 1970
- Highcharts Columns with empty columns
- Highcharts/highstock set yAxis Min and Max with Scroll
- How to append highcharts on same div?
- Highcharts - Using 'errorbar' type overrides axis interval
- Generate pdf that contains hicharts (without rendering an html page)
- Highcharts, error with xAxis type logarithmic
- Highcharts shared tooltip(for line series) - Change on hover ACCORDING TO PLOTBAND
- Enable scrollbar using highcharts.js
- how to parse json into highcharts
- highcharts reversed yAxis but keep fill area below spline?
- Highcharts How to Show Loading Animation At Set Data
- Jquery - Counting JSON objects
- Highcharts - Specific color zones for HighCharts navigator
- Highcharts: Cannot read property 'chart' of undefined