cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
Maikeru Regular Visitor
Regular Visitor

Custom Visual: How to add Data Label to a BarChart?

Hi 

 

I am currently building a Custom Visuals inspired from the Bar Chart sample and I am trying to figure out a way to display the Data labels on top of each bar (Outside End).

 

Appreciate any help/reference on this topic.

 

module powerbi.extensibility.visual {
    function visualTransform(options: VisualUpdateOptions, host: IVisualHost) {
        let dataViews = options.dataViews;

        let dataInfo = {
            dataPoints: [],
            dataMax: 0
        };

        if (!dataViews
            || !dataViews[0]
            || !dataViews[0].categorical
            || !dataViews[0].categorical.categories
            || !dataViews[0].categorical.categories[0].source
            || !dataViews[0].categorical.values)
            return dataInfo;

        let categorical = dataViews[0].categorical;
        let category = categorical.categories[0];
        let dataValue = categorical.values[0];

        let dataPoints = [];
        let dataMax: number;

        for (let i = 0, len = Math.max(category.values.length, dataValue.values.length); i < len; i++) {
            dataPoints.push({
                category: <string>category.values[i],
                value: dataValue.values[i]
            });
        }
        dataMax = <number>dataValue.maxLocal;

        return {
            dataPoints: dataPoints,
            dataMax: dataMax
        };
    }

    export class Visual implements IVisual {
        private host: IVisualHost;
        private svg: d3.Selection<SVGElement>;
        private barContainer: d3.Selection<SVGElement>;

        constructor(options: VisualConstructorOptions) {
            this.host = options.host;
            this.svg = d3.select(options.element)
                .append('svg')
                .classed('barChart', true);

            this.barContainer = this.svg
                .append('g')
                .classed('barContainer', true);
        }

        public update(options: VisualUpdateOptions) {
            let transformedData = visualTransform(options, this.host);
            let width = options.viewport.width;
            let height = options.viewport.height;

            this.svg.attr({
                width: width,
                height: height
            });

            let yScale = d3.scale.linear()
                .domain([0, transformedData.dataMax])
                .range([height, 0]);

            let xScale = d3.scale.ordinal()
                .domain(transformedData.dataPoints.map(dataPoint => dataPoint.category))
                .rangeRoundBands([0, width], 0.1, 0.2);

            let bars = this.barContainer
                .selectAll('.bar')
                .data(transformedData.dataPoints);

            bars.enter()
                .append('rect')
                .classed('bar', true);

            bars.attr({
                width: xScale.rangeBand(),
                height: data => height - yScale(<number>data.value),
                x: data => xScale(data.category),
                y: data => yScale(<number>data.value)
            });

            bars.exit().remove();
        }
    }
}
4 REPLIES 4
Moderator v-viig
Moderator

Re: Custom Visual: How to add Data Label to a BarChart?

Please use tooltipService to render tooltips. You can follow our documentation.

 

Ignat Vilesov,

Software Engineer

 

Microsoft Power BI Custom Visuals

pbicvsupport@microsoft.com

Highlighted
Maikeru Regular Visitor
Regular Visitor

Re: Custom Visual: How to add Data Label to a BarChart?

Thanks @v-viig!
I followed the online documentation and was able to add Tooltips to my visual.

However the requirement is to display the data Labels without having to hover each bar.

 

Moderator v-viig
Moderator

Re: Custom Visual: How to add Data Label to a BarChart?

TooltipService is to show tooltip on hover event. To show labels all the time we would recommend to develop own Label component.

 

Ignat Vilesov,

Software Engineer

 

Microsoft Power BI Custom Visuals

pbicvsupport@microsoft.com

Maikeru Regular Visitor
Regular Visitor

Re: Custom Visual: How to add Data Label to a BarChart?

Thank you @v-viig, I will look further into this. Appreciate your time.

Helpful resources

Announcements
Ask Amir Anything

Exclusive LIVE Community Event No. 2 – Ask Amir Anything

Next in our Triple A series: Ask Amir Netz questions about the latest updates, features and future.

October 2019 Community Highlights

October 2019 Community Highlights

October was a busy month in the community. Read the recap article to learn about some of the events and content.

New Solution Badges

New Solution Badges

Two waves of brand new solution badges are coming! Read the article for more information on our new community badges.

Analytics in Azure virtual event

Analytics in Azure virtual event

Experience a limitless analytics service built to ingest, prep, manage, and serve data for immediate use in Power BI.

Users Online
Currently online: 53 members 989 guests
Please welcome our newest community members: