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. Try Plotly Studio 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);

\n\n\n\n\t

\n","js":"var trace1 = {\n x: [52698, 43117],\n y: [53, 31],\n mode: 'markers',\n name: 'North America',\n text: ['United States', 'Canada'],\n marker: {\n color: 'rgb(164, 194, 244)',\n size: 12,\n line: {\n color: 'white',\n width: 0.5\n }\n },\n type: 'scatter'\n};\n\nvar trace2 = {\n x: [39317, 37236, 35650, 30066, 29570, 27159, 23557, 21046, 18007],\n y: [33, 20, 13, 19, 27, 19, 49, 44, 38],\n mode: 'markers',\n name: 'Europe',\n text: ['Germany', 'Britain', 'France', 'Spain', 'Italy', 'Czech Rep.', 'Greece', 'Poland'],\n marker: {\n color: 'rgb(255, 217, 102)',\n size: 12\n },\n type: 'scatter'\n};\n\nvar trace3 = {\n x: [42952, 37037, 33106, 17478, 9813, 5253, 4692, 3899],\n y: [23, 42, 54, 89, 14, 99, 93, 70],\n mode: 'markers',\n name: 'Asia/Pacific',\n text: ['Australia', 'Japan', 'South Korea', 'Malaysia', 'China', 'Indonesia', 'Philippines', 'India'],\n marker: {\n color: 'rgb(234, 153, 153)',\n size: 12\n },\n type: 'scatter'\n};\n\nvar trace4 = {\n x: [19097, 18601, 15595, 13546, 12026, 7434, 5419],\n y: [43, 47, 56, 80, 86, 93, 80],\n mode: 'markers',\n name: 'Latin America',\n text: ['Chile', 'Argentina', 'Mexico', 'Venezuela', 'Venezuela', 'El Salvador', 'Bolivia'],\n marker: {\n color: 'rgb(142, 124, 195)',\n size: 12\n },\n type: 'scatter'\n};\n\nvar data = [trace1, trace2, trace3, trace4];\n\nvar layout = {\n title: {\n text: 'Quarter 1 Growth'\n },\n xaxis: {\n title: {\n text: 'GDP per Capita'\n },\n showgrid: false,\n zeroline: false\n },\n yaxis: {\n title: {\n text: 'Percent'\n },\n showline: false\n }\n};\n\nPlotly.newPlot('myDiv', data, layout);\n"}">

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);

\n\n\n\n\t

\n","js":"var trace1 = {\n x: [1, 2, 3, 4, 5],\n y: [1, 3, 2, 3, 1],\n mode: 'lines+markers',\n name: 'linear',\n line: {shape: 'linear'},\n type: 'scatter'\n};\n\nvar trace2 = {\n x: [1, 2, 3, 4, 5],\n y: [6, 8, 7, 8, 6],\n mode: 'lines+markers',\n name: 'spline',\n 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'],\n line: {shape: 'spline'},\n type: 'scatter'\n};\n\nvar trace3 = {\n x: [1, 2, 3, 4, 5],\n y: [11, 13, 12, 13, 11],\n mode: 'lines+markers',\n name: 'vhv',\n line: {shape: 'vhv'},\n type: 'scatter'\n};\n\nvar trace4 = {\n x: [1, 2, 3, 4, 5],\n y: [16, 18, 17, 18, 16],\n mode: 'lines+markers',\n name: 'hvh',\n line: {shape: 'hvh'},\n type: 'scatter'\n};\n\nvar trace5 = {\n x: [1, 2, 3, 4, 5],\n y: [21, 23, 22, 23, 21],\n mode: 'lines+markers',\n name: 'vh',\n line: {shape: 'vh'},\n type: 'scatter'\n};\n\nvar trace6 = {\n x: [1, 2, 3, 4, 5],\n y: [26, 28, 27, 28, 26],\n mode: 'lines+markers',\n name: 'hv',\n line: {shape: 'hv'},\n type: 'scatter'\n};\n\nvar data = [trace1, trace2, trace3, trace4, trace5, trace6];\n\nvar layout = {\n legend: {\n y: 0.5,\n traceorder: 'reversed',\n font: {size: 16},\n yref: 'paper'\n }};\n\nPlotly.newPlot('myDiv', data, layout);\n"}">

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);

\n\n\n\n\t

\n","js":"var trace1 = {\n x: [1, 2, 3, 4, 5],\n y: [1, 3, 2, 3, 1],\n mode: 'lines',\n name: 'Solid',\n line: {\n dash: 'solid',\n width: 4\n }\n};\n\nvar trace2 = {\n x: [1, 2, 3, 4, 5],\n y: [6, 8, 7, 8, 6],\n mode: 'lines',\n name: 'dashdot',\n line: {\n dash: 'dashdot',\n width: 4\n }\n};\n\nvar trace3 = {\n x: [1, 2, 3, 4, 5],\n y: [11, 13, 12, 13, 11],\n mode: 'lines',\n name: 'Solid',\n line: {\n dash: 'solid',\n width: 4\n }\n};\n\nvar trace4 = {\n x: [1, 2, 3, 4, 5],\n y: [16, 18, 17, 18, 16],\n mode: 'lines',\n name: 'dot',\n line: {\n dash: 'dot',\n width: 4\n }\n};\n\nvar data = [trace1, trace2, trace3, trace4];\n\nvar layout = {\n title: {\n text: 'Line Dash'\n },\n xaxis: {\n range: [0.75, 5.25],\n autorange: false\n },\n yaxis: {\n range: [0, 18.5],\n autorange: false\n },\n legend: {\n y: 0.5,\n traceorder: 'reversed',\n font: {\n size: 16\n }\n }\n};\n\nPlotly.newPlot('myDiv', data, layout);\n"}">

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);

\n\n\n\n\t

\n","js":"var xData = [\n [2001, 2002, 2003, 2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011, 2013],\n [2001, 2002, 2003, 2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011, 2013],\n [2001, 2002, 2003, 2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011, 2013],\n [2001, 2002, 2003, 2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011, 2013]\n];\n\nvar yData = [\n [74, 82, 80, 74, 73, 72, 74, 70, 70, 66, 66, 69],\n [45, 42, 50, 46, 36, 36, 34, 35, 32, 31, 31, 28],\n [13, 14, 20, 24, 20, 24, 24, 40, 35, 41, 43, 50],\n [18, 21, 18, 21, 16, 14, 13, 18, 17, 16, 19, 23]\n];\n\nvar colors = ['rgba(67,67,67,1)', 'rgba(115,115,115,1)', 'rgba(49,130,189, 1)',\n 'rgba(189,189,189,1)'\n];\n\nvar lineSize = [2, 2, 4, 2];\n\nvar labels = ['Television', 'Newspaper', 'Internet', 'Radio'];\n\nvar data = [];\n\nfor ( var i = 0 ; i < xData.length ; i++ ) {\n var result = {\n x: xData[i],\n y: yData[i],\n type: 'scatter',\n mode: 'lines',\n line: {\n color: colors[i],\n width: lineSize[i]\n }\n };\n var result2 = {\n x: [xData[i][0], xData[i][11]],\n y: [yData[i][0], yData[i][11]],\n type: 'scatter',\n mode: 'markers',\n marker: {\n color: colors[i],\n size: 12\n }\n };\n data.push(result, result2);\n}\n\nvar layout = {\n showlegend: false,\n height: 600,\n width: 600,\n xaxis: {\n showline: true,\n showgrid: false,\n showticklabels: true,\n linecolor: 'rgb(204,204,204)',\n linewidth: 2,\n tickmode: 'linear',\n ticks: 'outside',\n tickcolor: 'rgb(204,204,204)',\n tickwidth: 2,\n ticklen: 5,\n tickfont: {\n family: 'Arial',\n size: 12,\n color: 'rgb(82, 82, 82)'\n }\n },\n yaxis: {\n showgrid: false,\n zeroline: false,\n showline: false,\n showticklabels: false\n },\n autosize: false,\n margin: {\n autoexpand: false,\n l: 100,\n r: 20,\n t: 100\n },\n annotations: [\n {\n xref: 'paper',\n yref: 'paper',\n x: 0.0,\n y: 1.05,\n xanchor: 'left',\n yanchor: 'bottom',\n text: 'Main Source for News',\n font:{\n family: 'Arial',\n size: 30,\n color: 'rgb(37,37,37)'\n },\n showarrow: false\n },\n {\n xref: 'paper',\n yref: 'paper',\n x: 0.5,\n y: -0.1,\n xanchor: 'center',\n yanchor: 'top',\n text: 'Source: Pew Research Center & Storytelling with data',\n showarrow: false,\n font: {\n family: 'Arial',\n size: 12,\n color: 'rgb(150,150,150)'\n }\n }\n ]\n};\n\nfor( var i = 0 ; i < xData.length ; i++ ) {\n var result = {\n xref: 'paper',\n x: 0.05,\n y: yData[i][0],\n xanchor: 'right',\n yanchor: 'middle',\n text: labels[i] + ' ' + yData[i][0] +'%',\n showarrow: false,\n font: {\n family: 'Arial',\n size: 16,\n color: 'black'\n }\n };\n var result2 = {\n xref: 'paper',\n x: 0.95,\n y: yData[i][11],\n xanchor: 'left',\n yanchor: 'middle',\n text: yData[i][11] +'%',\n font: {\n family: 'Arial',\n size: 16,\n color: 'black'\n },\n showarrow: false\n };\n\n layout.annotations.push(result, result2);\n}\n\nPlotly.newPlot('myDiv', data, layout);\n"}">