There is a Chart.js plugin chartjs-plugin-datasource that makes it easy to load data from Excel files.
Let's suppose you have an Excel file as shown below, and it is saved as mydata.xlsx in the same directory as your HTML file:
+---------------+---------+----------+-------+-------+------+------+------+
| | January | February | March | April | May | June | July |
+---------------+---------+----------+-------+-------+------+------+------+
| Temperature | 7 | 7 | 10 | 15 | 20 | 23 | 26 |
+---------------+---------+----------+-------+-------+------+------+------+
| Precipitation | 8.1 | 14.9 | 41.0 | 31.4 | 42.6 | 57.5 | 36.0 |
+---------------+---------+----------+-------+-------+------+------+------+
Include Chart.js, SheetJS (js-xlsx) and chartjs-plugin-datasource in your page:
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/xlsx.full.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"> </script>
<canvas id="myChart"></canvas>
Then, specify mydata.xlsx in your script.
var ctx = document.getElementsById("myChart");
var chart = new Chart(ctx, {
type: 'bar',
data: {
datasets: [{
type: 'line',
yAxisID: 'temperature',
backgroundColor: 'transparent',
borderColor: 'rgb(255, 99, 132)',
pointBackgroundColor: 'rgb(255, 99, 132)',
tension: 0,
fill: false
}, {
yAxisID: 'precipitation',
backgroundColor: 'rgba(54, 162, 235, 0.5)',
borderColor: 'transparent'
}]
},
plugins: [ChartDataSource],
options: {
scales: {
yAxes: [{
id: 'temperature',
gridLines: {
drawOnChartArea: false
}
}, {
id: 'precipitation',
position: 'right',
gridLines: {
drawOnChartArea: false
}
}]
},
plugins: {
datasource: {
url: 'mydata.xlsx'
}
}
}
});