Grand Prix graph with multiplers

grandprixgraph.user.js

// ==UserScript==
// @name         Grand Prix Chart
// @namespace    me.xpaw.grandprixchart
// @version      0.2
// @match        https://store.steampowered.com/grandprix
// @grant        none
// @require      https://cdnjs.cloudflare.com/ajax/libs/highcharts/7.1.2/highstock.js
// ==/UserScript==

'use strict';

const container = document.createElement( 'div' );

document.querySelector( '.prix_raceboard_ctn' ).after( container );

const chart = Highcharts.chart(container, {
    chart: {
        type: 'line',
        backgroundColor: '#202225',
        style:
        {
            color: '#fff',
            fontSize: '14px',
            fontWeight: 400,
            fontFamily: 'Motiva Sans',
        }
    },
    time: {
        useUTC: false
    },
    title: {
        text: 'Score distance over time'
    },
    xAxis: {
        type: 'datetime',
    },
    yAxis: {
        title: {
            text: 'Distance'
        },
        gridLineWidth: 0,
        plotLines: [{
            value: 0,
            width: 1,
            color: '#808080'
        }]
    },
    plotOptions:
    {
        series:
        {
            marker:
            {
                enabled: false
            }
        }
    },
    tooltip:
    {
        shared: true,
        split: false,
    },
    series: [{
        name: 'Hare',
        color: '#d0d3cf',
    }, {
        name: 'Tortoise',
        color: '#448e64',
    }, {
        name: 'Corgi',
        color: '#d7a318',
    }, {
        name: 'Cockatiel',
        color: '#447491',
    }, {
        name: 'Pig',
        color: '#cf3a22',
    }]
});

const container2 = document.createElement( 'div' );

document.querySelector( '.prix_raceboard_ctn' ).after( container2 );

const multiplier = Highcharts.chart(container2, {
    chart: {
        type: 'line',
        backgroundColor: '#202225',
        style:
        {
            color: '#fff',
            fontSize: '14px',
            fontWeight: 400,
            fontFamily: 'Motiva Sans',
        }
    },
    time: {
        useUTC: false
    },
    title: {
        text: 'Team multiplier over time'
    },
    xAxis: {
        type: 'datetime',
    },
    yAxis: {
        title: {
            text: 'Multiplier'
        },
        gridLineWidth: 0,
        plotLines: [{
            width: 1,
            color: '#808080'
        }]
    },
    plotOptions:
    {
        series:
        {
            marker:
            {
                enabled: false
            }
        }
    },
    tooltip:
    {
        shared: true,
        split: false,
    },
    series: [{
        name: 'Hare',
        color: '#d0d3cf',
    }, {
        name: 'Tortoise',
        color: '#448e64',
    }, {
        name: 'Corgi',
        color: '#d7a318',
    }, {
        name: 'Cockatiel',
        color: '#447491',
    }, {
        name: 'Pig',
        color: '#cf3a22',
    }]
});

const OriginalUpdateTeamScoresWithData = window.UpdateTeamScoresWithData;

window.UpdateTeamScoresWithData = function UpdateTeamScoresWithData( data )
{
    OriginalUpdateTeamScoresWithData( data );

    const time = Date.now();

    for ( var i = 0; i < data.scores.length; i++ )
	{
        try {
        var oTeamScore = data.scores[i];

        chart.series[ oTeamScore.teamid - 1 ].addPoint( [ time, parseFloat( oTeamScore.score_dist ) ], false );

        multiplier.series[oTeamScore.teamid - 1 ].addPoint( [time, parseFloat(oTeamScore.current_multiplier) ], false);
        } catch (e) {}
    }
    try {
        chart.redraw();
        multiplier.redraw();
    } catch (e) {}
};