JavaScript line chart library

Question

I would like some advice to find a good library for drawing line charts. The tool I'm working on was using Chartjs, but I have to add some features, and I'm not sure they are all possible with Chartjs.

Here is a list of what I should be able to do:

• Add/remove datasets
• Only 1 X-axis and 1 Y-axis covering all values
• Get points for the data, and get the exact value when mouseover
• Have datasets which have not the exact same labels (i.e. data 1 have value for [19,20,21,22,23], data 2 have value for [24,25,26,27,28], data 3 have value for [22,23,24]) Lines must stop if there is no value. There won't be any blank on label (no 22,25).

Please ask me if I'm not clear enough.

Answer 1

I think jqPlot, with the right combination of plugins, will do what you want: http://www.jqplot.com/index.php

Their Cumulative Density Function example demonstrates:

1. Adding/removing data sets
2. Only one x & y axis
3. Exact value on mouseover
4. Line stops where there is no value

Their line charts examples show charts where there are points on the line. (I can't post a third URL but their examples list is easy to find.)

Answer 2

Another option would be ZingChart. If you go to the Data Manipulation section of the Event Playground, check the box for plot_add and hit the green play button. There's also a plot_remove.

The majority of chart types are one x and y axis by default, though you can remove and add axes as necessary. Tooltips provide exact value by default as well.

As for null values, here's a demo of that in action. Right click and select "View Source" to see the JSON.

I'm on the ZingChart team, so feel free to reach out if you'd like to discuss features or implementation!

Answer 3

These features are supported in LightningChart JS.

See this code example.