question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Cannot align bar charts to left

See original GitHub issue

Hi, thank you for the library!

Expected Behavior

The API should provide an align property that specifies the overall alignment of the (bar) chart.

Current Behavior

No way to align the bar chart to the left instead of the center.

Steps to Reproduce

    new Chart(document.getElementById("foo"), {
        type: "bar",
        options: {
            scales: {
                yAxes: [{
                    display: false,
                }],
                xAxes: [{
                    display: false,
                }]
            },
            elements: {
                bar: {
                    borderWidth: 2,
                    borderColor: "#D2DDEC"
                },
                point: {
                    hoverRadius: 0
                },
            },
            legend: {
                display: false,
            },
        },
        data: {
            labels: Object.keys(values),
            datasets: [{
                data: Object.values(values),
            }]
        }
    })

Context

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Comments:10 (5 by maintainers)

github_iconTop GitHub Comments

5reactions
hazcodcommented, Nov 1, 2020

@kurkle , apologies, I was not aware of the function of labels in chartjs. The solution was amazingly simple:

    let labels = Object.keys(data);
    for (let i = labels.length; i <31; i++) {
        labels.push(null);
    }

1reaction
kurklecommented, Nov 1, 2020

@hazod what issue do you think I was suggesting it would solve? https://codepen.io/kurkle/pen/MWeVXYB

Read more comments on GitHub >

github_iconTop Results From Across the Web

How to align ChartJS bars to the left? - Stack Overflow
I want to create a bar chart on ChartJS but I'm not having success when trying to remove this "gap" between the Y-axis...
Read more >
Unable to left align text label on bar chart - Tableau Community
I have an issue with aligning the text label for a bar chart. Without any dimensions on the mark shelf, I can get...
Read more >
Right or left align text on Y axis of an Excel chart/graph
What to do: Paste the chart in Word or PowerPoint and select the Y axis labels (click on any part of the text)....
Read more >
Left align headers on bar charts - Microsoft Power BI Community
Could someone tell me how to left align column headers on bar charts, like. ... I can only seem to have it right...
Read more >
How to Fix Long Axis Labels in Excel Charts [PART II] - YouTube
Here's a trick to break your horizontal bar chart's axis labels onto two or more lines. Create your bar chart, copy and paste...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found