JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://www.flotcharts.org/flot/jquery.flot.js"></script>
<div class="demo-container">
			<div id="placeholder" class="demo-placeholder"></div>
		</div>

by <a href="http://www.flotcharts.org" target="_blank">Flot</a>

CSS

* {
    padding: 0;
    margin: 0;
    vertical-align: top;
}



.demo-container {
    box-sizing: border-box;
    width: 100%;
    height: 500px;
    padding: 20px 15px 15px 15px;
    margin: 15px auto 30px auto;    
}

.demo-placeholder {
    width: 100%;
    height: 100%;
    font-size: 14px;
    line-height: 1.2em;
}

.legend table {
    border-spacing: 5px;
}

JavaScript

$(function() {
    //マスに合わせて[縦,横]と数値を書く
		var date1 = [[0, 0],[4, 15],[12, 17]];
		var date2 = [[0, 0], [4, 8], [8, -2], [12, 15]];
		var date3 = [[0, 0], [8, 12],[10, 5],[12, 10]];
    
  //細かいセッティング
		$.plot("#placeholder", [
			{ label: "りんご", data: date1 },
			{ label: "すいか", data: date2 },
			{ label: "とまと", data: date3 }
		], {
			series: {
				lines: { show: true },
				points: { show: true }
			},
		});
	});