CODEWITHSUNDEEP
javascriptangularchart.jsng2-charts
discodane
discodane

Reputation: 2095

Chart.js: How to get x-axis labels to show on top of bars in bar chart

What I'm trying to achieve is this:

enter image description here

I'm using ng2 charts for this which is just an extension of chart.js. I have the bar charts and the colors and all that jazz. What I can't figure out is how to get the x axis labels to show up on top of the bar charts instead of just below them. To clarify, I'm not looking to have it show up on hover or anything else other than just to show up on top of the bars.

Question: What configuration is needed to get the x-axis labels to show up on the bars themselves?

Upvotes: 2

Views: 3799

Answers (1)

crthompson
crthompson

Reputation: 15865

You need the mirror attribute set to true.

Mirror attribute is in Options => scales => xaxis => ticks => mirror.

public barChartOptions: any = {
    scales: {
        yAxes: [{
            ticks: {
                mirror: false
            }
        }],
        xAxes: [{
            ticks: {
                mirror: true                }
        }],  ....

Upvotes: 1

Related Questions