score:1
Accepted answer
You can preprocess your data and calculate the middle points. A null point doesn't have a marker and it's not possible to show a tooltip for it.
const data = [...];
const processedData = data.map((dataEl, index) => {
if (!dataEl) {
return {
y: (data[index - 1] + data[index + 1]) / 2,
isCalculatedValue: true,
marker: {
fillColor: 'red',
radius: 1
}
}
}
return dataEl;
});
By using tooltip.formatter
function, you can show the previous point value in a tooltip.
tooltip: {
formatter: function(tooltip) {
let point = this.point;
if (point.isCalculatedValue) {
point = this.series.points[point.index - 1];
}
return "<span style='font-size: 10px'>" + point.category + "</span><br/>" +
"<span style='color:" + point.series.color +
"'>●</span> Line series: <b>" + point.y + "</b><br/>";
}
}
Live demo: https://jsfiddle.net/BlackLabel/nrmgaw6q/
API Reference: https://api.highcharts.com/highcharts/tooltip.formatter
Source: stackoverflow.com
Related Query
- HighChart - show tooltips for null on hover
- highcharts dataLabels support RTL with enable hover it for show tooltip
- Column Chart Show datalabel for null values - Highcharts
- Show tooltips of piechart when hover outside of the chart on a button
- Highchart always show max value for y Axis
- Is it possible to show the chart if the value of array bracket is null or empty in the HighChart
- Ending Series points don't show up on highchart area type chart for large series data
- How we can show Highchart column-placement chart for negative values?
- How to show annotation for every point on highchart then disappear them
- Need help in simplifying the code to synchronise tooltips and crosshairs for Highcharts,
- Highchart show grid lines on y-axis for every point
- Highchart show results without comma for individual line
- Printing a highchart to show data for all the points
- Backgroud Bell Curve and show tooltips in Highchart charts
- Highcharts - How to show two tooltips for single point at different positions of chart?
- Highchart Persist bar widh for null data
- Having trouble to show highchart for each element
- Highchart - show / hide an y-Axis without hiding the series
- Can I use two different formatters for highchart tooltips?
- Background color for multiple Highchart panes, in Vue app
- Disable marker hover in only one marker of highchart
- Highchart (Column Chart) : Few data labels are not appearing for a series
- Highcharts Custom tooltips for multiple series
- How to apply borderRadius only for top side of Column or Bar in Highchart
- How to break highchart bars for extreme values
- programatically fire a click event for a point on highchart scatter plot
- Having trouble just getting the Highchart to show
- Highchart show string on x-axis
- Border Styles for the Highchart tooltip
- Hover style for labels in legend
More Query from same tag
- Plot Histograms in Highcharts
- JSON Highcharts to draw multiple lines
- Toggle between two values
- Highcharts - plotLines won't render
- Highcharts data series label. for each data point
- Using highchart SVG images with Selenium
- How to push data into highchart with just one decimal place?
- Highcharts Gantt Setting Dependency Type
- Highcharts Legend: Overlapping Chart on Small Screens
- Dotnet Highchart Using JSON
- Highcharts combination chart: how to put lines above columns (shift/offset)
- Highcharts update function not working properly
- not able to show x axis data with datetimelabel format with {hh:mm} in high charts
- Highstock/Highchart cannot set Individual Point color
- Loading Highcharts in an iframe
- Highcharts hide series without change legend color
- I need to remove Y-axis labels on highcharts while keeping the data intact
- HIghCharts bar chart renders columns on top of each other
- Plot Highchart multiple series line chart using JSON data
- Highcharts - how to correctly align x-axis ticks when plotOptions.column.crisp set to false
- create a chart with date values in highchart
- Possible to Draw a Loop With HighCharts
- Draw charts with a Loop using HighCharts in symfony
- Highcharts: How to make startRow and endRow work again when data is stored in Google Spreadsheet?
- Highcharts: dynamic update stacked area with extra custom data
- Highcharts error #13 and AngularJs
- How to get the path element of hovered scatter point
- Highcharts update grouped data point color
- Refresh data vb
- I want delete the values from the series so that the graph is not cluttered how to do that