Display data labels outside bar

Adhoc
, , ,
#1

Hello Team,

I am using Helical Insight version 5.2.1. By default the data labels customization options include at the top, medium and bottom. But in my case I would like to display it outside the bars. How can we do this?

#2

Hello Netta,

We are going to put this as an enhancement feature request. But for now we can use VF option. VF allows to use any external chart also. You can use the below code, put in the VF placeholder. (VF stands for Visualization Framework: It is an external chart integration method in Helical Insight)

function DrawBar() {   
    const { Bar } = components;
    const { 
        getTooltip, 
        enableInteractivity, 
        getPropertiesConfig 
    } = helperFunctions;
 
    const config = {
        data: data,
        xField: 'sum_travel_cost',
        yField: 'source',
        columnWidthRatio: 0.9,  // Adjust bar width (increase this value for wider bars)
        label: {
            text: 'sum_travel_cost',
            position: 'right',  // Positioning the label outside to the right of the bar
            style: {
                textAlign: 'start',
                fill: '#000',  // Color for the label text
                dx: 10,  // Offset to push the label away from the bar
            },
        },
        axis: {
            x: {
                labelFormatter: '.0%',
            },
        },
        sort: {
            reverse: true,
        },
        ...getTooltip("antd", report),
        ...enableInteractivity("antd", report),
        ...getPropertiesConfig("antd", report),
    };
 
    return <Bar {...config} />;
}

Note : The report that we are generating, we are using below fields. Based on what you are plotting, according to that you will have to make changes

          xField: 'sum_travel_cost',
        yField: 'source',

Provide your report column names (dimensions and measures); no changes are required in the remaining code

Inject the VF code into the VF placeholder so that it generates a bar chart with labels outside

image

Thank You,
Helical Insight Team.