how do I set the backgroundClolor of an element using an attribute from a data variable?
"backgroundColor": ["Farbe"], won’t work …
I. e. how do I access the information provided in the variable?
Thanks a lot!
https://jsfiddle.net/zre6t1jn/
var mydata = [
{ "Thema": "Thema 1", "Anzahl": 50, "Farbe": "#006aaa" },
{ "Thema": "Thema 2", "Anzahl": 10, "Farbe": "#0071ae" },
{ "Thema": "Thema 3", "Anzahl": 10, "Farbe": "#0077b1" },
{ "Thema": "Thema 4", "Anzahl": 5, "Farbe": "#007cb3" }
];
var lineCtx = document.getElementById("myChartTree");
var myLineChart = new Chart(lineCtx,
{
"type": "treemap",
"options": {
"responsive": true,
"plugins": {
"title": {
"display": false,
},
"legend": {
"display": false
}
}
},
"data": {
"datasets": [{
"tree": mydata,
"key": "Anzahl",
"groups": ["Thema"],
"borderWidth": 2,
"borderColor": "white",
---> **"backgroundColor": "#cccccc",** <---
"spacing": 0,
"labels": {
"display": true,
"font": { "size": 11 }
}
}]
}
}
);
>Solution :
You can use a scriptable option for this as the background color:
var mydata = [{
"Thema": "Thema 1",
"Anzahl": 50,
"Farbe": "#006aaa"
},
{
"Thema": "Thema 2",
"Anzahl": 10,
"Farbe": "#0071ae"
},
{
"Thema": "Thema 3",
"Anzahl": 10,
"Farbe": "#0077b1"
},
{
"Thema": "Thema 4",
"Anzahl": 5,
"Farbe": "#007cb3"
}
];
var lineCtx = document.getElementById("myChartTree");
var myLineChart = new Chart(lineCtx, {
"type": "treemap",
"options": {
"responsive": true,
"plugins": {
"title": {
"display": false,
},
"legend": {
"display": false
}
}
},
"data": {
"datasets": [{
"tree": mydata,
"key": "Anzahl",
"groups": ["Thema"],
"borderWidth": 2,
"borderColor": "white",
"backgroundColor": (ctx) => (ctx.dataIndex ? mydata[ctx.dataIndex].Farbe : 'gray'),
"spacing": 0,
"labels": {
"display": true,
"font": {
"size": 11
}
}
}]
}
}
);<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>=
<script src="https://cdn.jsdelivr.net/npm/chartjs-chart-treemap@2.0.2/dist/chartjs-chart-treemap.js"></script>
<div style="width:auto;max-width: 100%;height:200px;">
<canvas id="myChartTree" width="507px" height="200px"></canvas>
</div>