locked
Angular Chartjs Overlapping Bar Chart with Chartjs ver 2.7 RRS feed

 > 

  • Question

  • Question
    Sign in to vote
    0
    Sign in to vote
    User956626884 posted

    Hello,

    I am trying to write an angular page that will display overlapping bar charts with chartjs ver 2.7. I was following the code at this url

    https://jsfiddle.net/17hvoa9t/11/

    I found out that it works with chartjs ver 2.5 but I need it to work with Chartjs 2.7

    When I used chartjs 2.7, only 1 bar set is overlapping but not the other two. I have been reading the charts.org about barPercentage and categoryPercentage but trying setting them for the two dataset, but it still does not work.

    Here is the rendered page

    overlapping bar chart

    Here is my code so far

    ngOnInit() {
var data = {
labels: ["x1", "x2", "x3"],
datasets: [{
label: "First",
backgroundColor: 'rgba(255, 99, 132, 0.2)',
borderWidth: 1,
data: [10, 20, 30],
xAxisID: "bar-x-axis1",
}, {
label: "Second",
backgroundColor: 'rgba(255, 206, 86, 0.2)',
borderWidth: 1,
data: [5, 30, 35],
xAxisID: "bar-x-axis2",
}]
};

var options = {
scales: {
xAxes: [{
stacked: true,
id: "bar-x-axis1",
barThickness: 30,
type: 'category',
categoryPercentage: 0.8,
barPercentage: 0.9,
gridLines: {
offsetGridLines: true
}
}, {
display: false,
stacked: true,
id: "bar-x-axis2",
barThickness: 70,
// these are needed because the bar controller defaults set only the first x axis properties
type: 'category',
categoryPercentage: 0.8,
barPercentage: 0.9,
gridLines: {
offsetGridLines: true
}
}],
yAxes: [{
stacked: false,
ticks: {
beginAtZero: true
},
}, {
type: 'category',
categoryPercentage: 0.8,
barPercentage: 0.9,
gridLines: {
offsetGridLines: true
}
}

]

}
};

var ctx = document.getElementById("myChart").getContext("2d");
var myBarChart = new Chart(ctx, {
type: 'bar',
data: data,
options: options
});

}

}



    HTML

    <canvas id="myChart" width="500" height="300"></canvas>

    Wednesday, April 17, 2019 4:30 PM

All replies