JSFiddle - React, Tailwind, and code Playground

by sberube

HTML

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>ECharts Example - Markline in Legend</title>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/echarts.min.js"></script>
</head>

<body>
  <div id="chart-container" style="width: 600px; height: 400px;"></div>

  <script>
    var option = {
      title: {
        text: 'Chart Example'
      },
      legend: {
        data: ['Series', 'Markline']
      },
      xAxis: {
        type: 'category',
        data: ['Category 1', 'Category 2', 'Category 3', 'Category 4', 'Category 5']
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          name: 'Series',
          type: 'line',
          data: [50, 30, 60, 80, 40]
        },
        {
          name: 'Markline',
          type: 'line',
          markLine: {
            data: [
              {
                name: 'Threshold',
                yAxis: 70
              }
            ]
          },
          showInLegend: true,
          symbol: 'none',
          lineStyle: {
            color: 'blue',
            width: 5
          }
        }
      ]
    };

    // Initialize the chart
    var myChart = echarts.init(document.getElementById('chart-container'));
    myChart.setOption(option);
  </script>
</body>

</html>