Horizontal bar chart in Canvas - value of measure positioned inconveniently

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

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

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

| 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

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

.canvasRenderEl .valueLabel { 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 ?

@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;

Thank you. This worked like magic ! :grin:

This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.