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

  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

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

​

});