JSFiddle - React, Tailwind, and code Playground

by Seetpal Singh

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.min.js"></script>
<body>
  <div id="chartWrapper">
    <canvas id="chartJSContainer" width="300" height="400"></canvas>
  </div>
</body>

CSS

#chartWrapper {
  border: 1px solid grey;
  padding: 10px;
  border-radius: 4px;
  max-width: 300px;
}

canvas {
  background-color: #eee;
}

JavaScript

const data = {

    "labels":       [2010,  2011, 2012, 2013, 2014, 2015, 2016, 2017, 2018, 2019, 2020, 2021],

    "news":   [22.9,  20.9, 19.6, 17.7, 15.9, 14.0, 12.3, 10.7, 9.2, 7.9, 6.9, 5.7, 5.0, 4.4, 4.0],

    "Magazines":    [10.3, 9.7, 9.3, 8.6, 7.9, 7.2, 6.6, 5.8, 5.2, 4.5, 3.9, 3.3, 2.9, 2.6, 2.3],

    "TV":           [36.7, 37.9, 38.6, 38.8, 38.4, 37.5, 35.9, 34.6, 32.6, 30.7, 28.8, 28.1, 26.6, 25.4, 24.4],

    "Radio":        [7.8, 7.3, 7.2, 7.0, 6.9, 6.7, 6.6, 6.3, 6.1, 5.7, 5.5, 5.1, 4.9, 4.7, 4.5],

    "Cinema":       [0.5, 0.5, 0.6, 0.6, 0.6, 0.6, 0.6, 0.6, 0.7, 0.7, 0.8, 0.3, 0.6, 0.6, 0.7],

    "OutOfHome":    [6.9, 7.0, 6.9, 7.0, 7.1, 7.1, 7.0, 6.9, 6.8, 6.6, 6.6, 5.3, 5.9, 6.1, 6.2],

    "Internet":     [14.8, 16.7, 17.8, 20.3, 23.2, 26.9, 31.0, 35.0, 39.5, 43.9, 47.6, 52.2, 54.2, 56.2, 58.0]

}

const dataBase = [
  {
    label: 'news',
    data: data.news,
    // cubicInterpolationMode: 'monotone',
    borderColor: '#D6664F',
    backgroundColor: '#D6664F',
    radius: 2.5
  },
  {
    label: 'Magazines',
    data: data.Magazines,
    // cubicInterpolationMode: 'monotone',
    borderColor: '#B2D6F2',
    backgroundColor: '#B2D6F2',
    radius: 2.5
  },
  {
    label: 'TV',
    data: data.TV,
    // cubicInterpolationMode: 'monotone',
    borderColor: '#4B6AD9',
    backgroundColor: '#4B6AD9',
    radius: 2.5
  },
  {
    label: 'Radio',
    data: data.Radio,
    // cubicInterpolationMode: 'monotone',
    borderColor: '#0E4280',
    backgroundColor: '#0E4280',
    radius: 2.5
  },
  {
    label: 'Cinema',
    data: data.Cinema,
    // cubicInterpolationMode: 'monotone',
    borderColor: '#C2CBEC',
    backgroundColor: '#C2CBEC',
    radius: 2.5
  },
  {
    label: 'Out-of-home',
    data: data.OutOfHome,
    // cubicInterpolationMode: 'monotone',
    borderColor: '#E4A429',
    backgroundColor: '#E4A429',
    radius: 2.5
  },
  {
    label: 'Internet',
    data: data.Internet,
    // cubicInterpolationMode: 'monotone',
    borderColor:...