JavaScript Graphics
Graphic Libraries
JavaScript libraries to use for both Artificial Intelligence graphs and other charts:
- Plotly.js
- Chart.js
- Google Chart
Plotly.js
Plotly.js is a charting library that comes with over 40 chart types, 3D charts, statistical graphs, and SVG maps.
Learn More ...
Chart.js
Chart.js comes with many built-in chart types:
- Scatter
- Line
- Bar
- Radar
- Pie and Doughnut
- Polar Area
- Bubble
Learn More ...
Google Chart
From simple line charts to complex tree maps, Google Chart provides a number of built-in chart types:
- Scatter Chart
- Line Chart
- Bar / Column Chart
- Area Chart
- Pie Chart
- Donut Chart
- Org Chart
- Map / Geo Chart
Learn
More ...
Chart.js
Simple yet flexible JavaScript charting for designers & developers
New in 3.5 Scale stacking
Layout boxes can be stacked and weighted in groups.
New in 3.4 Subtitle plugin
A secondary title plugin with all the same options as main title
New in 3.1 Line segment styling
Line segments can be styled by any user defined criteria.
New in 3.0 Advanced animations
Transitions of every property in every element can be configured individually and independently.
New in 3.0 Performance!
Numerous performance enhancements have been introduced. This example has 1M (2x500k) points with the new decimation plugin enabled.
New in 2.0 Mixed chart types
Mix and match bar and line charts to provide a clear visual distinction between datasets.
New in 2.0 New chart axis types
Plot complex, sparse datasets on date time, logarithmic or even entirely custom scales with ease.
New in 2.0 Animate everything!
Out of the box stunning transitions when changing data, updating colours and adding datasets.
Open source
Chart.js is a community maintained project, contributions welcome!
8 Chart types
Visualize your data in 8 different ways; each of them animated and customisable.
HTML5 Canvas
Great rendering performance across all modern browsers (IE11+).
Responsive
Redraws charts on window resize for perfect scale granularity.
Find Chart.js on GitHub or Read detailed documentation
A line chart is a type of chart which displays information as a series of dataPoints connected by straight line segments. Each dataPoint has x variable determining the position on the horizontal axis and y variable determining the position of the vertical axis.
Markers are automatically disabled when there are large number of dataPoints. You can override this behaviour by manually setting markerSize to a value greater than zero.
Cannot be combined with: Doughnut, Pie, Bar, Stacked Bar charts.
Line Chart Specific Properties
dataSeries/ dataPoint | markerType | String | “circle” | “none”, “circle”, “square”, “cross”, “triangle” |
dataSeries/ dataPoint | markerColor | String | dataSeries Color | “red”,”#1E90FF”.. |
dataSeries/ dataPoint | markerBorderColor | String | dataSeries Color | “red”,”#1E90FF”.. |
dataSeries/ dataPoint | markerSize | Number | auto. | 5,10.. |
dataSeries/ dataPoint | markerBorderThickness | Number | 1 | 4,7.. |
dataSeries | lineThickness | Number | 2 | 4,7.. |
Basic Line Chart
Try it Yourself by Editing the Code below.
Line Chart With Additional Customization
Try it Yourself by Editing the Code below.