I am trying to create a grouped, stacked bar chart in ChartJS. For the below code, all works fine apart from the grouping aspect, it simply stacks all datasets on top of one another.
stackedBarChartData = {
barPercentage: 1.0,
//labels: stackedBarData['skills'],
labels: ['1', '2', '3', '4', '5', '6', '7', '8'],
datasets:[
{
label: 'Dataset 1',
data: [0, 1, 3, 4, 2, 4, 5, 9],
backgroundColor: '#D6E9C6',
stack: 'Stack 0',
},
{
label: 'Dataset 2',
data: [0, 12, 3, 6, 2, 4, 8, 9],
backgroundColor: '#FAEBCC',
stack: 'Stack 0',
},
{
label: 'Dataset 3',
data: [0, 1, 3, 4, 2, 4, 5, 9],
backgroundColor: '#EBCCD1',
stack: 'Stack 1',
},
]
}
groupedChartOptions = {
type: 'bar',
data: stackedBarChartData,
options: {
scales: {
scaleShowValues: true,
xAxes: [{
stacked: true,
scaleLabel: {
display: true,
labelString: options.xLabel
},
ticks: {
autoSkip: false
},
gridLines: { display: false }
}],
yAxes: [{
stacked: true,
scaleLabel: {
display: true,
labelString: options.yLabel
},
gridLines: { display: false }
}]
},
title:{
display: true,
text: options.title
}
}
}
return new Chart(chartObject, chartOptions);
The result is as follows:
Any help would be much appreciated.
Your definition uses Chart.js v2 syntax and it seems to work fine if you use the latest version of Chart.js v2 (2.9.4) as shown below.
const stackedBarChartData = {
barPercentage: 1.0,
//labels: stackedBarData['skills'],
labels: ['1', '2', '3', '4', '5', '6', '7', '8'],
datasets: [{
label: 'Dataset 1',
data: [0, 1, 3, 4, 2, 4, 5, 9],
backgroundColor: '#D6E9C6',
stack: 'Stack 0',
},
{
label: 'Dataset 2',
data: [0, 12, 3, 6, 2, 4, 8, 9],
backgroundColor: '#FAEBCC',
stack: 'Stack 0',
},
{
label: 'Dataset 3',
data: [0, 1, 3, 4, 2, 4, 5, 9],
backgroundColor: '#EBCCD1',
stack: 'Stack 1',
},
]
};
const groupedChartOptions = {
type: 'bar',
data: stackedBarChartData,
options: {
scales: {
scaleShowValues: true,
xAxes: [{
stacked: true,
scaleLabel: {
display: true,
labelString: 'A'
},
ticks: {
autoSkip: false
},
gridLines: {
display: false
}
}],
yAxes: [{
stacked: true,
scaleLabel: {
display: true,
labelString: 'B'
},
gridLines: {
display: false
}
}]
},
title: {
display: true,
text: 'XYZ'
}
}
};
new Chart('myChart', groupedChartOptions);
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>
<canvas id="myChart" height="120"></canvas>
The config you are using should work, the reason it not working is likely to be your verry outdated version of Chart.js. I suspect you are still using version 2.4.0. If you upgrade to 2.9.4 it will work
https://jsfiddle.net/Leelenaleee/6h2ey8mu/8/
Related
I'm trying to implement a grouped bar chart with label for each bar chart. I don't want to have second label as a legend, basically i want 2 labels: one for group and one for element in dataset.
Something like:
Where do i need to put the second label(Male/Female), i put this label in datasets but it's not working.
Where do i need to put the second label(Male/Female), i put this label in datasets but it's not working.
You should declare and configure another x-axis. In the following example inspired by your data, I use options.scales.x.ticks.callback (see Labeling Axes | Chart.js) which allows me to inject new labels.
const ctx = document.getElementById('myChart');
new Chart(ctx, {
type: 'bar',
data: {
labels: ['Category 1', 'Category 2', 'Category 3', 'Category 4'],
datasets: [{
label: 'Dataset 1',
data: [3, 4, 4, 2],
stack: 'Stack 0'
}, {
label: 'Dataset 2',
data: [5, 3, 4, 7],
stack: 'Stack 0'
}, {
label: 'Dataset 3',
data: [3, 0, 4, 4],
stack: 'Stack 1'
}, {
label: 'Dataset 4',
data: [2, 5, 6, 2],
stack: 'Stack 1'
}]
},
options: {
scales: {
x: {
stacked: true,
ticks: {
font: {
weight: 'bold'
},
callback: () => 'Label 1 | Label 2'
}
},
x2: {
border: {
display: false
},
grid: {
display: false
}
},
y: {
stacked: true,
beginAtZero: true
}
},
plugins: {
legend: {
display: false
}
}
}
});
.chart-container {
position: relative;
width: 600px;
}
<script src="https://cdn.jsdelivr.net/npm/chart.js#4.2.0"></script>
<div class="chart-container">
<canvas id="myChart"></canvas>
</div>
Here I have implement basic stacked group bar chart
where levels are 'Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'
and here are two stacked group one, two
<canvas id="myChart"></canvas>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
datasets: [{
stack: 'one',
label: 'one',
data: [12, 19, 3, 5, 2, 3],
borderWidth: 1
},
{
stack: 'two',
label: 'two',
data: [19, 3, 5, 2, 3, 12],
borderWidth: 1
},
{
stack: 'one',
label: 'one',
data: [ 3, 5, 2, 3, 12, 19],
borderWidth: 1
},
{
stack: 'two',
label: 'two',
data: [ 2, 3, 12, 19, 3, 5],
borderWidth: 1
}]
},
options: {
scales: {
xAxes: [
{
stacked: true,
}
],
yAxes: [
{
stacked: true,
}
]
}
}
});
</script>
Output:
but I want to show the stacked group level at the bottom and data levels on the top of the greed (not every bar)
Expected output:
You need to define an additional x-axis of type: 'category' as follows:
xAxes: [{
stacked: true,
position: 'top'
},
{
type: 'category',
offset: true,
labels: ['one', 'two', 'one', 'two', 'one', 'two', 'one', 'two', 'one', 'two', 'one', 'two']
}
],
Please take a look at your amended and runnable code and see how it works:
new Chart('myChart', {
type: 'bar',
data: {
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
datasets: [{
stack: 'one',
label: 'one',
data: [12, 19, 3, 5, 2, 3],
borderWidth: 1
},
{
stack: 'two',
label: 'two',
data: [19, 3, 5, 2, 3, 12],
borderWidth: 1
},
{
stack: 'one',
label: 'one',
data: [3, 5, 2, 3, 12, 19],
borderWidth: 1
},
{
stack: 'two',
label: 'two',
data: [2, 3, 12, 19, 3, 5],
borderWidth: 1
}
]
},
options: {
legend: {
display: false
},
scales: {
xAxes: [{
stacked: true,
position: 'top'
},
{
gridLines: {
display: false
},
type: 'category',
offset: true,
labels: ['one', 'two', 'one', 'two', 'one', 'two', 'one', 'two', 'one', 'two', 'one', 'two'] }
],
yAxes: [{
stacked: true,
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
<canvas id="myChart" height="100"></canvas>
I'm trying to create a percentile chart, ie a chart with some lines corresponding to each percentile. Given a user input, I want to show their mark in the chart with a dot.
So basically, my question is: Is it possible to place a dot in a multiple line chart? If so, how do I do it?
var lineChart = new Chart(myChart2, {
type: 'line',
data: {
labels: ['6', '7', '8', '9', '10', '11'],
datasets: [ {
label: "50th",
data: [20, 22, 28, 26, 25, 26],
borderColor: '#166ab5',
fill: false
}, {
label: "90th",
data: [72, 74, 68, 75, 74, 78],
borderColor: '#00FF00',
fill: false
}, {
label: "10th",
data: [2, 2, 5, 4, 6, 5],
borderColor: '#FF0000',
fill: false
}]
},
options: {
title: {
text: "Percentile",
display: true
},
legend: {
},
scales: {
xAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: ''
}
}],
yAxes: [{
display: true,
ticks: {
beginAtZero: true
}
}]
},
annotation: {
annotations: [{
type: 'line',
mode: 'horizontal',
scaleID: 'y-axis-0',
value: '26',
borderColor: 'tomato',
borderWidth: 1
}],
drawTime: "afterDraw" // (default)
}
}
});
I'm using a chartJS Horizontal Bar to visualize some data & the annotation plugin to add vertical lines in the plot area.
What I want to accomplish: showing annotation values/color-box in the tooltip.
What I've done thus far: I've added in bar charts to get the values in the tooltip. (see images & code below).
Where I'm stuck: I would like to hide/offset aBar 1 & aBar 2; in other words, I don't want these bars to appear at all, but I do want the entries to appear in the tooltip. (please see second image).
Current Output
Desired Output
Code
var ctx = document.getElementById("myChart").getContext("2d");
var myChart = new Chart(ctx, {
type: 'horizontalBar',
data: {
labels: false, // RANGE
datasets: [
{
type: 'horizontalBar',
label: 'Bar 1',
backgroundColor: 'rgba(121,185,29,0.85)',
stack: 'Stack 0',
data: [
16 ],
borderColor: 'white',
borderWidth: 0.5
},
{
type: 'horizontalBar',
label: 'Bar 2',
backgroundColor: 'rgba(246,171,0,0.3125)',
stack: 'Stack 0',
data: [
24 ]
},
{
type: 'horizontalBar',
label: 'Bar 3',
backgroundColor: 'rgba(226,33,27,0.5)',
stack: 'Stack 0',
data: [
80 ]
},
{
type: 'horizontalBar',
label: 'aBar 1',
backgroundColor: '#20C5CB',
stack: 'Stack 1',
data: [
6 ]
},
{
type: 'horizontalBar',
label: 'aBar 2',
backgroundColor: '#7f3391',
stack: 'Stack 2',
data: [
120 ]
},
]
},
options: {
responsive: true,
legend:false,
responsive: true,
maintainAspectRatio: false,
title: false,
tooltips: {
mode: 'index',
intersect: true,
bodyFontSize:10,
titleFontSize:0,
titleMarginBottom:0,
},
plugins: {
labels:false,
},
scales: {
xAxes: [{
ticks: {
max: 124,
min: 0,
stepSize: 10
}
}]
},
annotation: {
annotations: [
{
type: 'line',
mode: 'vertical',
scaleID: 'x-axis-0',
value: 6,
borderColor: '#20C5CB',
borderWidth: 3,
borderDash: [6,3],
label: {
enabled: false,
content: 'Annotation 2',
fontSize: 8,
fontStyle: 'normal',
rotation: 0,
xPadding: 2,
yPadding: 2,
cornerRadius: 1,
}
},
{
type: 'line',
mode: 'vertical',
scaleID: 'x-axis-0',
value: 120,
borderColor: '#7f3391',
borderWidth: 3,
label: {
enabled: false,
content: 'Annotation 1',
fontSize: 8,
fontStyle: 'normal',
rotation: 0,
xPadding: 2,
yPadding: 2,
cornerRadius: 1,
}
}
]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-annotation/0.5.7/chartjs-plugin-annotation.min.js"></script>
<canvas id="myChart"></canvas>
Add the hidden tag to datasets of the series you want to hide like this:
type: 'horizontalBar',
label: 'aBar 1',
backgroundColor: '#20C5CB',
stack: 'Stack 1',
hidden: true,
data: [6],
and use a callback to the label tooltip like this:
tooltips: {
mode: 'index',
intersect: true,
bodyFontSize:10,
titleFontSize:0,
titleMarginBottom:0,
callbacks: {
label: function(tooltipItem, data) {
return data.datasets.map(ds => ds.label + ': ' + ds.data[tooltipItem.index])
}
}
},
Found solution here: Chartjs show hidden data on tooltip
I have made two charts in chart.js for a school project, one bar and one line and would like to put a title on each chart but it doesn't work, the bars only disappear. Where do i put the title in the code? I would like the titles to be above the two charts.
Here's a jsfiddle of the code to show more details: https://jsfiddle.net/b4d5y01z/1/
let lineConfig = {
type: 'line',
data: {
labels: ["2012", "2013", "2014", "2015", "2016", "2017"],
datasets: [{
label: 'Miljoner ton',
data: [56.38, 59.3, 61.81, 58.83, 52.32, 66.86],
backgroundColor:"rgba(0,255,0,0.4)",
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}]
}
}
},
barConfig = {
type: 'bar',
data: {
labels: ['Palmolja', "Sojaolja", 'Solrosolja', 'Rapsolja', 'Jordnöt','Annat'],
datasets: [{
label: "Miljoner ton",
data: [32, 22.4, 8, 13.1, 2.2, 19.7],
backgroundColor: "rgba(0,255,0,0.4)",
borderColor: "green", // The main line color
borderCapStyle: 'square',
pointBorderColor: "white",
pointBackgroundColor: "green",
pointBorderWidth: 1,
pointHoverRadius: 8,
pointHoverBackgroundColor: "yellow",
pointHoverBorderColor: "green",
pointHoverBorderWidth: 2,
pointRadius: 4,
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}]
}
}
},
activeType = 'bar', // we'll start with a bar chart.
myChart;
function init(config) {
// create a new chart with the supplied config.
myChart = new Chart(document.getElementById('chart'), config);
}
Replace options with following
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}]
}
},
title: {
display: true,
text: 'Custom Chart Title'
}
},
Demo https://jsfiddle.net/wkt0bfxp/
Try This:
let lineConfig = {
type: 'line',
data: {
labels: ['q', 'w', 'e', 'r', 't', 'y'],
datasets: [{
data: [6, 5, 4, 3, 2, 1]
}]
},
options: {
title:{
display: true,
text: "My Second Chart"
},
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}]
}
}
},
barConfig = {
type: 'bar',
data: {
labels: ['a', 's', 'd', 'f', 'g', 'h'],
datasets: [{
data: [10, 20, 30, 40, 50, 60]
}]
},
options: {
title:{
display: true,
text: "My First Chart"
},
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}]
}
}
},
Try using charty.live,which gives the developers, the leverage to create charts without single line of code.