Search code examples
javascriptchartsseriessplinelightningchart

How to display the specific points of the series in styled splines chart?


I am using LightningchartJS,if I hover on a series it shows the coordinates associate with that point on the series, but I want to show only specific points on the series when we hover.How can I achieve this?

const series = chart.addSplineSeries({ pointShape: PointShape.Circle }) 
.setName('Power consumption') 
.setStrokeStyle((strokeStyle) => strokeStyle 
                .setThickness(4) 
                .setFillStyle(new SolidFill({ color: ColorHEX('#FFA500') })) 
               ) 
.setPointSize(8) 
.setResultTableFormatter((tableBuilder, series, x, y) => tableBuilder 
                         .addRow(series.getName()) 
                         .addRow(series.axisX.formatValue(x)) 
                         .addRow(series.axisY.formatValue(y) + ' kW') 
                        ) 
```                    

Solution

  • By default we interpolate the cursor values along the Series, which shows the cursor following along the Series when hovering near it.

    You can set the cursor to only point to the data points you've given to the series, by setting the series' cursor interpolation to false.

    series.setCursorInterpolationEnabled(false)