Chart js grouped bar chart with individual label - javascript

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>

Related

ChartJS: Grouped Stacked Bar Chart not Grouping

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/

chartJS Horizontal Bar - Hide Stacked Bars But Still Show In Tooltip

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

How can I hide legend text if it's zero?

I'm trying to hide the legend title of an item, if it's value is zero. There are similar problems existing here, but nothing led to solving my problem.
Below is my source code:
<script>
var ctx = document.getElementById('beratungsfelderChart');
var myDoughnutChart = new Chart(ctx, {
type: 'doughnut',
data: {
labels: ['Group A', 'Group B', 'Group C', 'Group D', 'Group E'],
datasets: [{
label: '# of Votes',
data: [0, 3, 3, 5, 2],
backgroundColor: [
'#172b4dD9',
'#2dce89D9',
'#231F20D9',
'#192d35D9',
'#3B6058D9'
]
}]
},
options: {
legend: {
labels: {
//filter: function(item, chart, context) {
// return !item.text.includes('Test');
//}
filter: function(item, context) {
return !context.dataset.data[context.dataIndex] == 0;
}
}
},
axis: {
scales: {
yAxes: [{
display: false
}],
xAes: [{
ticks: {
display: false
}
}]
}
},
plugins: {
datalabels: {
display: function(context) {
return context.dataset.data[context.dataIndex] > 1;
}
}
}
}
});
</script>
As you can see I tried a few potential solutions, but until now, nothing worked out unfortunately.
1. options -> legend -> labels
2. options -> plugins -> datalabels
I hope that someone can help me somehow.
Best,
Nader
You should use legend.labels.filter as follows.
legend: {
labels: {
filter: (legendItem, data) => data.datasets[0].data[legendItem.index] != 0
}
}
new Chart(document.getElementById('beratungsfelderChart'), {
type: 'doughnut',
data: {
labels: ['Group A', 'Group B', 'Group C', 'Group D', 'Group E'],
datasets: [{
label: '# of Votes',
data: [0, 3, 3, 5, 2],
backgroundColor: [
'#172b4dD9',
'#2dce89D9',
'#231F20D9',
'#192d35D9',
'#3B6058D9'
]
}]
},
options: {
legend: {
labels: {
filter: (legendItem, data) => data.datasets[0].data[legendItem.index] != 0
}
},
axis: {
scales: {
yAxes: [{
display: false
}],
xAes: [{
ticks: {
display: false
}
}]
}
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.js"></script>
<canvas id="beratungsfelderChart" height="90"></canvas>
You can also use generateLabels instead of filter. it's a newer method and you would be able to change value and style of each legends. For example I've removed zero values and added data to each label :
new Chart(document.getElementById('beratungsfelderChart'), {
type: 'doughnut',
data: {
labels: ['Group A', 'Group B', 'Group C', 'Group D', 'Group E'],
datasets: [{
label: '# of Votes',
data: [0, 3, 3, 5, 2],
backgroundColor: [
'#192d35',
'#36A2EB',
'#FFCE56',
'#FF6384',
'#3B6058'
]
}]
},
options: {
legend: {
labels: {
generateLabels: function (chart) {
var newLegends = [];
chart.data.labels.forEach(function (label, index) {
if (chart.data.datasets[0].data[index] == 0) //zero values
return;
var legend = {
text: label + ' ('+chart.data.datasets[0].data[index]+')',
fillStyle: chart.data.datasets[0].backgroundColor[index]
};
newLegends.push(legend)
});
return newLegends;
}
}
},
axis: {
scales: {
yAxes: [{
display: false
}],
xAes: [{
ticks: {
display: false
}
}]
}
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.js"></script>
<canvas id="beratungsfelderChart" height="90"></canvas>

Highcharts - How to remove drilldown link on empty items?

I'm using Highcharts Stacked column and I need to remove drilldown link when some item is empty.
Preconditions:
Use value 0 or null when some item is empty because it's necessary to sort the chart columns.
Some columns may have drilldown and others not, depends on the data.
Please refer to the jsfiddle example:
http://jsfiddle.net/tsenffor/
How to reproduce:
Below the chart, uncheck the the "CCC" label.
Note that "Name 4 column" has no value, but the drilldown link is enabled. See the image below.
If possible hide the empty column, but I still need this value set 0 or null in the code because the columns sorting.
Find the related columns sorting issue here.
$(function () {
$('#container').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Stacked column chart'
},
xAxis: {
type: 'category'
},
yAxis: {
min: 0,
title: {
text: 'Highchart test'
},
stackLabels: {
enabled: true,
style: {
fontWeight: 'bold'
}
}
},
legend: {
enabled: true
},
plotOptions: {
series: {
stacking: 'normal'
}
},
series: [{
name: 'AAA',
data: [{
name: 'Name 1',
y: 5,
drilldown: 'Name1AAA'
}, {
name: 'Name 4',
y: 0
}, {
name: 'Name 3',
y: 2
}, {
name: 'Name 2',
y: 2
}]
}, {
name: 'BBB',
data: [{
name: 'Name 1',
y: 10,
drilldown: 'Name1BBB'
}, {
name: 'Name 4',
y: 0
}, {
name: 'Name 3',
y: 0
}, {
name: 'Name 2',
y: 5
}]
}, {
name: 'CCC',
data: [{
name: 'Name 1',
y: 4,
drilldown: 'Name1CCC'
}, {
name: 'Name 4',
y: 12,
drilldown: 'Name4CCC'
}, {
name: 'Name 3',
y: 8
}, {
name: 'Name 2',
y: 1
}]
}],
drilldown: {
series: [{
name: 'Name 1 - AAA',
id: 'Name1AAA',
data: [
['Name 1/1', 2],
['Name 1/2', 2],
['Name 1/3', 1],
]
}, {
name: 'Name 1 - BBB',
id: 'Name1BBB',
data: [
['Name 1/1', 7],
['Name 1/2', 2],
['Name 1/3', 1],
]
}, {
name: 'Name 1 - CCC',
id: 'Name1CCC',
data: [
['Name 1/1', 2],
['Name 1/2', 3],
['Name 1/3', 4],
]
}, {
name: 'Name 4 - CCC',
id: 'Name4CCC',
data: [
['Name 4/1', 4],
['Name 4/2', 5],
['Name 4/3', 3],
]
}]
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="http://github.highcharts.com/modules/drilldown.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
Is there a way to do this?
Thanks!
We can use drilldown option to control the drilldown.
drilldown: {
//for axis label
activeAxisLabelStyle: {
textDecoration: 'none',
fontStyle: 'italic'
},
//for datalabel
activeDataLabelStyle: {
textDecoration: 'none',
fontStyle: 'italic'
}
}
Reference:http://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/drilldown/labels/
To remove links of x-axis labels use this:
Highcharts.Tick.prototype.drillable = function () {};
Look this:
http://jsfiddle.net/tsenffor/3/

Distance between x-axis labels and the chart in Highcharts

I'm trying to create a distance between the x-axis labels and the chart in Highcharts. I tried using "distance" and "padding" but none worked.
chart: {
type: 'column'
},
title: {
text: 'Data input as column arrays'
},
data: {
columns: [
[null, 'Apples', 'Pears', 'Oranges'], // categories
['Blue', 1, 4, 3], // first series
['Black', 5, 4, 2] // second series
]
},
xAxis: {
categories: [
'First Category',
'Second Category',
'Third Category',
],
labels: {
style: {
fontFamily: 'openSans',
fontSize: '16px',
color: '#000000',
},
}
}
Here is jsfiddle: http://jsfiddle.net/aaq4zww5/2/
Thanks!
Option1: use the offset in the xAxis:
xAxis: {
...
offset: 10,
},
Option2: use y under xAxis->labels:
labels: {
...
y: 25,
},
Check jsfiddle.

Categories

Resources