<div id="line-chart"></div>
body {
  margin: 20px auto;
  font-family: 'Lato';
  font-weight: 300;
  text-align: center;
}

#line-chart {
  margin: 0 auto;
  height: 450px;
}
var lineDiv = document.getElementById('line-chart');

var traceA = {
  x: [1, 5, 13, 24, 35, 46, 60],
  y: [180, 160, 170, 165, 175, 175, 149],
  type: 'scatter',
  name: 'width: 5',
  line: {
    width: 5,
    color: 'rgb(255, 157, 98)'
  }
};

var traceB = {
  x: [1, 5, 13, 24, 35, 46, 60],
  y: [150, 130, 140, 135, 145, 145, 119],
  type: 'scatter',
  name: 'dash: dot',
  line: {
    width: 3,
    dash: 'dot',
    color: 'rgb(157, 255, 98)'
  }
};

var traceC = {
  x: [1, 5, 13, 24, 35, 46, 60],
  y: [120, 100, 110, 105, 115, 115, 89],
  type: 'scatter',
  name: 'dash: longdash',
  line: {
    width: 1,
    dash: 'longdash',
    color: 'rgb(157, 98, 255)'
  }
};

var traceD = {
  x: [1, 5, 13, 24, 35, 46, 60],
  y: [90, 70, 80, 75, 85, 85, 59],
  type: 'scatter',
  name: 'dash: dashdot',
  line: {
    width: 1,
    dash: 'dashdot',
    color: 'rgb(98, 157, 255)'
  }
};

var traceE = {
  x: [1, 5, 13, 24, 35, 46, 60],
  y: [60, 40, 50, 45, 55, 55, 29],
  type: 'scatter',
  name: 'dash: 4px, 4px, 10px',
  line: {
    dash: '4px, 4px, 10px',
    color: 'rgb(255, 98, 157)'
  }
};

var data = [traceA, traceB, traceC, traceD, traceE];

var layout = {
  title:'Dash values for a Line Chart',
  yaxis: {
    rangemode: 'tozero'
  }
};

Plotly.plot( lineDiv, data, layout );

External CSS

  1. https://fonts.googleapis.com/css?family=Lato:300

External JavaScript

  1. https://cdn.plot.ly/plotly-latest.min.js