JSFiddle - React, Tailwind, and code Playground

by jaap

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.min.js"></script>
    <canvas id="myChart"></canvas>

JavaScript

var ctx = document.getElementById("myChart");
var data = {
  labels: [0.4, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17],
  datasets: [{
      label: "Medium",
      function: function(x) {
        return 0.4 + 0.2 * Math.log(x)
      },
      borderColor: "orange",
      pointRadius: 0,
      data: [],
      fill: true
    },
    {
      label: "Not ok",
      function: function(x) {
        return 0.2 + 0.15 * Math.log(x)
      },
      pointRadius: 0,
      borderColor: "red",
      data: [],
      fill: true
    }
  ]
};

Chart.pluginService.register({
  beforeInit: function(chart) {
    var data = chart.config.data;
    for (var i = 0; i < data.datasets.length; i++) {
      for (var j = 0; j < data.labels.length; j++) {
        var fct = data.datasets[i].function,
          x = data.labels[j],
          y = fct(x);
        data.datasets[i].data.push(y);
      }
    }
    data.datasets.push({
      label: "Scatter",
      showLine: false,
      borderColor: "green",
      data: [{
          x: 4,
          y: .7
        },
        {
          x: 3,
          y: .8
        },
        {
          x: 7.5,
          y: .5
        },
        {
          x: 3.2,
          y: .8
        },
        {
          x: 9,
          y: .89
        },
        {
          x: 1.8,
          y: .5
        },
        {
          x: 12.5,
          y: .4
        }
      ],
      fill: false
    })
  }
});

var myBarChart = new Chart(ctx, {
  type: 'line',
  data: data,
  options: {
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero: true
        }
      }]
    }
  }
});