Arrange and conceal legendary items based on their values using Chartjs in Angular

Question

Arrange and conceal legendary items based on their values using Chartjs in Angular

Is there a way to hide the legend or not display it when the value supplied is 0, and also order items in ascending order?

export class DoughnutChartComponent {

  doughnutChartLabels: Label[] = ['CR1', 'CR2', 'CR3', 'CR4', 'CR5', 'BOX', 'APP', 'Center 8', 'Center 9'];
  doughnutChartData: number [] = [55, 25, 20, 0, 54, 33, 0, 70, 88];
  doughnutChartOptions: ChartOptions = { legend: {
      display: true,
      position: 'right',
      fullWidth:false,
      reverse: false,
      labels: {
        usePointStyle: true,
        boxWidth: 10,
        padding: 7,
        fontSize: 18,
        fontColor: '#003457',
        fontStyle: 'bold',
      },
      },
     cutoutPercentage: 70,
    };
  doughnutChartType: ChartType = 'doughnut';
  doughnutChartColor: Colors[] = [{
    backgroundColor: [
      '#2E9FE0',
      '#9CCA32',
      '#255FCC',
      '#B746A6',
      '#FF9232',
      '#03B075',
      '#E5D844',
      '#45D2E4',
      '#E0489A'
    ]
  }] ;
}

I have been searching for a solution to this issue without success. Any help would be greatly appreciated.

angular typescript chart.js donut-chart

Answer 1

Answer №1

If you want to customize the legend labels in your chart using chart.js, you can utilize the filter function as demonstrated below:

var options = {
  type: 'doughnut',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
      label: '# of Votes',
      data: [12, 19, 3, 5, 2, 0],
      borderWidth: 1,
      backgroundColor: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"]
    }]
  },
  options: {
    legend: {
      labels: {
        filter: (legendItem, chartData) => {
          const index = chartData.labels.indexOf(legendItem.text)
          return chartData.datasets[0].data[legendItem.index] !== 0
        }
      }
    }
  }
}

var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);

<body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js" integrity="sha512-hZf9Qhp3rlDJBvAKvmiG+goaaKRZA6LKUO35oK6EsM0/kjPK32Yw7URqrq3Q+Nvbbt8Usss+IekL7CRn83dYmw==" crossorigin="anonymous"></script>
</body>

Answer 2

If you want to customize the legend labels in your chart using chart.js, you can utilize the filter function as demonstrated below:

var options = {
  type: 'doughnut',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
      label: '# of Votes',
      data: [12, 19, 3, 5, 2, 0],
      borderWidth: 1,
      backgroundColor: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"]
    }]
  },
  options: {
    legend: {
      labels: {
        filter: (legendItem, chartData) => {
          const index = chartData.labels.indexOf(legendItem.text)
          return chartData.datasets[0].data[legendItem.index] !== 0
        }
      }
    }
  }
}

var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);

<body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js" integrity="sha512-hZf9Qhp3rlDJBvAKvmiG+goaaKRZA6LKUO35oK6EsM0/kjPK32Yw7URqrq3Q+Nvbbt8Usss+IekL7CRn83dYmw==" crossorigin="anonymous"></script>
</body>

Answer 3

Answer №2

You can accomplish this by using Array.filter() followed by Array.sort().

To simultaneously process doughnutChartLabels and doughnutChartData, you should wrap labels and values into objects first, and then unwrap them with Array.map().

You can achieve this by adding the following constructor to the DoughnutChartComponent:

constructor() {
  const temp = doughnutChartData
    .map((value, index) => ({ label: doughnutChartLabels[index], value: value }))
    .filter(obj => obj.value > 0)
    .sort((obj1, obj2) => obj1.value - obj2.value);
  doughnutChartLabels = temp.map(obj => obj.label);
  doughnutChartData = temp.map(obj => obj.value);
}

Answer 4

You can accomplish this by using Array.filter() followed by Array.sort().

To simultaneously process doughnutChartLabels and doughnutChartData, you should wrap labels and values into objects first, and then unwrap them with Array.map().

You can achieve this by adding the following constructor to the DoughnutChartComponent:

constructor() {
  const temp = doughnutChartData
    .map((value, index) => ({ label: doughnutChartLabels[index], value: value }))
    .filter(obj => obj.value > 0)
    .sort((obj1, obj2) => obj1.value - obj2.value);
  doughnutChartLabels = temp.map(obj => obj.label);
  doughnutChartData = temp.map(obj => obj.value);
}

Arrange and conceal legendary items based on their values using Chartjs in Angular

Answer №1

Answer №2

Similar questions

How to simulate keyboard events when a dropdown list is opened in an Angular application

Extracting Information from a Table in Angular 7

The parent class has not been specified

Server-Side Rendering will occur exclusively for the `/` url, but only upon reloading the landing page. This setup utilizes Angular 16, implements Lazy Loading, and runs

AgGrid's magical dropdown feature

Discovering the clicked element within a QueryList<ElementRef> in Angular

Issues with HttpTestingController's expectOne method arise when the actual request is contained within a promise

angular contains vulnerabilities of a moderate severity level

Utilizing Chart.js to extract and display specific data values from an external JSON file

document.addEventListener versus $().on

Struggling with inter-component communication in Angular without causing memory leaks

An issue has occurred: the property 'map' cannot be read as it is undefined

Having trouble with the disabled property in Angular 10? Learn how to properly use it and troubleshoot

Typescript gives you the ability to create a versatile writing interface that includes all

Issue with Angular 9 Json pipe not showing decimal values

Tips for passing data between two components in React Router and outlet without the need for higher order functions

Incorporate a boolean value into Ionic storage (Ionic 4) by adding a JSON object

Incorporate a new element into a dynamic, responsive form using Angular

What is the method for including a TabIndex property in a JSON file?

Can we destruct and type the properties of a function parameter object that are already known?