Introducing ReUI:Open-source UI components and apps built with React, Next.js and Tailwind CSS
Browse ReUI 
Chartjs Pie - Failed to create chart: can't acquire context from the given item
Hi
I was trying to use charts pie chart, I keep getting the error “Failed to create chart: can’t acquire context from the given item” in my browser console. Other charts works expect for Pie chart
Pls advise on what to do to fix this. see my code below
function getRandom(min = 1, max = 100) {
return Math.floor(Math.random() * (max - min) + min);
}
function generateRandomData(min = 1, max = 100, count = 10) {
var arr = [];
for (var i = 0; i < count; i++) {
arr.push(getRandom(min, max));
}
return arr;
}
var ctx = document.getElementById("skt_chartjs_3");
// Define colors
var primaryColor = KTUtil.getCssVariableValue("--kt-primary");
var dangerColor = KTUtil.getCssVariableValue("--kt-danger");
var successColor = KTUtil.getCssVariableValue("--kt-success");
var warningColor = KTUtil.getCssVariableValue("--kt-warning");
var infoColor = KTUtil.getCssVariableValue("--kt-info");
// Define fonts
var fontFamily = KTUtil.getCssVariableValue("--bs-font-sans-serif");
// Chart labels
const labels = ["January", "February", "March", "April", "May"];
// Chart data
const data = {
labels: labels,
datasets: [
{
label: "Dataset 1",
data: generateRandomData(1, 100, 5),
backgroundColor: [primaryColor, dangerColor, successColor, warningColor, infoColor]
},
]
};
// Chart config
const config = {
type: "pie",
data: data,
options: {
plugins: {
title: {
display: false,
}
},
responsive: true,
},
defaults:{
global: {
defaultFont: fontFamily
}
}
};
// Init ChartJS -- for more info, please visit: https://www.chartjs.org/docs/latest/
var myChart = new Chart(ctx, config);Replies (5)
Glad it works. Let us know if you need any more help.
Thanks
Your Support Matters!
We will highly appreciate your Metronic Review on Themeforest.
Please go to Themeforest Downloads page, select Metronic & leave your feedback.
Does the canvas' element exist?
<canvas width="400" height="400"></canvas>Thanks
This it works now
Hi,
Could you please try to add this? getContext('2d');
var ctx = document.getElementById("skt_chartjs_3").getContext("2d");
//.........
var myChart = new Chart(ctx, config);Thanks
I have, I however I got Uncaught TypeError: document.getElementById(...).getContext is not a function logged in the browser console and the pie chart did not render
