JSFiddle - React, Tailwind, and code Playground

by akass

HTML

<script src=" https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.bundle.js"></script>

<body>
  <div style="width:600px;height:400px">
<canvas id="myChart" width="auto" height="200"></canvas>
</div>

JavaScript

var ctx = document.getElementById("myChart").getContext("2d");
const mydata = {
    labels: [0,5,10,15,20,25,30,35,40],
    datasets: [{
				backgroundColor: "3e95cd",
				borderColor: "#3e95cd",
				data: [{x:0,y:20},{x:5,y:15},{x:10,y:-10},{x:20,y:25},{x:25,y:30}],
				label: 'Temp',
                fill: '-1'
			}, 
               {
				backgroundColor: "rgba(220,100,220,0.2)",
				data: [{x:0,y:130},{x:20,y:130}],
				label: 'Material',
				fill: 'start'
			}, 
               {
				backgroundColor: "rgba(120,220,220,0.2)",
				data: [{x:20,y:130},{x:25,y:130}],
				label: 'Material',
				fill: 'start'
			}      
    ]
  };
  const opts = {
    title: {
      display: true,
      text: 'Сопротивление теплопередаче'
    }
  };
var myLineChart = new Chart(ctx,
{
  type: 'line',
  data: mydata,
  options: opts 
});