Forum Discussion
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...
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
Hello,
Thank you for your answer.
Here's the Datarole/Mapping I used :
"dataRoles": [
{
"displayName": "Categories",
"name": "category",
"kind": "Grouping"
},
{
"displayName": "Right Values",
"name": "right_value",
"kind": "Measure"
},
{
"displayName": "Left Values",
"name": "left_value",
"kind": "Measure"
}
],
"dataViewMappings": [
{
"conditions": [
{
"category": {
"max": 1
},
"right_value": {
"max": 1
},
"left_value": {
"max": 1
}
}
],
"categorical": {
"categories": {
"for": {
"in": "category"
},
"dataReductionAlgorithm": {
"top": {}
}
},
"values": {
"select": [
{
"bind": {
"to": "right_value"
}
},
{
"bind": {
"to": "left_value"
}
}
]
}
}
}
],And this is the code I used for my visual Class :
export class Pyramid implements IVisual {
private target: HTMLElement;
private updateCount: number;
constructor(option : VisualConstructorOptions) {
console.log('Visual constructor', option);
this.target = option.element;
this.updateCount = 0;
if (typeof document !== "undefined") {
const new_p: HTMLElement = document.createElement("div");
const can: HTMLElement = document.createElement("canvas");
can.setAttribute("id", "canvasId");
new_p.appendChild(can);
this.target.appendChild(new_p);
}
}
public update(option : VisualUpdateOptions) {
const extracted_data = [] ;
if(option.dataViews
&& option.dataViews[0]
&& option.dataViews[0].categorical
&& option.dataViews[0].categorical.categories
&& option.dataViews[0].categorical.values
) {
const categoricalData = option.dataViews[0].categorical;
const category = categoricalData.categories[0] ;
const right_value = categoricalData.values[0];
const left_value = categoricalData.values[1];
for (let i = 0; i< category.values.length; i++){
extracted_data.push({
category: category.values[i],
rvalue: right_value.values[i], //blue values
lvalue: left_value.values[i] , //red values
});
}}
const labels = extracted_data.map(dataPoint => dataPoint.category);
const data = {
labels: labels,
datasets: [{
label: 'Right Data',
data: extracted_data.map(dataPoint => dataPoint.rvalue),
borderColor: '#33B0FF',
backgroundColor: '#33B0FF',
borderWidth: 1
},
{
label: 'Left Data',
data: extracted_data.map(dataPoint => dataPoint.lvalue * -1),
borderColor: '#FF33BD',
backgroundColor: '#FF33BD',
borderWidth: 1
}]
};
let d = (<any>window).Chart;
const chart = {
type: 'bar',
data: data,
options: {
inexAxis : 'y',
scales: {
x: {
stacked: true
},
y: {
beginAtZero: true,
stacked: true
}
}
},
};
}
}
Can you help me to find what's wrong here please ?
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
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 😁