tooltip for stripline

[SCompliance]

Perhaps if you added an EventCallbackFunction option for the striplines it will be easier to do

[Vishwas R]

@scompliance,

You seem to have replaced App.jsx code with Chart.jsx code in the Stackblitz link that you have shared. Either you can use stripline in this case as shown in the previous reply or you can use range-area chart instead of stripline. The advantage of using range-area chart in this scenario includes letting library to show tooltip, mouse-events & showing series in legend. Please take a look at this JSFiddle for an example of the same.

—
Vishwas R
Team CanvasJS

[SCompliance]

@vishwas

Apologies it was a paste mistake, please look at the updated link https://stackblitz.com/edit/canvasjs-chart-tooltip-to-stripline-qdratg?file=src%2FApp.jsx

Regarding the range-area approach, one of the issues is that I can’t use value instead of startValue and endValue like the striplines

[Vishwas R]

@scompliance,

You seem to have missed out updating your code, code related to accepting stripline bounds from chart is missing in the Stackblitz you have shared. Updating it seems to be working fine. Please take a look at this updated Stackblitz for working example.

Also, in case of range-area chart adding range-area series with 2 datapoints with minor difference in the time component should work fine for single value as-well. Please take a look at this updated JSFiddle.

—
Vishwas R
Team CanvasJS

[SCompliance]

Hi @vishwas ,

I wanted to ask about the JSFiddle you shared: https://jsfiddle.net/otq63gp8/. Is it possible to replicate the behavior of the stripline’s thickness, so that it dynamically adjusts based on the user’s zoom level or depending on the distance between the minimum and maximum values?

Thank you!

[Vishwas R]

@scompliance,

You can change the thickness of the line by updating endValue within rangeChanged event as shown in code-snippet below.

rangeData[1].endValue = new Date(rangeData[1].startValue.getTime() + (e.chart.axisX[0].viewportMaximum - e.chart.axisX[0].viewportMinimum) / e.chart.axisX[0].bounds.width * 3);

Please take a look at this updated JSFiddle for a working example of the same.

—
Vishwas R
Team CanvasJS