JSFiddle - React, Tailwind, and code Playground

by tripcollor

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
    <canvas></canvas>
</body>
</html>

JavaScript

const canvas = document.querySelector('canvas');
      const c = canvas.getContext('2d');

      var width = 759.5;
      var height = 440;
      var margin = 30;

      canvas.width = width;
      canvas.height = height;

      var data = [
        {x: 0, y: 2},
        {x: 5, y: 2},
        {x: 10, y: 2},
      ];

      var minX = min(data, function(d){ return d.x; });
      var maxX = max(data, function(d){ return d.x; });
      var minY = min(data, function(d){ return d.y });
      var maxY = max(data, function(d){ return d.y });

      var xAxisLength = width - 2 * margin;
      var yAxisLength = height - 2 * margin;

      var x_axis_start = 50;
      var x_axis_end = 100;
      var y_axis_start = 0;
      var y_axis_end = 100;

      function min(data, callback){
        var arr = [];
        for(var i in data){
          arr.push(callback(data[i]));
        }
        return Math.min.apply(null, arr);
      }

      function max(data, callback){
        var arr = [];
        for(var i in data){
          arr.push(callback(data[i]));
        }
        return Math.max.apply(null, arr);
      }

      asixBuild(data);

      function asixBuild(data) {
        var step = 50;
        var indent = 10;

        c.beginPath();
        c.moveTo(margin, margin);
        c.lineTo(margin, (height - margin));
        c.lineTo((width - margin), (height - margin));
        c.stroke();

        var xStepAxis = Math.round(xAxisLength / step);
        var yStepAxis = Math.round(yAxisLength / step);

        var x_axis_values = x_axis_end - x_axis_start;
        var x_axis_step = x_axis_values / xStepAxis;

        var y_axis_values = y_axis_end - y_axis_start;
        var y_axis_step = y_axis_values / yStepAxis;
  
        c.beginPath();
        c.font = "10px Arial";
        c.textAlign="center";
        c.textBaseline="top";

        for(var i = 0; i < xStepAxis; i++){
          c.fillText(Math.round(x_axis_start + i * x_axis_step), ((i*step)+margin), (height - margin +...