JSFiddle - React, Tailwind, and code Playground

by Lloyd Cledwyn

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.8.0/chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-annotation/1.4.0/chartjs-plugin-annotation.min.js"></script>
<canvas id="chart"></canvas>

JavaScript

const labels = ['Label 1', 'Label 2', 'Label 3', 'l4', 'L5'];
const data = {
  labels: labels,
  datasets: [{
    label: 'one',
    data: [14,21,4,5,7],
    backgroundColor: 'rgb(255, 99, 132)',
  }, {
    label: 'two',
    data: [1,3,2,4,5],
    backgroundColor: 'rgb(255, 199, 132)',
  }, {
    label: 'three',
    data: [7,1,9,6,7],
    backgroundColor: 'rgb(255, 99, 32)',
  }]
};

const annotation2 = {
  type: 'line',
  scaleID: 'x',
  borderWidth: 3,
  borderColor: 'black',
  value: 20,
  label: {
    rotation: 'auto',
    position: 'start',
    backgroundColor: 'black',
    content: 'Goal',
    enabled: true
  }
};

const config = {
  type: 'bar',
  data: data,
  options: {
    plugins: {
      annotation: {
        annotations: {
//          annotation1,
          annotation2,
//          annotation3
        }
      }
    },
      indexAxis: 'y',
      scales: {
        x: { stacked: true },
        y: { stacked: true }
      },
  },
};


const ctx = document.getElementById('chart').getContext('2d');
const chart = new Chart(ctx, config);