JSFiddle - React, Tailwind, and code Playground

by sberube

HTML

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>ECharts Bar Chart with Callout</title>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/echarts.min.js"></script>
  <style>
    #chart-container {
      width: 600px;
      height: 400px;
    }
  </style>
</head>
<body>
  <div id="chart-container"></div>

  <script>
    // Initialize ECharts instance
    var myChart = echarts.init(document.getElementById('chart-container'));

    // Chart configuration
    var option = {
      tooltip: {},
      xAxis: {
        type: 'category',
        data: ['Category 1', 'Category 2', 'Category 3', 'Category 4', 'Category 5']
      },
      yAxis: {
        type: 'value'
      },
      series: [{
        type: 'bar',
        data: [10, 20, 30, 40, 50],
        itemStyle: {
          normal: {
            // Your bar style options...
          }
        },
        label: {
          normal: {
            show: true,
            position: 'top'
          }
        },
        markPoint: {
          symbol: 'pin',
          symbolSize: 30,
          label: {
            show: true,
            formatter: '{b}', // Display the data point name as the label
            position: 'top',
            color: '#ffffff',
            fontWeight: 'bold'
          },
          data: [{
            name: 'Callout',
            coord: [2, 30], // Specify the coordinates of the data point to highlight
          }]
        }
      }]
    };

    // Set chart options and render the chart
    myChart.setOption(option);
  </script>
</body>
</html>