Chartjs-How to make 2 bar in a certain section of chart

by

0👍

✅

If you are using Chart.js you can replace all that markup by a canvas element. Like so

HTML

<div class="myChartWrapper">
   VISITS
    <br /><br />
   <canvas id="myChart" width="800" height="400"></canvas>
</div>

CSS

.myChartWrapper {
    font-family: Helvetica;
    color: #999;
    background-color: #eee;
    display: inline-block;
    padding: 20px;
}

.myChartWrapper > * {
   display: block;
}

JS

var data = {
    labels: ["JAN", "FEB", "MAR", "APR", "MAY", "JUN", "JUL"],
    datasets: [{
        label: "My First dataset",
        fillColor: "rgba(254, 133, 92, 1)",
        highlightFill: "rgba(100,100,100,1)",
        data: [8000, 5000, 3000, 5000, 9000, 8000, 6000]
    }]
};

var ctx = document.getElementById("myChart").getContext("2d");
var myNewChart = new Chart(ctx).Bar(data, {
    scaleOverride: true,
    barValueSpacing : 30,
    scaleSteps: 5,
    scaleStepWidth: 2000,
    scaleStartValue: 0,
});

Fiddle – http://jsfiddle.net/Lp6oujk3/

Leave a comment