- Line Charts in JavaScript
- Basic Line Plot
- Line and Scatter Plot
- Adding Names to Line and Scatter Plot
- Line and Scatter Styling
- Styling Line Plot
- Colored and Styled Scatter Plot
- Line Shape Options for Interpolation
- Graph and Axes Titles
- Line Dash
- Connect Gaps Between Data
- Labelling Lines with Annotations
- 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
Line Charts in JavaScript
Plotly is a free and open-source graphing library for JavaScript. We recommend you read our Getting Started guide for the latest installation or upgrade instructions, then move on to our Plotly Fundamentals tutorials or dive straight in to some Basic Charts tutorials.
Basic Line Plot
var trace1 = < x: [1, 2, 3, 4], y: [10, 15, 13, 17], type: 'scatter' >; var trace2 = < x: [1, 2, 3, 4], y: [16, 5, 11, 9], type: 'scatter' >; var data = [trace1, trace2]; Plotly.newPlot('myDiv', data);
Line and Scatter Plot
var trace1 = < x: [1, 2, 3, 4], y: [10, 15, 13, 17], mode: 'markers' >; var trace2 = < x: [2, 3, 4, 5], y: [16, 5, 11, 9], mode: 'lines' >; var trace3 = < x: [1, 2, 3, 4], y: [12, 9, 15, 12], mode: 'lines+markers' >; var data = [ trace1, trace2, trace3 ]; var layout = < title:'Line and Scatter Plot' >; Plotly.newPlot('myDiv', data, layout);
Adding Names to Line and Scatter Plot
var trace1 = < x: [1, 2, 3, 4], y: [10, 15, 13, 17], mode: 'markers', name: 'Scatter' >; var trace2 = < x: [2, 3, 4, 5], y: [16, 5, 11, 9], mode: 'lines', name: 'Lines' >; var trace3 = < x: [1, 2, 3, 4], y: [12, 9, 15, 12], mode: 'lines+markers', name: 'Scatter + Lines' >; var data = [ trace1, trace2, trace3 ]; var layout = < title:'Adding Names to Line and Scatter Plot' >; Plotly.newPlot('myDiv', data, layout);
Line and Scatter Styling
var trace1 = < x: [1, 2, 3, 4], y: [10, 15, 13, 17], mode: 'markers', marker: < color: 'rgb(219, 64, 82)', size: 12 >>; var trace2 = < x: [2, 3, 4, 5], y: [16, 5, 11, 9], mode: 'lines', line: < color: 'rgb(55, 128, 191)', width: 3 >>; var trace3 = < x: [1, 2, 3, 4], y: [12, 9, 15, 12], mode: 'lines+markers', marker: < color: 'rgb(128, 0, 128)', size: 8 >, line: < color: 'rgb(128, 0, 128)', width: 1 >>; var data = [trace1, trace2, trace3]; var layout = < title: 'Line and Scatter Styling' >; Plotly.newPlot('myDiv', data, layout);
Styling Line Plot
trace1 = < type: 'scatter', x: [1, 2, 3, 4], y: [10, 15, 13, 17], mode: 'lines', name: 'Red', line: < color: 'rgb(219, 64, 82)', width: 3 >>; trace2 = < type: 'scatter', x: [1, 2, 3, 4], y: [12, 9, 15, 12], mode: 'lines', name: 'Blue', line: < color: 'rgb(55, 128, 191)', width: 1 >>; var layout = < width: 500, height: 500 >; var data = [trace1, trace2]; Plotly.newPlot('myDiv', data, layout);
Colored and Styled Scatter Plot
var trace1 = < x: [52698, 43117], y: [53, 31], mode: 'markers', name: 'North America', text: ['United States', 'Canada'], marker: < color: 'rgb(164, 194, 244)', size: 12, line: < color: 'white', width: 0.5 >>, type: 'scatter' >; var trace2 = < x: [39317, 37236, 35650, 30066, 29570, 27159, 23557, 21046, 18007], y: [33, 20, 13, 19, 27, 19, 49, 44, 38], mode: 'markers', name: 'Europe', text: ['Germany', 'Britain', 'France', 'Spain', 'Italy', 'Czech Rep.', 'Greece', 'Poland'], marker: < color: 'rgb(255, 217, 102)', size: 12 >, type: 'scatter' >; var trace3 = < x: [42952, 37037, 33106, 17478, 9813, 5253, 4692, 3899], y: [23, 42, 54, 89, 14, 99, 93, 70], mode: 'markers', name: 'Asia/Pacific', text: ['Australia', 'Japan', 'South Korea', 'Malaysia', 'China', 'Indonesia', 'Philippines', 'India'], marker: < color: 'rgb(234, 153, 153)', size: 12 >, type: 'scatter' >; var trace4 = < x: [19097, 18601, 15595, 13546, 12026, 7434, 5419], y: [43, 47, 56, 80, 86, 93, 80], mode: 'markers', name: 'Latin America', text: ['Chile', 'Argentina', 'Mexico', 'Venezuela', 'Venezuela', 'El Salvador', 'Bolivia'], marker: < color: 'rgb(142, 124, 195)', size: 12 >, type: 'scatter' >; var data = [trace1, trace2, trace3, trace4]; var layout = < title: 'Quarter 1 Growth', xaxis: < title: 'GDP per Capita', showgrid: false, zeroline: false >, yaxis: < title: 'Percent', showline: false >>; Plotly.newPlot('myDiv', data, layout);
Line Shape Options for Interpolation
var trace1 = < x: [1, 2, 3, 4, 5], y: [1, 3, 2, 3, 1], mode: 'lines+markers', name: 'linear', line: , type: 'scatter' >; var trace2 = < x: [1, 2, 3, 4, 5], y: [6, 8, 7, 8, 6], mode: 'lines+markers', name: 'spline', text: ['tweak line smoothness
with "smoothing" in line object', 'tweak line smoothness
with "smoothing" in line object', 'tweak line smoothness
with "smoothing" in line object', 'tweak line smoothness
with "smoothing" in line object', 'tweak line smoothness
with "smoothing" in line object', 'tweak line smoothness
with "smoothing" in line object'], line: , type: 'scatter' >; var trace3 = < x: [1, 2, 3, 4, 5], y: [11, 13, 12, 13, 11], mode: 'lines+markers', name: 'vhv', line: , type: 'scatter' >; var trace4 = < x: [1, 2, 3, 4, 5], y: [16, 18, 17, 18, 16], mode: 'lines+markers', name: 'hvh', line: , type: 'scatter' >; var trace5 = < x: [1, 2, 3, 4, 5], y: [21, 23, 22, 23, 21], mode: 'lines+markers', name: 'vh', line: , type: 'scatter' >; var trace6 = < x: [1, 2, 3, 4, 5], y: [26, 28, 27, 28, 26], mode: 'lines+markers', name: 'hv', line: , type: 'scatter' >; var data = [trace1, trace2, trace3, trace4, trace5, trace6]; var layout = < legend: < y: 0.5, traceorder: 'reversed', font: , yref: 'paper' >>; Plotly.newPlot('myDiv', data, layout);
Graph and Axes Titles
var trace1 = < x: [1, 2, 3, 4], y: [10, 15, 13, 17], mode: 'markers', name: 'Scatter' >; var trace2 = < x: [2, 3, 4, 5], y: [16, 5, 11, 9], mode: 'lines', name: 'Lines' >; var trace3 = < x: [1, 2, 3, 4], y: [12, 9, 15, 12], mode: 'lines+markers', name: 'Scatter and Lines' >; var data = [trace1, trace2, trace3]; var layout = < title: 'Title of the Graph', xaxis: < title: 'x-axis title' >, yaxis: < title: 'y-axis title' >>; Plotly.newPlot('myDiv', data, layout);
Line Dash
var trace1 = < x: [1, 2, 3, 4, 5], y: [1, 3, 2, 3, 1], mode: 'lines', name: 'Solid', line: < dash: 'solid', width: 4 >>; var trace2 = < x: [1, 2, 3, 4, 5], y: [6, 8, 7, 8, 6], mode: 'lines', name: 'dashdot', line: < dash: 'dashdot', width: 4 >>; var trace3 = < x: [1, 2, 3, 4, 5], y: [11, 13, 12, 13, 11], mode: 'lines', name: 'Solid', line: < dash: 'solid', width: 4 >>; var trace4 = < x: [1, 2, 3, 4, 5], y: [16, 18, 17, 18, 16], mode: 'lines', name: 'dot', line: < dash: 'dot', width: 4 >>; var data = [trace1, trace2, trace3, trace4]; var layout = < title: 'Line Dash', xaxis: < range: [0.75, 5.25], autorange: false >, yaxis: < range: [0, 18.5], autorange: false >, legend: < y: 0.5, traceorder: 'reversed', font: < size: 16 >> >; Plotly.newPlot('myDiv', data, layout);
Connect Gaps Between Data
var trace1 = < x: [1, 2, 3, 4, 5, 6, 7, 8], y: [10, 15, null, 17, 14, 12, 10, null, 15], mode: 'lines+markers', connectgaps: true >; var trace2 = < x: [1, 2, 3, 4, 5, 6, 7, 8], y: [16, null, 13, 10, 8, null, 11, 12], mode: 'lines', connectgaps: true >; var data = [trace1, trace2]; var layout = < title: 'Connect the Gaps Between Data', showlegend: false >; Plotly.newPlot('myDiv', data, layout);
Labelling Lines with Annotations
var xData = [ [2001, 2002, 2003, 2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011, 2013], [2001, 2002, 2003, 2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011, 2013], [2001, 2002, 2003, 2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011, 2013], [2001, 2002, 2003, 2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011, 2013] ]; var yData = [ [74, 82, 80, 74, 73, 72, 74, 70, 70, 66, 66, 69], [45, 42, 50, 46, 36, 36, 34, 35, 32, 31, 31, 28], [13, 14, 20, 24, 20, 24, 24, 40, 35, 41, 43, 50], [18, 21, 18, 21, 16, 14, 13, 18, 17, 16, 19, 23] ]; var colors = ['rgba(67,67,67,1)', 'rgba(115,115,115,1)', 'rgba(49,130,189, 1)', 'rgba(189,189,189,1)' ]; var lineSize = [2, 2, 4, 2]; var labels = ['Television', 'Newspaper', 'Internet', 'Radio']; var data = []; for ( var i = 0 ; i < xData.length ; i++ ) < var result = < x: xData[i], y: yData[i], type: 'scatter', mode: 'lines', line: < color: colors[i], width: lineSize[i] >>; var result2 = < x: [xData[i][0], xData[i][11]], y: [yData[i][0], yData[i][11]], type: 'scatter', mode: 'markers', marker: < color: colors[i], size: 12 >>; data.push(result, result2); > var layout = < showlegend: false, height: 600, width: 600, xaxis: < showline: true, showgrid: false, showticklabels: true, linecolor: 'rgb(204,204,204)', linewidth: 2, autotick: false, ticks: 'outside', tickcolor: 'rgb(204,204,204)', tickwidth: 2, ticklen: 5, tickfont: < family: 'Arial', size: 12, color: 'rgb(82, 82, 82)' >>, yaxis: < showgrid: false, zeroline: false, showline: false, showticklabels: false >, autosize: false, margin: < autoexpand: false, l: 100, r: 20, t: 100 >, annotations: [ < xref: 'paper', yref: 'paper', x: 0.0, y: 1.05, xanchor: 'left', yanchor: 'bottom', text: 'Main Source for News', font:< family: 'Arial', size: 30, color: 'rgb(37,37,37)' >, showarrow: false >, < xref: 'paper', yref: 'paper', x: 0.5, y: -0.1, xanchor: 'center', yanchor: 'top', text: 'Source: Pew Research Center & Storytelling with data', showarrow: false, font: < family: 'Arial', size: 12, color: 'rgb(150,150,150)' >> ] >; for( var i = 0 ; i < xData.length ; i++ ) < var result = < xref: 'paper', x: 0.05, y: yData[i][0], xanchor: 'right', yanchor: 'middle', text: labels[i] + ' ' + yData[i][0] +'%', showarrow: false, font: < family: 'Arial', size: 16, color: 'black' >>; var result2 = < xref: 'paper', x: 0.95, y: yData[i][11], xanchor: 'left', yanchor: 'middle', text: yData[i][11] +'%', font: < family: 'Arial', size: 16, color: 'black' >, showarrow: false >; layout.annotations.push(result, result2); > Plotly.newPlot('myDiv', data, layout);
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.