Horizontal bar chart in Canvas - value of measure positioned inconveniently

[preetish_P (Preetish Pai)]

Hi All,

We have recently upgraded to ES6.8 and are exploring capabilities provided by Canvas. My question is around the horizontal bar chart available within Canvas elements.
Is there a way to show the value of measure aligned to right edge of the chart or just outside of the horizontal bar, similar to what is seen in a TopN chart of visual builder?

Currently the value of measure lies on the edge of the bar. Example of how the chart is currently looking:

How I am trying to make it look (this is a TopN chart):

Thank you

[Brandon_Kobel]

Hey @preetish_P would you mind sharing the Canvas expression that you're using for your existing workpad?

[preetish_P (Preetish Pai)]

Hi @Brandon_Kobel,
The canvas expression for horizontal bar chart currently looks like below:

filters
| essql
query="SELECT place,COUNT(distinct userid) from "<>" group by place"
| pointseries x="COUNT_distinct userid_" y="place" text="COUNT_distinct userid_"
| plot defaultStyle={seriesStyle bars=0.75 horizontalBars=true lines="0" points="0"} palette={palette "#C5FAF4" "#0F6259" gradient=true} xaxis=false legend=false yaxis={axisConfig position="left"}
font={font family="'Helvetica Neue', Helvetica, Arial, sans-serif" size=16 align="right" color="#f0f4ff" weight="normal" underline=false italic=false} seriesStyle={seriesStyle points="0"}
| render containerStyle={containerStyle opacity="1" overflow="visible" border=" none "}

Thank you

[tims (Tim Schnell)]

Hey @preetish_P you can adjust the label position with custom CSS. Something like this should work:

.canvasRenderEl .valueLabel { padding-left: 5%; }

[preetish_P (Preetish Pai)]

@tims

padding-left: 5%;

Thanks @tims
Using the padding feature I was able to improve the readability of numbers (the numbers are outside the bars). This has partially solved my problem. However it seems impossible to have them right-aligned (similar to TopN chart) as the 'valueLabel' class has defined inline style of 'position:absolute' against the div element.
Any thoughts on this ?

[tims (Tim Schnell)]

@preetish_P You can accomplish this with a bit more CSS hacking, try something like this:

.canvasRenderEl .flot-base {
    width: 80% !important;
}
.canvasRenderEl .valueLabel {
     left: 85% !important;
}

[preetish_P (Preetish Pai)]

@tims

.canvasRenderEl .valueLabel { left: 85% !important; }

Thank you. This worked like magic !