Bar Chart Y-axis name value getting truncated to '...' about britecharts-react

[miglesiasEB]

I see, maybe it was a real issue then.

For the time being, could you try to reproduce this issue in a Codepen? This would allow me to play around to see if there is other solution. You could use https://codepen.io/Britecharts/pen/RQQabr as a jumpstart.

Thanks for your time!!

[Golodhros]

Thanks for your time @dupski!!

Yeah, that's usually the case with Britecharts in general. Maybe you are right and we should allow to not activate the automatic ellipsis, but that would make those labels to get cut. In one way, this behavior makes the issue more explicit (although it doesn't tell you: you should give more left margins!), but I know is not ideal.

I think the totally ideal solution would be to have a helper to do one of the modern ellipsis in the middle, so if the number was '1,000.00', it would become '1...0'. I guess it will be a bit tricky, as everything text related in SVG.

[Golodhros]

That is great @dupski!!
Helping developers like you is the goal of Britecharts, so we are glad of having you helping with it!!

[Golodhros]

Hi @alcmacys, thanks for open an issue!

Could you try to play with the values of the left margin?

Let me know how it goes.

[alcmacys]

Hi @Golodhros - thanks for responding. For the left margin are you referring to the CSS or there is a method to do that? I also notice that some of the methods available on the generic API such as 'yAxisLabelOffset' is not working on the britecharts-react

[Golodhros]

Hi @alcmacys,

No, I mean the margin configuration of the chart:

        <Bar
            height={300}
            width={900}
            margin={top: 0, left: 40, right: 0, bottom: 0 }

You have the API here: http://eventbrite.github.io/britecharts/module-Bar.html

[Golodhros]

Did this help you with this issue @alcmacys?

[dupski]

Hey guys. I am also seeing this issue on my Y axis

The margins prop does not help. The library is actually rendering "..." in the source.

Source

<ResponsiveBarChart
    data={oppoData}
    height={300}
    enableLabels={true}
    labelsNumberFormat=","
    isHorizontal={false}
/>

Data

const oppoData = [
    {
        value: 5500,
        name: 'New Lead'
    },
    {
        value: 10000,
        name: 'Qualified'
    },
    {
        value: 8500,
        name: 'Negotiating'
    },
];

Searching for "..." in github has not been helpful :P Any thoughts?

[dupski]

It appears to be related to the length of the labels. If I reduce the figures then they render correctly, so there must be a magic auto-truncation going on somewhere in the library based on the label string length

(also got the colours working :) )

[dupski]

Related: https://github.com/eventbrite/britecharts/issues/691 - looks like it is caused by use of the internal wrapTextWithEllipses method. I guess we'll need a new release of the main britecharts module to fix

[dupski]

Ah, ok, yeah it only happens when you don't allow sufficient left margin (as mentioned in the ticket I linked).

Repro codepen: https://codepen.io/dupski/pen/PxryBe

As mentioned in the other ticket, it would be nice to have the ability to turn this off (or use CSS), but otherwise setting the margin to a high enough number works.

So @alcmacys , you need to add the margin prop to your bar chart, but use a bigger number than 40 for the left setting, e.g.

<Bar
    ...
    margin={{top: 0, left: 140, right: 0, bottom: 0 }}
/>

I reckon this can be closed @miglesiasEB

#profit :)

[dupski]

No worries @Golodhros - thanks for your work on this library :)

I think in general a more complete Getting Started example would be helpful. At the moment the README and docs site over-simplify some of the examples. It would be good to show an example, complete with its associated data (from a const), a good-sized initial margin setting, and using a colour palette.

I found I had to hunt around quite a bit just to get a basic graph going. Looking great now its working though :)

[Golodhros]

Makes sense!

I have a tutorial in a post ready to publish once we launch the v1 of Britecharts-React. I was planning to get there long before now, but life got complicated...

I will to push hard in the following months and get this through!

Thanks for the feedback, it is super important for improving the project!

[dupski]

Nice man. Happy to help out where I can, let me know :)

I'm hoping to use this library to power the charts in a new open source CRM product I am building :)