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

  // set markers for the first series

  var series1 = chart.marker(data1).type("circle").size(5).stroke("#031bbb", 1).fill("#0066cc");

  // name the first series

  series1

    .name('Democrats');

  // 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 markers for the second series

  var series2 = chart.marker(data2).type("square").size(5).stroke("#de0100", 1).fill("#de0100");

  // name the second series

  series2

    .name('Republicans');

  // configure the tooltip

  var tooltip = chart.tooltip();

  tooltip.displayMode("separated");

​

  // configure the tooltip formatter

  tooltip

    .fontColor('#E1E1E1')

    .titleFormat('{%seriesName}')

    .format(function () {

      return (

        'Mean value: ' +

        this.value +

        '\nUpper error value: ' +

        this.valueLowerError +

        '\nLower error value: ' +

        this.valueUpperError

      );

    });

​

  // set the tooltip position

  chart.tooltip().positionMode('point');

  // set a container id for the chart

  chart.container('container');

​

  // command to draw the chart

  chart.draw();

});