here is the updated code from above.
Module.register("MMM-Chart", {
defaults: {
width: 200,
height: 200,
chartConfig: {
type: 'bar',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
}
},
getScripts: function () {
return ["modules/" + this.name + "/node_modules/chart.js/dist/Chart.min.js"]; // use right file name
// note that YOU must install chartjs into your project
// need package.json
},
start: function () {
this.config = Object.assign({}, this.defaults, this.config);
Log.info("Starting module: " + this.name);
},
getDom: function () {
console.log("*****" + JSON.stringify(this.config.chartConfig));
// Create wrapper element
const wrapperEl = document.createElement("div");
var e =document.createElement("div"); // add div to give size to chart area
//e.setAttribute("style", "position: relative; display: inline-block;"); // position already set
e.style.width = this.config.width+"px"; // set right style attribute with size in pixels
e.style.height = this.config.height+"px"; // set right style attribute with size in pixels
wrapperEl.appendChild(e);
// Create chart canvas
const chartEl = document.createElement("canvas");
// Append chart
e.appendChild(chartEl);
// Init chart.js
this.chart = new Chart(chartEl, this.config.chartConfig);
return wrapperEl;
}
});
