JSFiddle - React, Tailwind, and code Playground

by sp00n82

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.3.0/chart.umd.js"></script>
<div class="line-container">
  <canvas id="canvas"></canvas>
</div>

CSS

.line-container {
  width: 800px;
  height: 370px;
}

JavaScript

const options = {
  scales: {
    x: {
      type: "linear",
      min: -10,
      max: 40,
    },
    y: {
      type: "linear",
    },
  },
  elements: {
    line: {
      //cubicInterpolationMode: "monotone",
      // capBezierPoints: false,
      tension: 0.4,
    }
  },
};


const data = {
  datasets: [
    {
      label: "Line #1",
      data: [
        { "x": -10, "y": 150 },
        { "x":   0, "y":  81 },
        { "x":  10, "y":  49 },
        { "x":  20, "y":  32 },
        { "x":  30, "y":  21 },
        { "x":  35, "y":  19 },
        { "x":  40, "y":  16 },
        { "x":  45, "y":  13 },
      ]
    },
    {
      label: "Line #2",
      data: [
        { "x": -10, "y": 300 },
        { "x":   0, "y": 162 },
        { "x":  10, "y":  98 },
        { "x":  20, "y":  64 },
        { "x":  30, "y":  42 },
        { "x":  35, "y":  38 },
        { "x":  40, "y":  32 },
        { "x":  45, "y":  26 },
      ]
    },

  ]
};


const config = {
  type: "line",
  options: options,
  data: data,
};


const ctx = document.getElementById("canvas");
const myChart = new Chart(ctx, config);