- Chart.js
- Simple yet flexible JavaScript charting library for the modern web
- New in 4.0 Colors plugin
- New in 4.0 Tree-shaking
- New in 3.5 Scale stacking
- New in 3.4 Subtitle plugin
- New in 3.1 Line segment styling
- New in 3.0 Advanced animations
- New in 3.0 Performance!
- New in 2.0 Mixed chart types
- New in 2.0 New chart axis types
- New in 2.0 Animate everything!
- Open source
- 8 Chart types
- HTML5 Canvas
- Responsive
- Find Chart.js on GitHub or Read detailed documentation
- Plotly JavaScript Open Source Graphing Library
- JavaScript Chart Library with 30+ Chart Types
- Line Charts in JavaScript
- Area Charts in JavaScript
- Column & Bar Charts in JavaScript
- Pie & Funnel Charts in JavaScript
- Financial Charts in JavaScript
- Scatter & Bubble Charts in JavaScript
- Box & Whisker Charts in JavaScript
- Combination of Charts
- Dynamic Charts in JavaScript
- React, Angular, Vue.js, jQuery
- Server Side Technologies
- Chart.js
- How to Use Chart.js?
- Typical Bar Chart Syntax:
- Typical Line Chart Syntax:
- Bar Charts
- Source Code
- Horizontal Bars
- Pie Charts
- Example
- Doughnut Charts
- Scatter Plots
- Source Code
- Line Graphs
- Source Code
- Multiple Lines
- Source Code
- Linear Graphs
- Source Code
- Function Graphs
Chart.js
Simple yet flexible JavaScript charting library for the modern web
New in 4.0 Colors plugin
Default palette of Chart.js brand colors is available as a built-in time-saving zero-configuration plugin.
New in 4.0 Tree-shaking
JavaScript bundle size can be reduced by dozens of kilobytes by registering only necessary components.
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
Chart.js was built from the hard work of all these contributors.
Plotly JavaScript Open Source Graphing Library
Built on top of d3.js and stack.gl, Plotly.js is a high-level, declarative charting library. plotly.js ships with over 40 chart types, including 3D charts, statistical graphs, and SVG maps.
plotly.js is free and open source and you can view the source, report issues or contribute on GitHub.
Deploy Plotly_js AI Dash apps on private Kubernetes clusters: Pricing | Demo | Overview | AI App Services
plotly.js abstracts the types of statistical and scientific charts that you would find in packages like matplotlib, ggplot2, or MATLAB.
d3.json('https://plotly.com/~DanielCarrera/13.json', function(figure)< var trace = < x: figure.data[0].x, y: figure.data[0].y, z: figure.data[0].z, type: 'contour', autocolorscale: false, colorscale: [[0,"rgb( 0, 0, 0)"],[0.3,"rgb(230, 0, 0)"],[0.6,"rgb(255,210, 0)"],[1,"rgb(255,255,255)"]], reversescale: true, zmax: 2.5, zmin: -2.5 >; var layout = < title: 'turbulence simulation', xaxis: , yaxis: , margin: , annotations: [< showarrow: false, text: 'Credit: Daniel Carrera', x: 0, y: 0, xref: 'paper', yref: 'paper' >] > Plotly.newPlot(document.getElementById('contour-plot'), [trace], layout, ); >);
plotly.js charts are described declaratively as JSON objects. Every aspect of the charts, such as colors, grid lines, and the legend, has a corresponding set of JSON attributes.
d3.csv('https://raw.githubusercontent.com/plotly/datasets/master/wind_speed_laurel_nebraska.csv', function(rows)< var trace = < type: 'scatter', // set the chart type mode: 'lines', // connect points with lines x: rows.map(function(row)< // set the x-data return row['Time']; >), y: rows.map(function(row)< // set the x-data return row['10 Min Sampled Avg']; >), line: < // set the width of the line. width: 1 >, error_y: < array: rows.map(function(row)< // set the height of the error bars return row['10 Min Std Dev']; >), thickness: 0.5, // set the thickness of the error bars width: 0 > >; var layout = < yaxis: , // set the y axis title xaxis: < showgrid: false, // remove the x-axis grid lines tickformat: "%B, %Y" // customize the date format to "month, day" >, margin: < // update the left, bottom, right, top margin l: 40, b: 10, r: 10, t: 20 >>; Plotly.newPlot(document.getElementById('wind-speed'), [trace], layout, ); >);
Most plotly graphs are drawn with SVG. This offers great compatibility across browsers and publication-quality vector image export. Unfortunately, there are inherent performance limitations with the number of SVG elements that you can draw in the DOM.
plotly.js uses stack.gl for high performance 2D and 3D charting.
This chart was drawn with the plotly.js chart type scattergl . scattergl charts render an order of magnitude faster than their SVG counterparts.
All 3D charts in plotly.js are rendered with WebGL, leveraging the power of the GPU for fast interactivity. view the interactive version
By abstracting charts to a declarative JSON structure, plotly.js is used as a browser-based charting library for Python, R, MATLAB.
View Tutorial
View Tutorial
View Tutorial
View Tutorial
View Tutorial
View Tutorial
View Tutorial
View Tutorial
View Tutorial
View Tutorial
View Tutorial
View Tutorial
View Tutorial
View Tutorial
View Tutorial
View Tutorial
View Tutorial
View Tutorial
View Tutorial
View Tutorial
View Tutorial
View Tutorial
View Tutorial
View Tutorial
View Tutorial
View Tutorial
View Tutorial
View Tutorial
View Tutorial
View Tutorial
View Tutorial
View Tutorial
View Tutorial
View Tutorial
View Tutorial
View Tutorial
View Tutorial
View Tutorial
View Tutorial
View Tutorial
View Tutorial
View Tutorial
View Tutorial
View Tutorial
View Tutorial
View Tutorial
View Tutorial
View Tutorial
View Tutorial
View Tutorial
View Tutorial
JavaScript Chart Library with 30+ Chart Types
JavaScript Charts & Graphs Library with 10x performance & 30+ Chart Types. The core JavaScript Charting library is Standalone but also comes with components for popular Frameworks like React, Angular, Vue, etc. Charts are responsive & support 30+ chart types including line, column, bar, area, pie, doughnut, stacked, etc. Our JavaScript Graphs support various interactive features like tooltips, zooming, panning, animation, events, drilldown, exporting & can easily be integrated with various server side technologies like PHP, Ruby, Python, ASP.Net, Node.JS, Java, etc. To top it all off, charts can easily render thousands of data-points without any performance lag.
A Good JavaScript Charting Library should be simple to use & have high performance. If this matches your requirement, look no further! Checkout below JavaScript Chart examples with source code that you can download & run locally on your machine.
Line Charts in JavaScript
Contains Line, Spline & Step Line Chart examples in JavaScript.
Area Charts in JavaScript
Contains Area, Spline Area, Stacked Area, Stacked Area 100, Step Area, Range Area & Range Spline Area Chart examples in JavaScript.
Column & Bar Charts in JavaScript
Contains Column, Bar, Stacked Column, Stacked Column 100%, Range Column, Stacked Bar, Stacked Bar 100%, Range Bar & Waterfall Chart examples in JavaScript.
Pie & Funnel Charts in JavaScript
Contains Pie, Doughnut / Donut, Funnel & Pyramid Chart examples in JavaScript.
Financial Charts in JavaScript
Contains Candlestick & OHLC Chart examples in JavaScript.
Scatter & Bubble Charts in JavaScript
Contains Scatter & Bubble Chart examples in JavaScript.
Box & Whisker Charts in JavaScript
Contains Box & Whisker Chart examples in JavaScript.
Combination of Charts
Contains Error, Error Bar, Error Line, Pareto Charts along with combination of many other Charts like Bar, Line, Area, OHLC, etc.
Dynamic Charts in JavaScript
Contains Dynamic/Real-Time Chart examples in JavaScript.
React, Angular, Vue.js, jQuery
Add Responsive & Interactive Chart to your front-end frameworks like React, Angular, Vue.js, etc.
Server Side Technologies
Integrates easily with PHP, Python and many other Libraries and Frameworks.
Chart.js
Chart.js is an free JavaScript library for making HTML-based charts. It is one of the simplest visualization libraries for JavaScript, and comes with the many built-in chart types:
- Scatter Plot
- Line Chart
- Bar Chart
- Pie Chart
- Donut Chart
- Bubble Chart
- Area Chart
- Radar Chart
- Mixed Chart
How to Use Chart.js?
1. Add a link to the providing CDN (Content Delivery Network):
2. Add a to where in the HTML you want to draw the chart:
The canvas element must have a unique id.
Typical Bar Chart Syntax:
Typical Line Chart Syntax:
Bar Charts
Source Code
const xValues = [«Italy», «France», «Spain», «USA», «Argentina»];
const yValues = [55, 49, 44, 24, 15];
const barColors = [«red», «green»,»blue»,»orange»,»brown»];
new Chart(«myChart», type: «bar»,
data: labels: xValues,
datasets: [ backgroundColor: barColors,
data: yValues
>]
>,
options: <. >
>);
Horizontal Bars
Just change type from «bar» to «horizontalBar»:
Pie Charts
Example
new Chart(«myChart», <
type: «pie»,
data: <
labels: xValues,
datasets: [ <
backgroundColor: barColors,
data: yValues
>]
>,
options: <
title: <
display: true,
text: «World Wide Wine Production»
>
>
>);
Doughnut Charts
Just change type from «pie» to «doughnut»:
Scatter Plots
Source Code
new Chart(«myChart», type: «scatter»,
data: datasets: [ pointRadius: 4,
pointBackgroundColor: «rgba(0,0,255,1)»,
data: xyValues
>]
>,
options:<. >
>);
Line Graphs
Source Code
const xValues = [50,60,70,80,90,100,110,120,130,140,150];
const yValues = [7,8,8,9,9,9,10,11,14,14,15];
new Chart(«myChart», type: «line»,
data: labels: xValues,
datasets: [ backgroundColor:»rgba(0,0,255,1.0)»,
borderColor: «rgba(0,0,255,0.1)»,
data: yValues
>]
>,
options:<. >
>);
If you set the borderColor to zero, you can scatter plot the line graph:
Multiple Lines
Source Code
const xValues = [100,200,300,400,500,600,700,800,900,1000];
new Chart(«myChart», type: «line»,
data: labels: xValues,
datasets: [ data: [860,1140,1060,1060,1070,1110,1330,2210,7830,2478],
borderColor: «red»,
fill: false
>, data: [1600,1700,1700,1900,2000,2700,4000,5000,6000,7000],
borderColor: «green»,
fill: false
>, data: [300,700,2000,5000,6000,4000,2000,1000,200,100],
borderColor: «blue»,
fill: false
>]
>,
options: legend:
>
>);
Linear Graphs
Source Code
const xValues = [];
const yValues = [];
generateData(«x * 2 + 7», 0, 10, 0.5);
new Chart(«myChart», type: «line»,
data: labels: xValues,
datasets: [ fill: false,
pointRadius: 1,
borderColor: «rgba(255,0,0,0.5)»,
data: yValues
>]
>,
options: <. >
>);
function generateData(value, i1, i2, step = 1) for (let x = i1; x
Function Graphs
Same as Linear Graph. Just change the generateData parameter(s):