JSFiddle - React, Tailwind, and code Playground

S. Schluricke

by Tenobaal

HTML

<head>
  <link href='https://fonts.googleapis.com/css?family=Fira Sans' rel='stylesheet'>
</head>
<body>

  <div id="chart1" style="height: 400px; margin-top: 1em"></div>

	<script src="https://code.highcharts.com/highcharts.js"></script>
  <script src="https://code.highcharts.com/highcharts-more.js"></script>
</body>

<script>

data = {time : [1,2,3,4,5,6,7,8,9,10],
			 power : [200,200,300,400,500,500, 500, 400, 400 , 400],
			 relpower : [4,4,4,4,5,5,5,4,4,4]}

</script>

CSS

#chart1 {
	max-width: 800px;
	margin: 0 auto;
  background-color: #1B4152;
}

JavaScript

var chartlines = function (time, power, relpower, title, name1, name2, chart_container) {
    var options = {
        chart: {
            renderTo: chart_container,
            backgroundColor: null,
            zoomType: 'xy',
            style: {
                fontFamily: 'Fira Sans'
            }
        },
        title: {
            text: "",
            style: {
                fontSize: '24px',
                color: 'white'
            }
        },
        xAxis: {
            labels: {
                style: {
                    fontSize: '16px',
                    color: 'white'
                }
            }
        },
        yAxis: {
					enabled: false
        },
        legend: {
            enabled: false
        },
        tooltip: {
            shared: true
        },
        series: [{
            name: name1,
            type: 'line',
            color: 'rgba(100,194,200,1)',
            data: power,
            tooltip: {
            		enabled: false
        		},
        },{
            name: name2,
            type: 'line',
            color: 'rgba(235,93,64,1)',
            data: relpower,
            tooltip: {
                enabled: true
            },
        }
        ]
    };

    var chart = new Highcharts.Chart(options);
};
chartlines(data.time, data.power, data.relpower, '', 'Watt', 'Watt/kg', 'chart1');