JSFiddle - React, Tailwind, and code Playground

by ck1llc

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="chart-list" style="min-width: 800px; margin: 0 auto"></div>

JavaScript

$(function () {
    
	showCharts(10, 25, 200);
});

function showCharts(chartNum, lineNum, pointNum)
{
    generateDom(chartNum, "chart-list");
    var dataArray = generateData(chartNum, lineNum, pointNum);
    for(var i = 0;i < chartNum;i ++)
    {
        $('#container' + i).highcharts(dataArray[i]);
    }
}

function generateDom(chartNum, domId)
{
    var div = document.getElementById(domId);
    var domStr = "";
    for(var i = 0;i < chartNum;i ++)
    {
        var tempStr = "Chart " + i + ":<br />" + 
                      "<div id=\"container" + i + "\"></div>";
        domStr += tempStr;
    }
    div.innerHTML = domStr;
}
function generateData(chartNum, lineNum, pointNum)
{
    var dataArray = [];
    for(var x = 0;x < chartNum;x ++)
    {
		var chartConfig = {
				chart: {
							type: 'line',
				  animation : false
						},
						title: {
							text: 'Fruit Consumption'
						},
						yAxis: {
					max: 30000,
							title: {
								text: 'Fruit eaten'
							}
						},
				plotOptions: {
					series: {
					animation : false,
						marker: {
						   enabled: true,
						   symbol : "circle"
						}
					}
				},
				series: [
		//        {
		//            name: 'Tokyo',
		//            data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
		//        }
				]
			};
		var tempSeries;

		for(var i = 0;i < lineNum;i ++)
		{
			tempSeries = {"name":"","data":[]};
			tempSeries.name = "seriesname" + i;
			for(var j = 0;j < pointNum;j ++)
			{
				tempSeries.data.push(Math.floor(Math.random() * ( 30000 + 1)));
			}
			chartConfig.series.push(tempSeries);
		}
		dataArray.push(chartConfig);
	}
	return dataArray;
}