Skip to main content
cancel
Showing results for 
Search instead for 
Did you mean: 

Enhance your career with this limited time 50% discount on Fabric and Power BI exams. Ends August 31st. Request your voucher.

Reply
chtsang
Frequent Visitor

Power Bi Pie chart syntax and coding

Hello, I am trying to develop a visual for power bi in the form of a pie chart. Problem is i couldnt find a toutorial that teaches so and the ones I could find are using syntax and outdated d3 versions. I saw one made by user "@dm-p" and tried to copy his code. It works but now i couldn't figure out how to expand it, add data from my power bi dataset or how can i manipulate it. Any help would be greatly appreciated. 

 

Source code is as follows

 

'use strict';

import 'core-js/stable';
import './../style/visual.less';
import powerbi from 'powerbi-visuals-api';
import VisualConstructorOptions = powerbi.extensibility.visual.VisualConstructorOptions;
import VisualUpdateOptions = powerbi.extensibility.visual.VisualUpdateOptions;
import IVisual = powerbi.extensibility.visual.IVisual;
import EnumerateVisualObjectInstancesOptions = powerbi.EnumerateVisualObjectInstancesOptions;
import VisualObjectInstance = powerbi.VisualObjectInstance;
import DataView = powerbi.DataView;
import VisualObjectInstanceEnumerationObject = powerbi.VisualObjectInstanceEnumerationObject;

import { VisualSettings } from './settings';
import * as d3 from 'd3';

export class Visual implements IVisual {
    [xstring]: any;
    private svgd3.Selection<anyanyanyany>;
    private visualSettingsVisualSettings;
  
    constructor(optionsVisualConstructorOptions) {
        console.log('Visual constructor'options);

            this.svg = d3
                .select(options.element)
                .append('svg')
                .classed('pieChart'true);

    }

    public update(optionsVisualUpdateOptions) {
        let dataViewDataView = options.dataViews[0];
        this.visualSettings = VisualSettings.parse<VisualSettings>(dataView);
  
        console.log('Visual update'options);
  
            console.log('Removing elements...');
            this.svg.selectAll('*').remove();

            console.log('Resolving dimensions...');
            let width = options.viewport.width,
                height = options.viewport.height,
                radius = Math.min(widthheight) / 2;
      
            console.log('Setting and appending SVG elements...');
            this.svg
                .attr('width'width)
                .attr('height'height);
            
            let container = this.svg
                .append('g')
                    .attr('transform''translate(' + width / 2 + ',' + height / 2 + ')');

            interface IData {
                categorystring;
                valuenumber;
                colorstring;
            }

            console.log('Assigning data...');
            let dataIData[] = [
                { category: 'a'value: 9color: 'red' },
                { category: 'b'value: 20color: 'blue' },
                { category: 'c'value: 30color: 'green'},
                { category: 'd'value: 8color: 'yellow' },
                { category: 'e'value: 12color: 'orange' }
            ];
             
            console.log('Creating pie function...');
            let pie = d3.pie<IData>()
                .value((d=> d.value);

            console.log('Drawing chart...');
            container
                .selectAll('*')
                .data(pie(data))
                .enter()
                .append('path')
                    .attr('d'd3.arc<d3.PieArcDatum<IData>>()
                        .innerRadius(0)
                        .outerRadius(radius)
                    )
                    .attr('fill', (d=> d.data.color)
                    .attr('stroke''black')
                    .style('stroke-width''2px')
                    .style('opacity'0.7);

            console.log('Rendered!');
        
    }

    private static parseSettings(dataViewDataView😞 VisualSettings {
        return VisualSettings.parse(dataViewas VisualSettings;
    }

    public enumerateObjectInstances(optionsEnumerateVisualObjectInstancesOptions😞 VisualObjectInstance[] | VisualObjectInstanceEnumerationObject {
        return VisualSettings.enumerateObjectInstances(this.settings || VisualSettings.getDefault(), options);
    }
}

 

 
And this is what it looks like:
 
chtsang_1-1615277365707.png

Any help is greatly appreciated

 
 
2 ACCEPTED SOLUTIONS
v-lionel-msft
Community Support
Community Support

Hi @chtsang ,

 

Learn how to develop your own Power BI visual using the circle card visual as an example in Power BI...

Please refer to the custom visual development steps.

 

Best regards,
Lionel Chen

If this post helps, then please consider Accept it as the solution to help the other members find it more quickly.

View solution in original post

are there other sites? it doesnt really help much

View solution in original post

2 REPLIES 2
v-lionel-msft
Community Support
Community Support

Hi @chtsang ,

 

Learn how to develop your own Power BI visual using the circle card visual as an example in Power BI...

Please refer to the custom visual development steps.

 

Best regards,
Lionel Chen

If this post helps, then please consider Accept it as the solution to help the other members find it more quickly.

are there other sites? it doesnt really help much

Helpful resources

Announcements
July 2025 community update carousel

Fabric Community Update - July 2025

Find out what's new and trending in the Fabric community.

July PBI25 Carousel

Power BI Monthly Update - July 2025

Check out the July 2025 Power BI update to learn about new features.