How to add a link to a pie chart

@Scarletti wrote:

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?

Posts: 1

Participants: 1

Read full topic