How to add a link to a pie chart

Ionic Framework
1

Hi, I’m creating an app with the tabs template in ionic with angular.
I’ve added chart.js and created a pie chart
I’m now trying to add a link to each part of the pie chart, so when I press the different parts I get send to the corresponding page, where the user can read more
I’ve tried googling, and I found a lot of user used getElementAtEvent() but not in a angular or ionic setting, so I can’t get it to work (and also they didn’t use it to link to a new page, simply to highlight the different parts)
My code in my tab2.page.ts looks like this (this is just the simple pie chart, since I haven’t found any code that was close enough to work for me to include it)

import { Component, ViewChild } from '@angular/core';
import { Chart } from 'chart.js';

@Component({
  selector: 'app-tab2',
  templateUrl: 'tab2.page.html',
  styleUrls: ['tab2.page.scss']
})
export class Tab2Page {

  @ViewChild('doughnutChart',{static: true}) doughnutChart;

  doughnuts: any;
  colorArray: any;

  constructor() {}

  ionViewDidEnter() {
    this.createdoughnutChart();
};

  createdoughnutChart() {
    this.doughnuts = new Chart(this.doughnutChart.nativeElement, {
      type: 'doughnut',
      data: {
        labels: ['Uge 0', 'Uge 1', 'Uge 2', 'Uge 3'],
        datasets: [{
          label: 'Viewers in millions',
          data: [2.5, 3.8, 5, 6.9],
          backgroundColor: ['#3F55D1', '#001FD1', '#2E3E99', '#000C52'], // array should have same number of elements as number of dataset
          borderColor: ['#3F55D1', '#001FD1', '#2E3E99', '#000C52'],// array should have same number of elements as number of dataset
          borderWidth: 1
        }]
      },
      options: {
      }
    });
  }
}

Has anyone tried something similar or can help me with some documentation on how to proceed?

I found an example from https://bit.ly/37qvEyC which I feel get’s really close to what I’m looking for, but it is not used in an ionic setting, and being new to ionic I’m not quite sure how to implement it…
The example coded modified and added to my code:

import { Component, ViewChild } from '@angular/core';
import { Chart } from 'chart.js';

var canvasP = document.getElementById("pieChart");

@Component({
  selector: 'app-tab2',
  templateUrl: 'tab2.page.html',
  styleUrls: ['tab2.page.scss']
})
export class Tab2Page {

  @ViewChild('doughnutChart',{static: true}) doughnutChart;

  doughnuts: any;
  colorArray: any;

  constructor() {}

  ionViewDidEnter() {
    this.createdoughnutChart();
};

  createdoughnutChart() {
    this.doughnuts = new Chart(this.doughnutChart.nativeElement, {
      type: 'doughnut',
      data: {
        labels: ['Uge 0', 'Uge 1', 'Uge 2', 'Uge 3'],
        datasets: [{
          label: 'Viewers in millions',
          data: [2.5, 3.8, 5, 6.9],
          backgroundColor: ['#3F55D1', '#001FD1', '#2E3E99', '#000C52'], // array should have same number of elements as number of dataset
          borderColor: ['#3F55D1', '#001FD1', '#2E3E99', '#000C52'],// array should have same number of elements as number of dataset
          borderWidth: 1
        }]
      },
      options: {
        onClick: function(e){
          var element = this.getElementAtEvent(e);
      
          // changes only the color of the active object
          this.active[0]._chart.config.data.datasets[0].backgroundColor = "red";
      
          if(element.length > 0){
                  alert("Clicked on a bar with index: "+element[0]._index+". Now this bar should be marked as active.");
            }
          }
         
      }
    });
  }
}

canvasP.onclick = function(e) {
  var slice = myPieChart.getElementAtEvent(e);
  if (!slice.length) return; // return if not clicked on slice
  var label = slice[0]._model.label;
  switch (label) {
     // add case for each label/slice
     case 'Uge 0':
        alert('clicked on uge 0');
        window.open('www.example.com/foo');
        break;
      case 'Uge 1':
        alert('clicked on uge 1');
        window.open('www.example.com/bar');
        break;
      case 'Uge 2':
        alert('clicked on uge 2');
        window.open('www.example.com/bar');
        break;
      case 'Uge 3':
        alert('clicked on uge 3');
        window.open('www.example.com/bar');
        break; 
  }
}
2

Hello,
Which ionic version you are using?. If you want to open the link then use In App Browser.

ex. of click event

<ion-button (click)="myFunction()">Hello</ion-button>

in the ts file:

myFunction(){
  console.log("OK");
}
3

If you don’t get any better answers, I would look at ngx-charts. What you’re effectively asking how to do is to Angularize a pretty complicated library in Chart.js, and that’s no trivial task even for an Angular expert. It might be easier in the long run to go with a library that is already using Angular for the rendering. Try this: open this demo and enable Chrome’s developer tools so that you can watch the JavaScript console. Then click on the various pie slices. You should see that it already supports what you are trying to do out of the box with the (select) emitter.

4

@rapropos Thank you, I will check it out - starting to understand that it isn’t as simple as I thought it would be :sweat_smile: