I am having this error in charts v3 chartjs-chart-treemap: fontColor does not exist in type 'ChartDataset<"treemap", TreemapDataPoint[]>

user_6074455 0
Viewed 340

I have a Angular 13 Chartjs 3.6 application that's given the above error in the following:

this.cryptoChart = new Chart(this.ctx, {
       type: 'treemap',   //'treemap',
       data: {
            datasets: [{
              tree: this.treeData,
              key: 'value',
              groups: ['coin'],
              spacing: 0.5,
              borderWidth: 1.5,
              *fontColor: 'Black',*
              borderColor: "grey"
            }],
          },
        options: {
                  maintainAspectRatio: false,
                  *legend: { display: false },*
                  tooltips: { enabled: false }
                
                }
      });

This is the full error message:

Type '{ tree: any; key: string; groups: string[]; spacing: number; borderWidth: number; fontColor: string; borderColor: string; }' is not assignable to type 'ChartDataset<"treemap", TreemapDataPoint[]>'.
  Object literal may only specify known properties, and 'fontColor' does not exist in type 'ChartDataset<"treemap", TreemapDataPoint[]>'.ts(2322)

A similar error occurs on options..legend property.

I also have: import Chart from 'chart.js/auto'; import {TreemapController, TreemapElement} from 'chartjs-chart-treemap'; AND in

 ngOnInit(){
    Chart.register(TreemapController, TreemapElement);
    this.coinChart = document.getElementById('coinChart');
    this.ctx = this.coinChart.getContext("2d");
    .......
    .......
    }

apparently I a missing a step in the integration....will appreciate any help.

chart.js angular treemap
1 Answers

Looking at the documentation of the treemap it doesnt support the fontColor property. To change the color of the labels you need to define it either in:

  • data.datasets[datasetIndex].labels.color
  • options.datasets.treemap.labels.color
  • options.elements.treemap.labels.color

Since it looks like you want it in the dataset, your datasets array would look like this:

datasets: [{
  tree: this.treeData,
  key: 'value',
  groups: ['coin'],
  spacing: 0.5,
  borderWidth: 1.5,
  labels: {
    color: 'black'
  }
  borderColor: "grey"
}],

On a side note your options object is also wrong, you are using V2 syntax in V3, the tooltip and legend config have been moved to the plugins namespace, for all changes you can read the migration guide

user_86829830
Related