How to I optimise these javscript options which is used multiple times on different chart.js graphs?

Question

I am running multiple chart.js graphs on one page, each using the same option settings. Rather than coding it every single time, what is the best way to only include it once and reference it? Putting it in a variable or function makes sense, but all of the code is on the multiple lines so I a not sure how to save it into something that can be re-used.

var progressStackAll = document.getElementById('progressAllPupilsStacked');
new Chart(progressStackAll, {
    type: 'horizontalBar',
    data: {
        labels: ['All'],
        datasets: [{
            label: 'Much Lower',
            data: [<?= number_format($data['progress']['muchLowerPercentage'],0)?>],
            backgroundColor: '#007bff',
            borderWidth: 1,
            fill: true
        }, {
            label: 'Lower',
            data: [<?= number_format($data['progress']['lowerPercentage'],0)?>],
            backgroundColor: '#D36BE7',
            borderWidth: 1,
            fill: true
        }, {
            label: 'Expected',
            data: [<?= number_format($data['progress']['expectedPercentage'],0)?>],
            backgroundColor: '#FF6BB3',
            borderWidth: 1,
            fill: true
        }, {
            label: 'Higher',
            data: [<?= number_format($data['progress']['higherPercentage'],0)?>],
            backgroundColor: '#FF917E',
            borderWidth: 1,
            fill: true
        }, {
            label: 'Much Higher',
            data: [<?= number_format($data['progress']['muchHigherPercentage'],0)?>],
            backgroundColor: '#FFC65F',
            borderWidth: 1,
            fill: true
        }]
    },
    options: {
        tooltips: {enabled: false},
        maintainAspectRatio: false,
        legend: {
            display: true,
            labels: {
                display: true,
            }
        },
        scales: {
            yAxes: [{
                stacked: true,
                ticks: {
                    beginAtZero: true,
                    fontSize: 10,
                    max: 80,
                    fontColor: "rgba(171, 167, 167,0.9)",
                },
                gridLines: {
                    display: true,
                    color: 'rgba(171, 167, 167,0.2)',
                    drawBorder: false
                },
                
            }],
            xAxes: [{
                stacked: true,
                ticks: {
                    beginAtZero: true,
                    fontSize: 11,
                    fontColor: "rgb(171, 167, 167,0.9)",
                },
                gridLines: {
                    display: true,
                    color: 'rgba(171, 167, 167,0.2)',
                    drawBorder: false
                },
            }]
        }
    }
});

Answer 1

You can define your options object separately:

const chartOptions = {
    tooltips: {enabled: false},
    maintainAspectRatio: false,
    // ...
};

then use it where you need it:

new Chart(progressStackAll, {
    type: 'horizontalBar',
    // ...
    options: chartOptions,
});

Looking at your options, it seems unlikely that the Chart constructor modifies the object you give it. But if it did, you could just do a shallow copy:

new Chart(progressStackAll, {
    type: 'horizontalBar',
    // ...
    options: {...chartOptions},
});

If it changed one of the subobjects on options (again: this seems unlikely), you could do a deep copy or write a function that returns a new options object each time:

function createChartOptions() {
    return {
        tooltips: {enabled: false},
        maintainAspectRatio: false,
        // ...
    };
}

Then:

new Chart(progressStackAll, {
    type: 'horizontalBar',
    // ...
    options: createChartOptions(),
});