Estoy tratando de hacer graficas en Chartjs en conjunto con Gatsbyjs, pero cuando ejecuto mi ruta en donde se encuentra la grafica que quiero mostrar me aparece el error 'TypeError: Cannot read property 'getContext' of null' debido a esto no me puede mostrar la gráfica. Aquí dejo mi código
const jsonfile = {
"jsonarray": [
{
"Anio":2016,
"Bovino":"48,148.76",
"Porcino":"10,153.27"
},
{
"Anio":2017,
"Bovino":"45,501.43",
"Porcino":"10,801.30"
},
{
"Anio":2018,
"Bovino":"46,365.48",
"Porcino":"11,010.21"
},
{
"Anio":2019,
"Bovino":"44,627.29",
"Porcino":"10,228.82"
}
]
};
const labels = jsonfile.jsonarray.map(function(e) {
return e.Anio;
});
const dataBovino = jsonfile.jsonarray.map(function(e) {
return +e.Bovino.replace(',','');
});
const dataPorcino = jsonfile.jsonarray.map(function(e) {
return +e.Porcino.replace(',','');
});
const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');
const config = {
type: 'bar',
data: {
labels: labels,
datasets: [{
label: 'Bovino',
data: dataBovino,
backgroundColor: 'rgba(0, 119, 204, 0.3)'
},
{
label: 'Porcino',
data: dataPorcino,
backgroundColor: 'rgba(230, 119, 204, 0.3)'
}]
}
};
const chart = new Chart(ctx, config);
export default function Grafica() {
return <div align='center'>
<h2>Producción de leche</h2>
<Bar
data={{dataBovino,dataPorcino}}
width={100}
height={40}
options={chart}
/>
</div>
}
Así es la forma en como se puede mostrar una grafica de chart e gatsby, espero puedan ayudarme, desconozco mi error
Supongo que en esto se encuentra en error const ctx = canvas.getContext('2d'); en realidad no se que suceda, porque en html este codigo si funciona bien, pero yo necesito que este chart vaya con gatsby
<canvas>
en tu html generado, porquedocument.querySelector('canvas')
no te está retornando nada.