html,

body,

#container {

  width: 100%;

  height: 100%;

  margin: 0;

  padding: 0;

}

anychart.onDocumentReady(function () {

  // create a line chart

  var chart = anychart.line();

  // add a chart title

  chart.title('Perceived threat of COVID-19 by political affiliation (March–August 2020)');

​

  // create a dataset (democrats)

  var data1 = anychart.data

    .set([

      ['Mar', 4.26, 0.1, 0.1],

      ['Apr', 4.46, 0.11, 0.11],

      ['May', 4.36, 0.126, 0.126],

      ['June', 4.29, 0.132, 0.132],

      ['July', 4.49, 0.124, 0.124],

      ['Aug', 4.47, 0.124, 0.124]

    ])

    .mapAs({

      x: 0,

      value: 1,

      valueLowerError: 2,

      valueUpperError: 3

    });

  // create a dataset (republicans)

  var data2 = anychart.data

    .set([

      ['Mar', 3.9, 0.144, 0.144],

      ['Apr', 4.09, 0.172, 0.172],

      ['May', 3.71, 0.196, 0.196],

      ['June', 3.54, 0.198, 0.198],

      ['July', 3.78, 0.196, 0.196],

      ['Aug', 3.7, 0.194, 0.195]

    ])

    .mapAs({

      x: 0,

      value: 1,

      valueLowerError: 2,

      valueUpperError: 3

    });

  // set the y-axis parameters

  var yScale = chart.yScale();

  yScale.minimum(3.2);

  yScale.maximum(4.8);

  var ticks = chart.yScale().ticks();

  ticks.interval(0.2);

  // set the grid

  chart.yGrid().enabled(true).stroke({

    // customize the stroke color

    color: "#ededed",

  });

​

  // create a line series for the first dataset

  var series1 = chart.line(data1).stroke("#031bbb", 3);

  // create error bars for the first series

  var error1 = series1.error();

  error1.valueErrorStroke("#031bbb", 1);

  // create a line series for the second dataset

  var series2 = chart.line(data2).stroke("#de0100", 3);

  // create error bars for the second series

  var error2 = series2.error();

  error2.valueErrorStroke("#de0100", 1);

  // set a container id for the chart

  chart.container('container');

​

  // command to draw the chart

  chart.draw();

});