JSFiddle - React, Tailwind, and code Playground

by sberube

HTML

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>ECharts Bar Chart Example</title>
  <!-- Include ECharts library -->
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/echarts.min.js"></script>
  <style>
    /* Set the chart container size */
    #chart-container {
      width: 800px;
      height: 400px;
    }
  </style>
</head>
<body>
  <!-- Create a container for the chart -->
  <div id="chart-container"></div>

  <script>
    // Sample data for the last 12 months of spend
    var spendData = [
      { month: 'Jun 2022', amount: 500 },
      { month: 'Jul 2022', amount: 800 },
      { month: 'Aug 2022', amount: 600 },
      { month: 'Sep 2022', amount: 400 },
      { month: 'Oct 2022', amount: 700 },
      { month: 'Nov 2022', amount: 900 },
      { month: 'Dec 2022', amount: 750 },
      { month: 'Jan 2023', amount: 600 },
      { month: 'Feb 2023', amount: 450 },
      { month: 'Mar 2023', amount: 700 },
      { month: 'Apr 2023', amount: 850 },
      { month: 'May 2023', amount: 550 }
    ];

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

    // Set chart options
    var options = {
      title: {
        text: 'Monthly Spend',
        textStyle: {
          fontSize: 16,
          fontWeight: 'bold'
        }
      },
      xAxis: {
        type: 'category',
        data: spendData.map(item => item.month),
        axisLabel: {
          rotate: 45, // Rotate x-axis labels for better visibility
          formatter: function (value) {
            return value; // Display full month and year
          }
        }
      },
      yAxis: {
        type: 'value',
        axisLabel: {
          formatter: function (value) {
            return '$' + value.toLocaleString(); // Format currency as USD
          }
        }
      },
      tooltip: {
        trigger: 'axis',
        formatter: function (params) {
          var spend = '$' + params[0].value.toLocaleString();
      ...