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>
Related
I have a chart as below, it has a datalabel inside each stacked bar showing a percentage. Now I am wanting to add a second set of datalabel on top of each bar(consider each set of stacked bar as one bar) that shows the month, say for person 1, the right bar says current month(may), the middle one says last month(april), the left bar says march.
I only need three month.
Any help is appreciated.
const trend_options = {
responsive: true,
maintainAspectRatio: false,
plugins: {
datalabels: {
formatter: function(value, ctx) {
const otherDatasetIndex = ctx.datasetIndex === 0 ? 1 : 0;
const total = ctx.chart.data.datasets[otherDatasetIndex].data[ctx.dataIndex] + value;
return `${(value / total * 100).toFixed()}%`;
},
font: {
weight: "bold"
},
color: "#fff",
display: function(context) {
let index = context.dataIndex;
let value = context.dataset.data[index];
return value > 0; // display labels with a value greater than 0
}
},
},
scales: {
x: {
stacked: true
},
y: {
stacked: true,
suggestedMax: 15,
ticks: {
beginAtZero: true,
stepSize: 5,
}
}
},
};
const app_data_trend = [{
label: 'App Month 1 TW',
data: [3, 4, 5, 6, 4, 4, 4],
backgroundColor: '#007bff',
stack: 'Stack 0',
},
{
label: 'App Month 1 jira',
data: [3, 4, 5, 4, 3, 2, 3],
backgroundColor: '#6DB526',
stack: 'Stack 0',
},
{
label: 'App Month 2 TW',
data: [4, 4, 4, 3, 2, 5, 4],
backgroundColor: 'pink',
stack: 'Stack 1',
},
{
label: 'App Month 2 jira',
data: [4, 2, 5, 2, 3, 3, 4],
backgroundColor: 'red',
stack: 'Stack 1',
},
{
label: 'App Month 3 TW',
data: [2, 4, 5, 2, 4, 5, 3],
backgroundColor: 'grey',
stack: 'Stack 2',
},
{
label: 'App Month 3 jira',
data: [1, 1, 2, 4, 4, 3, 5],
backgroundColor: 'yellow',
stack: 'Stack 2',
},
]
const ctx8 = document.getElementById("tsa-applications-trending");
const chart8 = new Chart(ctx8, {
plugins: [ChartDataLabels],
type: 'bar',
data: {
labels: ['person1', 'person2', 'person3', 'person4'],
datasets: app_data_trend
},
options: trend_options,
});
<script src="https://cdn.jsdelivr.net/npm/chart.js#3.7.1/dist/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js#3.0.0/dist/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels#2.0.0"></script>
<div class="chart-container" style="position: relative; height:80vh; width:80vw">
<canvas id="tsa-applications-trending"></canvas>
</div>
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/
First, my apologies for the messy script. I am restricted to using a notepad due to limited resource where I am.
When I graph a scatterplot, the tooltip returns point.y value in numeric terms. I would like to show strings such as one, two, Very Berry instead of numeric values by using category names in yAxis.
<html>
<head>
<script src="https://code.highcharts.com/highcharts.js"></script>
</head>
<body>
<div id="container" style="min-width: 310px; height: 100%; max-width: 100%; margin: 0 auto"></div>
<script>
Highcharts.chart('container', {
chart: {
type: 'scatter',
zoomType: 'xy'
},
title: {
text: 'Some title'
},
xAxis: {
title: {
enabled: true,
text: 'Date'
},
type: 'datetime',
labels:
{
formatter: function () {
return Highcharts.dateFormat("%b %Y", this.value);
}
}
},
yAxis: {
title: {
text: 'Rank goes to 10000'
},
categories: [
'One',
'Two',
'Three',
'Four',
'Five',
'Six',
'Seven',
'Eight',
'Nine',
'Ten'
],
type: 'category'
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: 0,
y: 0,
floating: false,
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF',
borderWidth: 1
},
plotOptions: {
scatter: {
marker: {
radius: 6,
fillOpacity:0.3,
states: {
hover: {
enabled: true,
lineColor: 'rgb(100,100,100)'
}
}
},
tooltip: {
headerFormat: '<b>{series.name}</b><br>',
pointFormat: 'Rank: {point.y} <br>Date: {point.x:%b %e, %Y}'
}
}
},
series: [{
name: 'Beer',
data: [
[Date.UTC(2018, 2, 23), 1],
[Date.UTC(2009, 5, 22), 2],
[Date.UTC(2018, 6, 1), 3],
[Date.UTC(2009, 9, 11), 4],
[Date.UTC(2018, 11, 30), 5],
[Date.UTC(2009, 10, 10), 6],
[Date.UTC(2013, 12, 1), 7],
[Date.UTC(2015, 4, 6), 8],
[Date.UTC(2005, 2, 1), 9],
[Date.UTC(2010, 1, 1), 10]
]
},{
name: 'Wine',
color: 'rgba(223, 83, 83, .9)',
data: [
[Date.UTC(2012, 1, 1), 8]
]
}
]
});
</script>
</body>
</html>
With tooltip.pointFormat Api Doc, you can do what you are looking for
var yCategories = [
'One',
'Two',
'Three',
'Four',
'Five',
'Six',
'Seven',
'Eight',
'Nine',
'Ten'
];
...
tooltip: {
//headerFormat: '<b>{series.name}</b><br>',
//pointFormat: 'Rank: {point.y} <br>Date: {point.x:%b %e, %Y}',
pointFormatter: function() {
var formatedDate = new Date(this.x).toLocaleDateString("en-US")
return '<b>' + this.series.name + '</b><br>' +
'Rank: ' + yCategories[this.y - 1] + '<br>Date: ' + formatedDate
}
}
Fiddle
The line series don't properly match up.
$(function () {
$('#container').highcharts({
title: {
text: 'Combination chart'
},
xAxis: {
categories: ['Apples', 'Oranges', 'Pears', 'Bananas', 'Plums']
},
labels: {
items: [{
html: 'Total fruit consumption',
style: {
left: '50px',
top: '18px',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'black'
}
}]
},
plotOptions: {
series: {
stacking: 'normal'
}
},
series: [{
type: 'column',
name: 'Jane',
data: [3, 2, 1, 3, 4],
stack: 0
}, {
type: 'column',
name: 'John',
data: [2, 3, 5, 7, 6],
stack: 0
}, {
type: 'column',
name: 'Joe',
data: [4, 3, 3, 9, 0],
stack: 0
}, {
type: 'line',
name: 'Average',
data: [3, 2.67, 3, 6.33, 3.33],
marker: {
lineWidth: 2,
lineColor: Highcharts.getOptions().colors[3],
fillColor: 'white'
}
}, {
type: 'line',
name: 'Total consumption',
data: [3, 2.67, 3, 6.33, 3.33],
center: [100, 80],
size: 100,
showInLegend: false,
dataLabels: {
enabled: false
}
}]
});
});
Here's a fiddle to show what I'm doing:
http://jsfiddle.net/tn7b0fb0/
The numbers for the line's are the same, why aren't they on top of eachother?
If you unstack the bar charts, it looks right.
Remove the stacking: 'normal' from plotOptions, and apply it individually at a series level, to the column series only.
Updated Jsfiddle
I have created a donut chart using the highcharts library.
I need to have two different datalabels, one outside how it is at the moment and another datalabel on the inside.
Expected outcome:
Here is a fiddle: http://jsfiddle.net/FQxf4/
JS:
$(function () {
$('#container5').highcharts({
chart: {
type: 'pie',
options3d: {
enabled: false,
alpha: 0
}
},
colors: ['#081969', '#0e2569', '#1e3b81', '#284893', '#30509b'],
title: {
text: ''
},tooltip: {
enabled: false
},
plotOptions: {
pie: {
innerSize: 130,
depth: 45
}
},
series: [{
name: 'Delivered amount',
data: [
['31%', 31],
['25%', 25],
['22%', 22],
['15%', 15],
['7%', 7]
]
}]
});
});
You can use two same series. Something like this:
series: [{
name: 'Delivered amount',
data: [
['31%', 31],
['25%', 25],
['22%', 22],
['15%', 15],
['7%', 7]
],
size: '60%',
dataLabels: {
formatter: function() {
return this.y
},
distance:10
}
},{
name: 'Delivered amount',
data: [
['3', 31],
['2', 25],
['2', 22],
['5', 15],
['7', 7]
],
size: '60%',
dataLabels: {
formatter: function() {
return this.point.name
},
color: 'white',
distance:-10
}
}]
DEMO