Forum Discussion

delphine_g's avatar
delphine_g
Regular Visitor
2 years ago
Solved

Is it possible to use Chart.JS to create a Power BI Custom visual ?

Hello, I would like to use the Chart.JS library to create my visual. To do this, I referred to this tutorial: https://medium.com/@jatin7gupta/adding-external-js-libraries-powerbi-custom-visuals-9b0...
Need Help
Tutorial Requests
  • gdelpuenteCinec's avatar
    gdelpuenteCinec
    2 years ago

    you should import the library

    import {Chart} from 'chart.js';

    create a private properties for the Visual class

    private myChart: Chart;

    and then at the end of your code change that chart constant to

    var ctx = 'canvasId';
        if(this.myChart)
            this.myChart.destroy();
        this.myChart = new Chart(ctx, {
            type: 'bar',
            data: barChartData,
.....
})

     with your graph configuration

gdelpuenteCinec's avatar
gdelpuenteCinec
Helper I
2 years ago

you should import the library

import {Chart} from 'chart.js';

create a private properties for the Visual class

private myChart: Chart;

and then at the end of your code change that chart constant to

var ctx = 'canvasId';
        if(this.myChart)
            this.myChart.destroy();
        this.myChart = new Chart(ctx, {
            type: 'bar',
            data: barChartData,
.....
})

 with your graph configuration

delphine_g's avatar
delphine_g
Regular Visitor
2 years ago

The import was wrong :

import {Chart} from 'chart.js';

I change it for :

import Chart from "chart.js/auto";

 And with the rest of your solution it worked !
Thank you 😁