I'm trying to get a stacked bar chart with two bars sharing a label next to each other on the x-axis but I'm having issues with getting the 2nd bar to display - currently it sits underneath the first bar (if you hide the 2021 value, you will see the 2022 bar will appear):
var barChartData = {
labels: ["January", "February"],
datasets: [{
data: [10, 20],
label: '2021',
backgroundColor: "#ffe100",
yAxisId: 'y-stacked',
}, {
data: [15, 30],
label: '2021 Total',
backgroundColor: "#ee0000",
yAxisId: 'y-stacked',
}, {
data: [6, 19],
label: '2022 YTD',
backgroundColor: "#555555",
}]
};
var ctx = document.getElementById("canvas").getContext("2d");
window.myBar = new Chart(ctx, {
type: 'bar',
data: barChartData,
options: {
title: {
display: true,
text: "Chart.js Bar Chart - Stacked"
},
tooltips: {
mode: 'label'
},
responsive: true,
scales: {
xAxes: [{
stacked: true,
}],
yAxes: [{
stacked: false,
ticks: {
beginAtZero: true,
}
}, {
id: "y-stacked",
stacked: true,
display: false,
ticks: {
beginAtZero: true,
min: 0,
},
type: 'linear'
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.bundle.js"></script>
<div style="width: 100%">
<canvas id="canvas"></canvas>
</div>
Is there any way I can get the 2022 bar to show next to the 2021 bar?
I have tried adding another x-axis and changing the value of the x-axis stack to false but this just unstacks all three bars and sits them all next to each other
Turns out there is a stacked property you can use on the datasets and you don't need multiple axes
var barChartData = {
labels: ["January", "February"],
datasets: [{
data: [10, 20],
label: '2021',
backgroundColor: "#ffe100",
stack: 'stack 1',
}, {
data: [15, 30],
label: '2021 Total',
backgroundColor: "#ee0000",
stack: 'stack 1',
}, {
data: [6, 19],
label: '2022 YTD',
backgroundColor: "#555555",
stack: 'stack 2',
}]
};
var ctx = document.getElementById("canvas").getContext("2d");
window.myBar = new Chart(ctx, {
type: 'bar',
data: barChartData,
options: {
title: {
display: true,
text: "Chart.js Bar Chart - Stacked"
},
tooltips: {
mode: 'label'
},
responsive: true,
scales: {
xAxes: [{
stacked: true,
}],
yAxes: [{
stacked: true,
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.bundle.js"></script>
<div style="width: 100%">
<canvas id="canvas"></canvas>
</div>
Related
I have a chart.js grouped bar chart (grouped by the stack id), what I want to do, is add another x-axis, which will show the stack id, the closest I got was doubling the labels, so ["1.1.2021", "2.1.2021"] was changed to ["1.1.2021", "1.1.2021", "2.1.2021", "2.1.2021"] - this didnt work well, the x-axis didnt align properly and the visuals were off.
Here is what I currently have:
var ctx = $("#c");
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ["1.1.2021", "2.1.2021"],
datasets: [{
label: 'First Time Visitor England',
data: [10, 3],
stack: "first-time-visitors",
backgroundColor: "#f5a0a7",
},
{
label: 'Repeating Visitors England',
data: [20, 6],
stack: "repeat-visitors",
backgroundColor: "#e75177",
},
{
label: 'First Time Visitor Sweden',
data: [7, 0],
stack: "first-time-visitors",
backgroundColor: "#924565",
},
{
label: 'Repeating Visitors Sweden',
data: [9, 16],
stack: "repeat-visitors",
backgroundColor: "#2979a7",
}]
},
options:{
scales:{
xAxes:[
{
stacked: true,
id:'xAxis1',
type:"category",
ticks:{
callback:function(label){
var month = label.split(";")[0];
var year = label.split(";")[1];
return month;
}
}
}],
yAxes:[{
ticks:{
beginAtZero:true
}
}]
}
}
});
<body>
<canvas id="c" width="400" height="300"></canvas>
<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
</body>
and I want to have another x-axis, above the date axis, which will show the stack id, so two ticks above 1.1.2021 - first is labeled first-time-visitors, and the second repeat-visitors (this will also repeat for the 1.2.2021).
Is this possible?
To have the additional labels aligned with the stack group bars, you can define the option categoryPercentage: 1 on each dataset.
For further information, consult the chapters Dataset Configuration and barPercentage vs categoryPercentage of the Chart.js bar documentation.
Further you'll have to define several x-axes as shown in your amended code below.
new Chart('c', {
type: 'bar',
data: {
labels: ["1.1.2021", "2.1.2021"],
datasets: [{
label: 'First Time Visitor England',
data: [10, 3],
stack: "first-time-visitors",
backgroundColor: "#f5a0a7",
categoryPercentage: 1
},
{
label: 'Repeating Visitors England',
data: [20, 6],
stack: "repeat-visitors",
backgroundColor: "#e75177",
categoryPercentage: 1
},
{
label: 'First Time Visitor Sweden',
data: [7, 0],
stack: "first-time-visitors",
backgroundColor: "#924565",
categoryPercentage: 1
},
{
label: 'Repeating Visitors Sweden',
data: [9, 16],
stack: "repeat-visitors",
backgroundColor: "#2979a7",
categoryPercentage: 1
}
]
},
options: {
tooltips: {
mode: 'x'
},
scales: {
xAxes: [{
ticks: {
display: false
}
},
{
type: 'category',
offset: true,
labels: ['first-time-visitors', 'repeat-visitors', 'first-time-visitors', 'repeat-visitors'],
gridLines: {
display: false
}
},
{
offset: true,
gridLines: {
display: false
}
}
],
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
<canvas id="c" width="400" height="200"></canvas>
help me !
how to delete numeric data on the bar chart in bar chartjs
let datas_1 = [97,70,87,43,35,18];
let colorHex_1 = ['#ebeef3','#ebeef3','#ebeef3','#ebeef3','#ebeef3','#ebeef3'];
let labels_1 = ['10대','12대','30대','40대','50대','60대이상'];
var myBarChart = new Chart(ctx_1, {
type: 'horizontalBar',
data: {
datasets: [{
data: datas_1 ,
backgroundColor: colorHex_1,
borderWidth: 0,
barPercentage: 1,
}],
labels: labels_1,
},
options: {
responsive: true,
legend: {
display:false,
},
scales: {
xAxes: [{
display:false,
}],
yAxes: [{
gridLines:{
display:false,
color: "black"
},
maxBarThickness: 20,
}]
}
}
});
how to delete numeric data on the bar chart in bar chart.js
Working Demo: https://jsfiddle.net/usmanmunir/hz3gLj19/3/
Try this code:
let datas_1 = [97,70,87,43,35,18];
let colorHex_1 = ['#ebeef3', '#ebeef3', '#ebeef3', '#ebeef3', '#ebeef3', '#ebeef3'];
let labels_1 = ['10대', '12대', '30대', '40대', '50대', '60대이상'];
var ctx = document.getElementById("myChart");
var myBarChart = new Chart(ctx, {
type: 'horizontalBar',
data: {
datasets: [{
data: datas_1,
backgroundColor: colorHex_1,
borderWidth: 0,
barPercentage: 1,
}],
labels: labels_1,
},
options: {
responsive: true,
legend: {
display: false,
},
scales: {
xAxes: [{
display: false,
}],
yAxes: [{
gridLines: {
display: false,
},
maxBarThickness: 20,
}]
}
}
});
Hope this helps.
I have a Bar Chart with these data and options:
var data = {
labels: periodnames,
datasets: [
{
yAxisID: "bar-stacked",
data: rcash,
backgroundColor: "#FFCE56",
label:""
},
{
yAxisID:"bar-stacked",
data: pcash,
backgroundColor: "#FFCE56",
label: "cash"
}
]
};
var options = {
animation: {
animateScale: true
},
scales: {
xAxes: [{
stacked: true,
}],
yAxes: [
{
display:false,
id: "line-axis",
},
{
id: "bar-stacked",
stacked: true,
}
]
}
}
finactivityGraphChart = new Chart(ctx, {
type: 'bar',
data: data,
options: options
});
The result chart is this:
My problem is that I don't want to show the first dataset's label. If I don't define it, it shows the yellow box with the value "undefine" next to it. I suppose that I must modify the Chart.js file. Any suggestions?
This could be achieved, using the filter function of legend*'s* label.
see Legend Label Configuration
In short, add the following in your chart options ...
legend: {
labels: {
filter: function(label) {
if (label.text === 'cash') return true;
}
}
},
ᴅᴇᴍᴏ
var ctx = document.querySelector('#c').getContext('2d');
var data = {
labels: ['Jan', 'Feb', 'Mar'],
datasets: [{
yAxisID: "bar-stacked",
data: [1, 2, 3],
backgroundColor: "#FFCE56",
label: "gold"
}, {
yAxisID: "bar-stacked",
data: [-1, -2, -3],
backgroundColor: "#FFCE56",
label: "cash"
}]
};
var options = {
legend: {
labels: {
filter: function(label) {
if (label.text === 'cash') return true; //only show when the label is cash
}
}
},
animation: {
animateScale: true
},
scales: {
xAxes: [{
stacked: true,
}],
yAxes: [{
display: false,
id: "line-axis",
}, {
id: "bar-stacked",
stacked: true,
}]
}
}
finactivityGraphChart = new Chart(ctx, {
type: 'bar',
data: data,
options: options
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.js"></script>
<canvas id="c"></canvas>
I am trying to draw a line chart with time x-axis. But chart is giving me this error. I want to print the time in a certain format 'hh:mm:ss' but looks like this format is causing some issue. When i send hardcoded labels the chart is drawn correctly.
Chart.min.js:14 Uncaught TypeError: Cannot read property 'call' of undefined
This is my call stack
This is my code
var timeFormat = 'h:mm:ss a';
function newDate(days) {
//return moment().add(days, 'd').toDate();
return moment().add(days, 'm').format(timeFormat);
}
function DrawTrendTempChart() {
var temp_data_trend = {
labels: [newDate(0), newDate(10), newDate(20), newDate(30), newDate(40), newDate(50), newDate(60)], // Date Objects,
datasets: [{
lineTension: 0,
label: 'Trend',
data: [1, 2, 3, 4, 5, 6, 7],
pointRadius: 2,
backgroundColor: ['transparent'],
borderColor: [OrangeRGB],
borderWidth: liveDataLineWidth,
//fill: false,
//borderDash: [5, 5],
}]
}
var temp_options_trend = {
scales: {
xAxes: [{
type: "time",
time: {
format: timeFormat,
tooltipFormat: timeFormat,
unit: 'minute',
unitStepSize: 20,
},
scaleLabel: {
display: true,
labelString: 'Date'
}
}, ],
yAxes: [{
scaleLabel: {
display: true,
labelString: 'value'
},
ticks: {
autoSkip: false
}
}]
},
legend: { display: true },
tooltips: { enabled: true },
showTooltips: true,
responsive: true,
title: {
display: true,
text: "Trend Chart"
}
}
var ctx = document.getElementById("sensorDataTrend").getContext("2d");
myChart = new Chart(ctx, {
type: 'line',
data: temp_data_trend,
options: temp_options_trend
});
}
I am trying to align the generated time scale labels using Chart.js v2.2 with the centre of the bars of a bar chart. I have tried the offsetGridLines option but this seems to have no effect when using Xaxis scale type time.
Here is an example, maybe I have missed something:
<div id="container" style="width: 75%;">
<canvas id="canvas"></canvas>
</div>
<script>
var barChartData = {
labels: ["2015-01-01", "2015-02-01", "2015-03-01", "2015-04-01", "2015-05-01", "2015-07-01"],
datasets: [{
label: 'Dataset 1',
backgroundColor: "rgba(220,220,220,0.5)",
data: [10, 4, 5, 7, 2, 3]
}]
};
window.onload = function() {
var ctx = document.getElementById("canvas").getContext("2d");
window.myBar = new Chart(ctx, {
type: 'bar',
data: barChartData,
options: {
elements: {
rectangle: {
borderWidth: 2,
borderColor: 'rgb(0, 255, 0)',
borderSkipped: 'bottom'
}
},
responsive: true,
legend: {
position: 'top',
},
title: {
display: true,
text: 'Chart.js Bar Chart'
}
,
scales: {
xAxes: [{
categoryPercentage: .5,
barPercentage: 1,
type: 'time',
scaleLabel: {
display: true,
labelString: 'Year-Month'
},
time: {
min: '2014-12-01' ,
max: '2015-12-01',
unit: 'month',
displayFormats: {
month: "MMM YY"
}
},
gridLines: {
offsetGridLines: false,
drawTicks: true,
display: true
},
stacked: true
}],
yAxes: [{
ticks: {
beginAtZero: true
},
stacked: true
}]
}
}
});
};
</script>
This fiddle may help to place the data label in the center of the bar
https://jsfiddle.net/tea8dhgy/
<div id="container" style="width: 75%;">
<canvas id="canvas"></canvas>
</div>
var barChartData = {
labels: ["2015-01-01", "2015-02-01", "2015-03-01", "2015-04-01", "2015-05-01", "2015-07-01"],
datasets: [{
label: 'Dataset 1',
backgroundColor: "rgba(220,220,220,0.5)",
data: [10, 4, 5, 7, 2, 3]
}]
};
var ctx = document.getElementById("canvas").getContext("2d");
new Chart(ctx, {
type: 'bar',
data: barChartData,
options: {
elements: {
rectangle: {
borderWidth: 2,
borderColor: 'rgb(0, 255, 0)',
borderSkipped: 'bottom'
}
},
responsive: true,
legend: {
position: 'top',
},
title: {
display: true,
text: 'Chart.js Bar Chart'
},
scales: {
xAxes: [{
categoryPercentage: .5,
barPercentage: 1,
type: 'time',
scaleLabel: {
display: true,
labelString: 'Year-Month'
},
time: {
// min: '2014-12-01' ,
// max: '2015-12-01',
unit: 'month',
displayFormats: {
month: "MMM YY"
}
},
gridLines: {
offsetGridLines: false,
drawTicks: true,
display: true
},
stacked: true
}],
yAxes: [{
ticks: {
beginAtZero: true
},
stacked: true
}]
},
animation: {
onComplete: function() {
var chartInstance = this.chart,
ctx = chartInstance.ctx;
ctx.font = Chart.helpers.fontString(10, "bold", Chart.defaults.global.defaultFontFamily);
ctx.textAlign = 'center';
ctx.textBaseline = 'center';
this.data.datasets.forEach(function(dataset, i) {
var meta = chartInstance.controller.getDatasetMeta(i);
meta.data.forEach(function(bar, index) {
//var data = dataset.data[index];
var data = dataset.data[index];
console.log(bar);
if (data > 0) {
ctx.fillText(data, bar._model.x, bar._model.base - (bar._model.base - bar._model.y) / 2 - 5);
}
});
});
}
}
}
});
I was able to get a working chart by removing the min and max values set.
Here is the JSFiddle
Was the following image the desired outcome?