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

Maikeru — Fri, 21 Sep 2018 04:16:09 GMT

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();
        }
    }
}

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

v-viig — Fri, 21 Sep 2018 07:16:14 GMT

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

Ignat Vilesov,

Software Engineer

Microsoft Power BI Custom Visuals

pbicvsupport@microsoft.com

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

Maikeru — Fri, 21 Sep 2018 09:21:26 GMT

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.

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

v-viig — Mon, 24 Sep 2018 07:26:14 GMT

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

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

Maikeru — Tue, 25 Sep 2018 04:34:30 GMT

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

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

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

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

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

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

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