Multiple Chart.js charts on a single page, from 1 function but different data

Question

Thank you for viewing my question.

I have multiple charts I need to display on a single page, the values need to be in the HTML, hence the JavaScript retrieving them.

The issue I have is both charts are retrieving the same data, caused by querySelectorAll('.myChart-values .value') I need to fetch only the values in the bulleted list under the chart, I found the following question: Chart.js: One function for multiple graphs but the code is slightly different to mine. I believe I need to iterate over each chart which I'm doing here for (const chart of Array.from(charts)) { then could I do something like closest or children to retrieve the relevant values? or perhaps I need to put a data attribute on the <canvas class="myChart"></canvas>.

Help with this would be most grateful.

let chartDataValues = [];

const chartValues = document.querySelectorAll('.myChart-values .value');
for (const chartValue of Array.from(chartValues)) {
    chartDataValues.push(chartValue.innerHTML);
}

const labels = [
    'January',
    'February',
    'March',
    'April',
    'May',
    'June',
  ];

const data = {
    labels: labels,
    datasets: [{
        data: chartDataValues,
        backgroundColor: [
            'rgba(17, 39, 61, 1)',
            'rgba(2, 113, 184, 1)',
            'rgba(196, 226, 247, 1)',
            'rgba(0, 159, 227, 1)',
            'rgba(0, 130, 180, 1)',
            'rgba(234, 236, 236, 1)'
        ]
    }]
};

const config = {
    type: 'bar',
    data: data,
    options: {
        plugins: {
            legend: {
                display: false
            },
        },
        scales: {
            x: {
                grid: {
                    display: false
                }
            },
            y: {
                beginAtZero: true,
                grid: {
                    display: false
                }
            }
        }
    }
};

const charts = document.querySelectorAll('.myChart');

for (const chart of Array.from(charts)) {
  const myChart = new Chart(
    chart,
    config
)
}

<script src="https://cdn.jsdelivr.net/npm/chart.js@3.7.1/dist/chart.min.js"></script>
<!-- Chart JS -->
<section class="section--padding">
    <div class="container">
        <div class="row">
            <div class="col-md-8">
                <div class="content">
                    <canvas class="myChart"></canvas>
                </div>
            </div>
            <div class="col-md-4">
                <div class="content">
                    <ul class="myChart-values">
                        <li>
                            <span class="value">10</span>%
                        </li>
                        <li>
                            <span class="value">16</span>%
                        <li>
                            <span class="value">10</span>%
                        </li>
                        <li>
                            <span class="value">10</span>%
                        </li>
                        <li>
                            <span class="value">14</span>%
                        </li>
                        <li>
                            <span class="value">18</span>%
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Chart JS -->
<section class="section--padding">
    <div class="container">
        <div class="row">
            <div class="col-md-6">
                <div class="content">
                    <canvas class="myChart"></canvas>
                </div>
            </div>
            <div class="col-md-6">
                <div class="content">
                    <ul class="myChart-values">
                        <li>
                            <span class="value">2</span>%
                        </li>
                        <li>
                            <span class="value">10</span>%
                        <li>
                            <span class="value">10</span>%
                        </li>
                        <li>
                            <span class="value">20</span>%
                        </li>
                        <li>
                            <span class="value">30</span>%
                        </li>
                        <li>
                            <span class="value">15</span>%
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</section>

Answer 1

As you said you would to have differents data, you can say

const data1 = {
labels: labels,
datasets: [{
    data: chartDataValues,
    backgroundColor: [
        'rgba(17, 39, 61, 1)',
        'rgba(2, 113, 184, 1)',
        'rgba(196, 226, 247, 1)',
        'rgba(0, 159, 227, 1)',
        'rgba(0, 130, 180, 1)',
        'rgba(234, 236, 236, 1)'
    ]
}]

};

and

const data2 = {
    labels: labels,
    datasets: [];

Then what you need is to make two config. Config1 and Config2. With data: data1 for Config1, and data: data2 for config2.