[docs] graphset > plot > error

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>ZingSoft Demo</title>

  <script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
  <style></style>
</head>

<body>
  <div id='myChart'></div>
  <script>
    ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
    let chartConfig = {
      type: 'bar',
      plot: {
        errors: [
          [3, 4],
          [3.1, 3.5],
          [3.4, 3.1],
          [2.9, 3.3],
          [4, 3],
          [4.1, 3.9],
          [2.9, 3.3],
          [3.6, 3.7],
          [3.5, 3.5]
        ],
        error: {
          hoverState: {
            lineColor: 'red'
          }
        },
        tooltip: {
          text: '%v<br>+%node-error-plus/-%node-error-minus',
          fontColor: 'black',
          fontFamily: 'Georgia',
          backgroundColor: 'white',
          borderColor: 'black',
          borderWidth: 1,
          borderRadius: '5px',
          alpha: 0.7,
          padding: '5%'
        },
        barSpace: '0%',
        barSpaceLeft: '5%',
        barSpaceRight: '5%'
      },
      scaleX: {
        format: 'Test %v'
      },
      scaleY: {
        values: '0:100:20',
        guide: {
          lineStyle: 'dotted'
        }
      },
      series: [{
          values: [34, 95, 25, 15, 28, 55, 59],
          backgroundColor: '#0066cc'
        },
        {
          values: [31, 89, 15, 29, 34, 41, 66],
          backgroundColor: '#3399ff'
        }
      ]
    };

    zingchart.render({
      id: 'myChart',
      data: chartConfig,
      height: 400,
      width: '100%'
    });
  </script>
</body>

</html>

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>ZingSoft Demo</title>

  <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
</head>

<body>
  <div id='myChart'></div>
</body>

</html>

let chartConfig = {
  type: 'bar',
  plot: {
    errors: [
      [3, 4],
      [3.1, 3.5],
      [3.4, 3.1],
      [2.9, 3.3],
      [4, 3],
      [4.1, 3.9],
      [2.9, 3.3],
      [3.6, 3.7],
      [3.5, 3.5]
    ],
    error: {
      hoverState: {
        lineColor: 'red'
      }
    },
    tooltip: {
      text: '%v<br>+%node-error-plus/-%node-error-minus',
      fontColor: 'black',
      fontFamily: 'Georgia',
      backgroundColor: 'white',
      borderColor: 'black',
      borderWidth: 1,
      borderRadius: '5px',
      alpha: 0.7,
      padding: '5%'
    },
    barSpace: '0%',
    barSpaceLeft: '5%',
    barSpaceRight: '5%'
  },
  scaleX: {
    format: 'Test %v'
  },
  scaleY: {
    values: '0:100:20',
    guide: {
      lineStyle: 'dotted'
    }
  },
  series: [{
      values: [34, 95, 25, 15, 28, 55, 59],
      backgroundColor: '#0066cc'
    },
    {
      values: [31, 89, 15, 29, 34, 41, 66],
      backgroundColor: '#3399ff'
    }
  ]
};

zingchart.render({
  id: 'myChart',
  data: chartConfig,
  height: 400,
  width: '100%'
});