JSFiddle - React, Tailwind, and code Playground

by ShallDev2018

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.js"></script>
<body>
    <canvas id="chartJSContainer" width="600" height="400"></canvas>
</body>

<script>
	var datasets = [
    {
        "borderWidth": 0,
        "data": [],
        "fill": false,
        "label": "legend item number 1",
        "backgroundColor": "#2F2E79",
        "borderColor": "#2F2E79"
    },
    {
        "borderWidth": 0,
        "data": [],
        "fill": false,
        "label": "legend item number 2",
        "backgroundColor": "#E11930",
        "borderColor": "#E11930"
    },
    {
        "borderWidth": 0,
        "data": [],
        "fill": false,
        "label": "legend item number 3",
        "backgroundColor": "#980D84",
        "borderColor": "#980D84"
    },
    {
        "borderWidth": 0,
        "data": [],
        "fill": false,
        "label": "legend item number 4",
        "backgroundColor": "#000000",
        "borderColor": "#000000"
    },
    {
        "borderWidth": 0,
        "data": [],
        "fill": false,
        "label": "legend item number 5",
        "backgroundColor": "#FFFF00",
        "borderColor": "#FFFF00"
    },
    {
        "borderWidth": 0,
        "data": [],
        "fill": false,
        "label": "legend item number 6",
        "backgroundColor": "#1CE6FF",
        "borderColor": "#1CE6FF"
    },
    {
        "borderWidth": 0,
        "data": [],
        "fill": false,
        "label": "legend item number 7",
        "backgroundColor": "#FF34FF",
        "borderColor": "#FF34FF"
    },
    {
        "borderWidth": 0,
        "data": [],
        "fill": false,
        "label": "legend item number 8",
        "backgroundColor": "#FF4A46",
        "borderColor": "#FF4A46"
    },
    {
        "borderWidth": 0,
        "data": [],
        "fill": false,
        "label": "legend item number 9",
        "backgroundColor": "#008941",
        "borderColor": "#008941"
    },
    {
        "borderWidth": 0,
        "data": [],
...

JavaScript

var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, {
  type: 'line',
  data: {
    labels: [],
    datasets: datasets
  },
  options: {
    responsive: true,
    maintainAspectRatio: false,
    transparencyEffects: true,
    scales: {
      x: {
        display: false
      },
      y: {
        display: false
      }
    },
    plugins: {
      title: {
        display: true,
        text: "Legend Only",
        padding: {
          top: 10,
          bottom: 30
        },
        font: {
          size: 38
        }
      },
      legend: {
        position: 'left',
        align: 'start',
        fullSize: false,
        labels: {
          font: {
            size: 12
          },
          padding: 10
        }
      }
    }
  }
});