Chart Bar

  
  <wc-button id="refresh-bars">Randomize</wc-button>

  <wc-chart-bar id="sales-bar" width="520" height="320" margin="24" show-values="true"></wc-chart-bar>

  <script>
    const chart = document.querySelector('#sales-bar');
    chart.data = [
      { name: 'apples', label: 'Apples', value: 28 },
      { name: 'bananas', label: 'Bananas', value: 36 },
      { name: 'cherries', label: 'Cherries', value: 22 },
      { name: 'dates', label: 'Dates', value: 18 },
    ];

    function randomNumber(min, max) {
      return parseInt(Math.random() * (max - min) + min);
    }

    document.querySelector('#refresh-bars').addEventListener('click', () => {
      chart.data = chart.data.map(d => ({
        ...d,
        value: randomNumber(12, 72),
      }));
      chart.width = randomNumber(460, 620);
    });
  </script>

  <wc-button id="toggle-values">Toggle values</wc-button>
  <wc-button id="toggle-legend">Toggle legend</wc-button>
  <br>

  <wc-chart-stacked-bar id="stacked-bar" width="560" height="340" margin="28" show-values="true" show-legend="true"></wc-chart-stacked-bar>

  <script>
    const stacked = document.querySelector('#stacked-bar');
    stacked.data = [
      {
        name: 'q1',
        label: 'Q1',
        segments: [
          { name: 'mobile', label: 'Mobile', value: 40 },
          { name: 'web', label: 'Web', value: 24 },
          { name: 'store', label: 'Store', value: 16 },
        ],
      },
      {
        name: 'q2',
        label: 'Q2',
        segments: [
          { name: 'mobile', label: 'Mobile', value: 32 },
          { name: 'web', label: 'Web', value: 30 },
          { name: 'store', label: 'Store', value: 18 },
        ],
      },
      {
        name: 'q3',
        label: 'Q3',
        segments: [
          { name: 'mobile', label: 'Mobile', value: 44 },
          { name: 'web', label: 'Web', value: 28 },
          { name: 'store', label: 'Store', value: 20 },
        ],
      },
    ];

    document.querySelector('#toggle-values').addEventListener('click', () => {
      stacked.showValues = !stacked.showValues;
    });

    document.querySelector('#toggle-legend').addEventListener('click', () => {
      stacked.showLegend = !stacked.showLegend;
    });
  </script>