Show the line chart data for one or multiple lines based on click event

[jason.chen]

Hi,

Is it possible to show all data points(labels) on one or more lines based on the click of the line(s) from the line chart?

They need to be stay on the chart until the next click on the same line, and they will be hidden again.

Users should be able to pick multiple lines and enable them so they can compare them easily and make a screen shot.

It will be even better if the other lines can be dimmed a little bit when this is happening.

Thanks.

[Vishwas R]

@jason-chen,

Can you kindly create JSFiddle with your use-case and share it with us so that we can understand the scenario better and help you out?

—
Vishwas R
Team CanvasJS

[jason.chen]

Here is the JSFiddle I just created.

As you can see, we want to be able to show all data points by clicking on that line (or trigger an event from outside of the chart area).

And it will stay until the hide event triggered by either clicking on that line again or hide event triggered from the outside.

Right now, using the marker syntax, I can show numbers(indexLabels) from two lines.

Here is one major issue I am seeing so far.
1. The 2nd line doesn’t show the markers.

Questions/feature request
1. Click the line will trigger the on/off event from the line itself and/or from events outside, is it possible? (need to support multiple lines showing the data)
2. Can we use an icon rather than the default markers? Can we provide as many custom icons as we want to? (i.e. primeNg icons)

[Vishwas R]

@jason-chen,

The 2nd line doesn’t show the markers.

Setting markerSize to 0 hides the marker. Setting it to value higher than 0 should work fine in this case. Please take a look at this updated JSFiddle.

Click the line will trigger the on/off event from the line itself and/or from events outside, is it possible? (need to support multiple lines showing the data)

Clicking on line is not possible as of now. However you can hide / unhide dataseries by setting visible property as shown in this JSFiddle.

Can we use an icon rather than the default markers? Can we provide as many custom icons as we want to?

It’s not possible to add image/icons instead of marker. However you can position image on top of chart as shown in this JSFiddle.

[jason.chen]

Thanks, Vishwas,

This is very helpful. Is there an event that I can trigger based on clicking one of the lines?

Jason

[Vishwas R]

Jason,

Sorry, it’s not possible to bind click event to line as of now.

—
Vishwas R
Team CanvasJS