JSFiddle - React, Tailwind, and code Playground

by Nikita Vetrov

HTML

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

<div id="container1"></div>
<div id="container2"></div>

CSS

#container1 {
	min-width: 310px;
	max-width: 800px;
	height: 400px;
	margin: 0 auto
}

#container2 {
	min-width: 310px;
	max-width: 800px;
	height: 400px;
	margin: 0 auto
}

JavaScript

var data_sum = [];
var data_avg = [];

{
    let sum = 0;
    let avg = 0;
    let d = (new Date).getTime();
    for (let i = 0; i < 24 * 365; i++) {
        var win = 0;
        for (let j = 0; j < 26; j++) {
            let rnd = Math.random() * 9999 + 1;
            let local_win;
            if (rnd <= 9885) {
                local_win = 194;
            } else if (rnd <= 9985) {
                local_win = 194 * 10;
            } else if (rnd <= 9993) {
                local_win = 194 * 100;
            } else if (rnd <= 9997) {
                local_win = 194 * 1000;
            } else if (rnd <= 9999) {
                local_win = 194 * 10000;
            } else {
                local_win = 194 * 100000;
            }
            win += local_win;
        }

        sum += win / 100000000 * 1049, 12;
        avg = sum / (i + 1) / 26;
        data_sum.push([d + i * 3600 * 1000, sum]);
        data_avg.push([d + i * 3600 * 1000, avg]);
    }
}


Highcharts.chart('container1', {
    title: {
        text: 'Заработок в течение времени'
    },
    xAxis: {
        type: 'datetime'
    },
    yAxis: {
        title: {
            text: 'USD'
        }
    },
    legend: {
        layout: 'vertical',
        align: 'right',
        verticalAlign: 'middle'
    },

    plotOptions: {
        spline: {
            marker: {
                enabled: true
            }
        }
    },

    series: [{
        name: '',
        data: data_sum
    }]
});


Highcharts.chart('container2', {
    title: {
        text: 'Средний заработок'
    },
    xAxis: {
        type: 'datetime'
    },
    yAxis: {
        title: {
            text: 'USD'
        }
    },
    legend: {
        layout: 'vertical',
        align: 'right',
        verticalAlign: 'middle'
    },

    plotOptions: {
        series: {
            pointStart: 0
        }
    },

    series: [{
        name: '',
        data: data_avg
    }]
});