I am trying to select six divs from my HTML and render a chart from https://apexcharts.com/javascript-chart-demos/radialbar-charts/basic/ which uses javascript
let options = {
series: [70],
chart: {
height: 350,
type: "radialBar",
},
plotOptions: {
radialBar: {
hollow: {
size: "70%"
}
}
},
labels: ["Cricket"]
};
let charts = document.querySelectorAll(".chart");
charts.forEach((chart) => {
let chartInstance = new ApexCharts(chart, options);
chartInstance.render();
});
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<div class="chart"></div>
<div class="chart"></div>
<div class="chart"></div>
<div class="chart"></div>
<div class="chart"></div>
<div class="chart"></div>
However, only my first div receives this chart, the other five do not receive and I get it in my console:
Uncaught SyntaxError: Identifier ‘options’ has already been declared (at (index):641:36)