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],
  datasets: [{
    type: 'line',
    label: "Medium",
    function: function(x) {
      return 0.4 + 0.2 * Math.log(x)
    },
    borderColor: "orange",
    pointRadius: 0,
    data: [],
    fill: true
  }, {
    label: "Some scatter idk",
    type: "scatter",
    borderColor: "darkgreen",
    showLine: false,
    data: [{
        x: 2.2,
        y: 1.7
      },
      {
        x: 3.1,
        y: 0.8
      }
    ]
  }]
};

var fillLineData = function(chart) {
  var data = chart.config.data;
  
  for (var i = 0; i < data.datasets.length; i++) {
    if (data.datasets[i].type == 'scatter') {
      continue;
    }
    for (var j = 0; j < data.labels.length; j++) {
      data.datasets[i].data.push({
        x: data.labels[j],
        y: data.datasets[i].function(data.labels[j])
      });
    }
  }
};

Chart.pluginService.register({
  beforeInit: fillLineData
});

window.myChart = Chart.Scatter(ctx, {
  data: data,
  options: {
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero: true
        }
      }]
    }
  }
});