CODEWITHSUNDEEP
javascripthtmlcsschart.jschart.js2
Sachith Deshan N
Sachith Deshan N

Reputation: 230

Chart.js bar chart change the label position X-axis

I'm new to chart.js. I want to draw a bar chart with x axis label not centered, but in the place where two bars join. This is what I need to create

https://i.imgsafe.org/12dcb3ea20.png

But in my current implementation (in the below image) labels are centered to the bar. I need the label to be in the middle place where two bars join like the above image.

https://i.imgsafe.org/12e75a5888.jpg

This is my code

    window.onload = function() { 
        init();
    };

    function init() {
        var ctx = $("#myChart").get(0).getContext("2d");

        var data = {
            labels: ["0%", "10%", "20%", "30%", "40%", "50%", "60%", "70%", "80%", "90%", "100%"],
            datasets: [
            {
                label: "My First dataset",
                fillColor : "rgba(0, 173, 165, 1)",
                backgroundColor: "rgba(255,99,132,0.2)",
                borderColor: "rgba(255,99,132,1)",
                borderWidth: 1,
                hoverBackgroundColor: "rgba(255,99,132,0.4)",
                hoverBorderColor: "rgba(255,99,132,1)",
                data: [5, 22, 30, 22, 26, 40, 60, 68, 40, 10],
            }
            ]
        };

        var myNewChart = new Chart(ctx).Bar(data);
    }

</script>
<div>
    <section>
        <article>
            <canvas id="myChart" width="800" height="200">
            </canvas>
        </article>
    </section>
</div>

Upvotes: 0

Views: 8847

Answers (1)

andreu
andreu

Reputation: 66

Try to add these options :

options : {
    scales : {
        xAxes : [{
            gridLines: {
                offsetGridLines : true
            }
        }]
    }
}

Upvotes: 1

Related Questions