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

I am trying to create a horizontal bar chart with multiple categories. Upon loading the data in the specified format, I am seeing issues with the name label on my Y-axis being truncated to ‘…’ instead of showing the full name.

Tried setting the width to a large value but too no avail. I also see in the HTML that is generated that it is not a CSS issue, as the values are coded as ‘…’ in the HTML.

Is britecharts-react doing something behind the curtains? Also wanted to know if there are options to pass in to style the y-axis labels.

I tried yAxisLabelOffset={-200} and it gives an error.

Error: Method not supported by Britechart: yAxisLabelOffset

Expected Behavior

Show full name of label value.

Current Behavior

Truncate label as “xxx …” or the entire name label as “…”

Steps to Reproduce (for bugs)

1. Data

        "errorBarChart": [
            {
                "value": 0,
                "name": "Undefined"
            },
            {
                "value": 0,
                "name": "AssertionError"
            },
            {
                "value": 14,
                "name": "IllegalArgument"
            },
            {
                "value": 0,
                "name": "SQL Error"
            },
            {
                "value": 1,
                "name": "NoSuchElementException"
            },
            {
                "value": 0,
                "name": "Error - ENV"
            },
            {
                "value": 0,
                "name": "Expected URL"
            },
            {
                "value": 0,
                "name": "Loading"
            },
            {
                "value": 0,
                "name": "Timeout"
            }
        ]

1. JSX

            <Paper className={classes.paper}>
              <h2>Bar Charts</h2>
              <Bar
                height={300}
                width={900}
                isHorizontal
                isAnimated
                shouldShowLoadingState={false}
                data={errorBarChart}
                colorSchema={colors.colorSchemas.britecharts}
              />
            </Paper>

1. See screenshot for more info

Screenshots (if appropriate):

Context

Your Environment

• Version used: ^0.4.1
• Browser Name and version: Chrome Version 69.0.3497.100 (Official Build) (64-bit)
• Operating System and version: MacOS
• Link to your project or codepen:

[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]

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.