Chartjs-Define backgroundColor from data in chartJS

by

0👍

✅

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>

Leave a comment