C3 ChartsADDON Dygraphs is a fast, flexible open source JavaScript charting library.

Features:

C3 makes it easy to generate D3-based charts by wrapping the code required to construct the entire chart. We don't need to write D3 code any more. The plugin adds classes to each element when generating, so you can define a custom style by the class and it's possible to extend the structure directly by D3. Provides a variety of APIs and callbacks to access the state of the chart.

Find more examples and guidelines on C3's official documentation and community support

Kitchen Sink Interactive Demo See how easy it is to manipulate and transform graphs using c3 engine!

012345678050100150200250300350400data1

Simple Line

Line chart with sequential data
012345680100120140160180200220240260280data1data2

Line Regions

Set regions for each data with style using the regions option
012345050100150200250300350400data1data2

Time Series

Simple line chart with timeseries data using xFormat and axis options
2010-01-01 00:00:002011-01-01 00:00:002012-01-01 00:00:002013-01-01 00:00:002014-01-01 00:00:002015-01-01 00:00:00050100150200250300350400450500data1data2

Spline Line

Display as Spline Chart
012345050100150200250300350400data1data2

Scatter Chart

Display as Scatter Plot
Sepal.Width22.22.42.62.833.23.43.63.844.24.4Petal.Width00.20.40.60.811.21.41.61.8setosaversicolor

Bar Chart

Display as Bar Chart
012345050100150200250300350400data1data2

Stacked Bar

Display as Stacked Bar Chart
012345-300-200-1000100200300400500600data1data2data3

Step Chart

An example of area and line Step Charts
012345050100150200250300350data1data2

Pie Chart

Display as Pie Chart
9.1%36.4%20.1%30.7%012345678910111213141516171819202122232425262728293031323334353637383940414243444546474849020406080100120virtigoclarfysetosaversicolorvirginica

Donut Chart

Donut chart example
SmartAdmin Browsers9.1%36.4%20.1%30.7%012345678910111213141516171819202122232425262728293031323334353637383940414243444546474849020406080100120IEFirefoxOperaSafariChrome

Combination Chart

An example of multiple charts in one canvas - "all in one"
012345050100150200250300350400data1data2data3data4data5data6

Interactive Mouse wheel

Zoom by mouse wheel event and slide by drag
01234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253050100150200250300350400sample

Interactive Example

Show sub chart for zoom and selection range
0123456789101102040608010012014016018020022024026001234567891011data1data2data3