We Keep Coding

Chart.js one label per stacked bar

I'm using chart.js with datalabels plugin but I'm having issues with displaying one label per stacked bar.
I have tried to access to the dataset meta to distinguish to show the labels but struggling to achieve. Help me to do that.
Please see my example here: https://jsfiddle.net/fraserr/9ezggxx5/314/
var datasets = JSON.parse('[{"username":"test name","stack":"2","label":"test name - actual","dataset":{"2018-12-17":"3","2018-12-24":"1"},"data":["3","1"],"borderColor":"#db005f","backgroundColor":"#f190b0","borderWidth":1},{"username":"test name","stack":"2","label":"test name - target","dataset":{"2018-12-17":"10","2018-12-24":"10"},"data":["10","10"],"borderColor":"#511158","backgroundColor":"#aa89ab","borderWidth":1},{"username":"Santa Claus","stack":"1","label":"Santa Claus - actual","dataset":{"2018-12-17":"2","2018-12-24":0},"data":["2",0],"borderColor":"#db005f","backgroundColor":"#f190b0","borderWidth":1},{"username":"Santa Claus","stack":"1","label":"Santa Claus - target","dataset":{"2018-12-17":"2","2018-12-24":"2"},"data":["2","2"],"borderColor":"#511158","backgroundColor":"#aa89ab","borderWidth":1}]');
new Chart('chart', {
type: 'bar',
data: {
labels: ['2018-12-17', '2018-12-24'],
datasets: datasets
},
options: {
scales: {
xAxes: [{
stacked: true,
ticks: {
beginAtZero: true,
suggestedMax: 50
}
}],
yAxes: [{
stacked: true
}]
},
plugins: {
datalabels: {
formatter: (value, ctx) => {
return ctx.dataset.username;
},
align: 'end',
anchor: 'end',
}
}
}
});
My desired result is to have "test name" on at the top of the 1st bar, "Santa Claus" on the 2nd, "test name" on 3rd and "Santa Claus" on 4th. Ideally I would always show one label per bar (even when one is bar per stack is hidden).
Thanks in advance!

How to make y axis only integer scaling in ChartJS?

I just a newbie to ChartJS,enter image description here
I have 3 questions:
1.How can I make the Y axis only integer? where should I add it?
2.How can I turn off the title which is ""my open case"? I tried it to set it to null but dodn't work?
3.How can I turn off the background grids off? it looks weird
This is my code:
var columnChart = document.getElementById("columnChart").getContext('2d');
var myChart = new Chart(columnChart, {
type: 'bar',
data: {
labels: columnChartLabel,
datasets: [ {
label: 'My Open Case',
data: columnChartNumber,
backgroundColor: "rgba(255,153,0,1)"
}]
}
});

How can I make the Y axis only integer? where should I add it?
You can make the Y axis only integer by setting stepSize property to 1 for ticks in the chart options.
options: {
scales: {
yAxes: [{
ticks: {
stepSize: 1
}
}]
}
}
see tick configuration options
How can I turn off the title which is "my open case"?
You can turn off the title (aka Legend) by setting display property to false for the legend.
options: {
legend: {
display: false
}
}
see legend configuration
How can I turn off the background grids off?
You can turn off the background grids by setting gridLines's display property to false for both the x and y axis.
options: {
scales: {
xAxes: [{
gridLines: {
display: false
}
}],
yAxes: [{
gridLines: {
display: false
}
}]
}
}
see grid line configuration
ᴡᴏʀᴋɪɴɢ ᴇxᴀᴍᴘʟᴇ ᴏɴ ᴊꜱꜰɪᴅᴅʟᴇ

Chart.js Y axis label, reverse tooltip order, shorten X axis labels

I am creating a stacked bar chart using Chart.js. However, I cannot find in the documentation how to change some things.
How to add a label on the Y axis.
How to shorten the label on the X axis so it displays only
the first 10 letters.
How to reverse the order in which the values are shown in
the tooltip.
Are these thigs are possible to implement?
I have marked what I want to change here.
Here are what my chart options look like now:
var ctx = $("#newchart");
var barGraph = new Chart(ctx, {
type: 'bar',
data: chartdata,
options: {
barValueSpacing: 20,
tooltips: {
enable: true,
mode: 'label',
callbacks: {
label: function(tooltipItem, data){
var datasetLabel = data.datasets[tooltipItem.datasetIndex].label || '';
return datasetLabel + ': ' + Number(tooltipItem.yLabel) + ' Users';
}
}
},
responsive: true,
segmentShowStroke: true,
scales: {
xAxes: [{
display: false,
stacked: true,
ticks:{
stepSize : 10,
},
gridLines: {
lineWidth: 0,
color: "#9E9E9E"
}
}],
yAxes: [{
stacked: true,
ticks: {
min: 0,
stepSize: 10,
},
gridLines: {
lineWidth: 0,
color: "#9E9E9E"
}
}]
}
}
});

1. Adding a Y-axis label
in the yAxes object give it a scaleLabel object that takes in labelString (example fiddle)
yAxes: [{
scaleLabel: {
labelString: 'Value'
}
}]
2. Shortening xAxis category labels
For this, you can pass a userCallback function to the xAxis ticks object that can return your desired output. The function will take in the original label in its first parameter so you can just return a substring at your desired length, example fiddle
xAxes: [{
ticks: {
userCallback: function(label, index, labels) {
if(typeof label === "string")
{
return label.substring(0,1)
}
return label;
},
}
}],
3. reverse tooltip order
The tooltips object accepts a function called itemSort that can be passed to Array.prototype.sort.
So you could so something like below, but you may also need to compare the objects index as well as the datasetIndex to get your desired result. (example fiddle)
tooltips: {
mode: 'label',
itemSort: function(a, b) {
return b.datasetIndex - a.datasetIndex
},
},

Stacked bar chart results in misaligned bars

I'm attempting to create a bar chart that stacks the bars for three respective data series. I'm using Chart.js with angular charts. I have the stacked property set accordingly with: stacked: true, yet the bars do not align with one another vertically.
Basically, my question is: how do I make the data from each series line up so that the bars are of uniform width but with staggered colors vertically?
Here's some of my chart configuration code:
$scope.barLabels = ['-120 to -80', '-80 to -70', '-70 to -60', '-60 to -50', '-50 to -10'];
$scope.barData = [
[3, 9, 2, 11, 5],
[6, 9, 2, 11, 5],
[2, 1, 2, 4, 5]
];
$scope.barOptions = {
legend: {
display: false
},
scales: {
yAxes: [
{
stacked: true,
display: true,
position: 'left',
ticks: {
beginAtZero: true,
min: 0
}
}
]
}
};

You should also set stacked: true for the x-axis. Your scales should, therefore, look like this:
...
scales: {
xAxes: [{
stacked: true
}],
yAxes: [{
stacked: true,
display: true,
position: 'left',
ticks: {
beginAtZero: true,
min: 0
}
}]
}
...
Have a look at Bar Chart Options and at the first code sample of the section. In this code sample, stacked: true is set for both axes, x-axis and y-axis. This will get you a stacked bar chart as you want it.

Chart.js remove the first vertical line

Is there a way to remove the initial vertical line from the chart without removing the values?
here is how my options look like:
scales: {
yAxes: [{
ticks: {
beginAtZero: true,
maxTicksLimit: 5,
suggestedMax: maxValue
}
}],
xAxes : [{
categoryPercentage: 1.0,
display : false, // set this to false to hide the labels under the bars
gridLines: {
display: false
}
}]
},

What you want to remove is probably the border of the chart. In Chart.js v2 I was able to remove this first vertical border by setting drawBorder to false for the grid line configuration:
options: {
scales: {
yAxes: [{
gridLines: {
drawBorder: false
}
}]
}
}
In Chart.js docs it is explained in https://www.chartjs.org/docs/latest/axes/styling.html#grid-line-configuration.

Try using the chart option, scaleLineColor, and setting the color to have 0 opacity:
new Chart(ctx).Bar(data, {
scaleLineColor: 'rgba(0, 0, 0, 0)',
});
http://jsfiddle.net/wb3kcunt/33/
If you are using chartjs v2, then the showBorder option in scales.gridLines should do the trick:
options: {
scales: {
gridLines: {
showBorder: false,
}
}
}
See docs: http://www.chartjs.org/docs/#scales