Line Charts in JavaScript

How to make D3.js-based line charts in JavaScript.

Plotly Studio: Transform any dataset into an interactive data application in minutes with AI. Sign up for early access now.

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: {text: '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: {text: '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: { text: '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: { text: 'Quarter 1 Growth' }, xaxis: { title: { text: 'GDP per Capita' }, showgrid: false, zeroline: false }, yaxis: { title: { text: '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: {shape: 'linear'}, 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<br>with "smoothing" in line object', 'tweak line smoothness<br>with "smoothing" in line object', 'tweak line smoothness<br>with "smoothing" in line object', 'tweak line smoothness<br>with "smoothing" in line object', 'tweak line smoothness<br>with "smoothing" in line object', 'tweak line smoothness<br>with "smoothing" in line object'], line: {shape: 'spline'}, type: 'scatter' }; var trace3 = { x: [1, 2, 3, 4, 5], y: [11, 13, 12, 13, 11], mode: 'lines+markers', name: 'vhv', line: {shape: 'vhv'}, type: 'scatter' }; var trace4 = { x: [1, 2, 3, 4, 5], y: [16, 18, 17, 18, 16], mode: 'lines+markers', name: 'hvh', line: {shape: 'hvh'}, type: 'scatter' }; var trace5 = { x: [1, 2, 3, 4, 5], y: [21, 23, 22, 23, 21], mode: 'lines+markers', name: 'vh', line: {shape: 'vh'}, type: 'scatter' }; var trace6 = { x: [1, 2, 3, 4, 5], y: [26, 28, 27, 28, 26], mode: 'lines+markers', name: 'hv', line: {shape: 'hv'}, type: 'scatter' }; var data = [trace1, trace2, trace3, trace4, trace5, trace6]; var layout = { legend: { y: 0.5, traceorder: 'reversed', font: {size: 16}, 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: { text: 'Title of the Graph' }, xaxis: { title: { text: 'x-axis title' } }, yaxis: { title: { text: '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: { text: '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: { text: '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, tickmode: 'linear', 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);