We Keep Coding

Chart JS annotation issues

I am trying to load annotation the dynamic chart that I create after receiving data from the database and I have tried all possible options but somehow the chart loads but no the annotations.
chart.js version = v2.9.4
chart-plugin-annotation.min.js version = 0.5.7
Function in JS that runs when data is receiving from db:
function DrawChart(timeLabelList, unitsProducedList, goalList){
if(draw_the_chart != null) draw_the_chart.destroy();
Chart.defaults.global.defaultFontColor = 'white';
var ctx = document.getElementById('draw_the_chart').getContext("2d");
draw_the_chart = new Chart(ctx, {
type: 'line',
//plugins: [ChartAnnotation],
data: {
labels: timeLabelList,
datasets: [
{
label: 'Goal',
yAxisID: 'A',
data: goalList,
//backgroundColor: chartColumnColorBlueSolid,
borderColor: chartColumnColorGreenSolid,
borderWidth: 2,
pointStyle: 'star'
}]
},
options: {
annotation: {
annotations: [
{
id: "a-line-1",
type: "line",
mode: "vertical",
scaleID: "y-axis-0",
value: "1",
borderColor: "red",
borderWidth: 2
}
]
},
legend: {
position: 'bottom',
display: true,
},
elements: {
line: {
tension: 0
}
},
scales: {
xAxes: [{
stacked: true,
type: 'time',
time: {
unit: 'hour'
},
}],
yAxes: [{
stacked: false,
id: 'A',
type: 'linear',
position: 'right',
}]
},
}
});
}
I tried all possible ways to register and also different ways to used the plugin but had no luck plotting it. I even used latest CDN versions but had no luck.
Can anyone help with it.
Thanks!

chartjs display data in one bar line with 3 different data sets in 3 different colors

I currently display my data like this:
Click here
but I would like to display the data like this:
Click here
The idea is that at the bottom it would show the summary of all three colors numbers combined, but once you hover it would show how much each color has.
If all is one bar, if red is 7, blue is 3, the red but be a lot more in the bar.
This is the code for version 1, done with chart js
var ctx = document.getElementById("myChart").getContext("2d");
var data = {
labels: ["Chocolate", "Vanilla", "Strawberry"],
datasets: [
{
label: "Blue",
backgroundColor: "blue",
data: [3, 7, 4]
},
{
label: "Red",
backgroundColor: "red",
data: [4, 3, 5]
},
{
label: "Green",
backgroundColor: "green",
data: [7, 2, 6]
}
]
};
var myBarChart = new Chart(ctx, {
type: 'bar',
data: data,
options: {
barValueSpacing: 20,
scales: {
yAxes: [{
ticks: {
min: 0,
}
}]
}
}
});
const myChart = new Chart(
document.getElementById('myChart'),
config
);

your problem is the next, you are using a wrong config you must something like this:
<script src="https://cdn.jsdelivr.net/npm/chart.js#3.6.0/dist/chart.min.js"></script>
<canvas id="MyChart" width="400" height="200"></canvas>
<script>
new Chart(document.getElementById("MyChart"), {
type: 'bar',
data: {
labels: [2017],
datasets: [{
label: "Chocolate",
type: "bar",
stack: "Base",
backgroundColor: "#eece01",
data: [30],
}, {
label: "Vanilla",
type: "bar",
stack: "Base",
backgroundColor: "#87d84d",
data: [-15],
}, {
label: "Strawberry",
type: "bar",
stack: "Base",
backgroundColor: "#f8981f",
data: [20],
}, {
label: "candy",
type: "bar",
stack: "Base",
backgroundColor: "#00b300",
backgroundColorHover: "#3e95cd",
data: [-10]
}]
},
options: {
plugins: {
title: {
display: true,
text: 'Chart.js Bar Chart - Stacked'
},
},
responsive: true,
interaction: {
intersect: false,
},
scales: {
x: {
stacked: true,
},
y: {
stacked: true
}
}
}
});
</script>
Now you just need to fix the styles and sizes of the graphic

If someone finds this, the solution is this:
const config = {
type: 'bar',
data: data,
options: {
plugins: {
title: {
display: true,
text: 'Chart.js Bar Chart - Stacked'
},
},
responsive: true,
scales: {
x: {
stacked: true,
},
y: {
stacked: true
}
}
}
};

chartjs-plugin-streaming: onRefresh() callback isn't working

Hello I'm new in javascript world; I'm trying to display random numbers in real time with Chart.js and chartjs-plugin-streaming starting from a tutorial code which I started to modify for my scope.
const Chart= require ("chart.js");
const chartStreaming = require('chartjs-plugin-streaming');
const boxWhiteColor = "#2043CE";
const pressure_graph = document.getElementById('pressureGraph').getContext('2d');
Chart.register(chartStreaming);
let pressure_graph_config = {
type: 'line',
data: {
datasets: [{
label: 'Pressure',
data: [],
borderColor: boxWhiteColor,
fill: false
}]
},
options: {
title: {
display: true,
text: 'PRESSURE',
fontColor: boxWhiteColor,
fontSize: 30
},
scales: {
xAxes: [{
gridLines: {
display: true,
drawBorder: true,
color: boxWhiteColor,
lineWidth: 5},
ticks: {
fontColor: boxWhiteColor,
display: false
},
type: 'realtime',
realtime: {
duration: 10000,
refresh: 100, // plot at 10 Hz
delay:200,
pause: false, // chart is not paused
ttl: undefined, // data will be automatically deleted as it disappears off the chart
frameRate: 100, // data points are drawn 100 times every second
onRefresh: chart => {
console.log(trocarP.data.datasets.data);
chart.config.data.datasets.forEach(function(dataset) {
chart.data.dataset[0].data.push({
x: Date.now(),
y: Math.random() //pressure16bits[pressure16bits.length-1]
});
});
}
}
}],
yAxes: [{
scaleLabel: {
display: true,
labelString: '[mmHg]', fontColor: boxWhiteColor, fontSize: 30, fontStyle: 900,
},
ticks: {
fontColor: boxWhiteColor,
fontSize: 25,
fontStyle: 700,
maxTicksLimit: 5,
min: 0,
max: 40,
},
gridLines: {display: true, drawBorder: true, color: boxWhiteColor, lineWidth: 5},
}]
},
elements: {
point: {radius: 0},
},
legend: { display: false}
}
}
trocarP = new Chart (pressure_graph, pressure_graph_config);
The problem is the graph is being created on a canvas via the .html file, but then it doesn't display anything; trying to debug the code I found out that the console.log() I placed inside the onRefresh callback is not printing anything, so I'm assuming the callback isn't working. Any clue on what's happening?
Screenshot of the graph
Edit: I noticed that also Y axis label has not been displayed. I don't get what's wrong with this code.

You are using v2 syntax while using v3 of the lib this wont work as there are several breaking changes, see migration guide for all of them.
For example, way of defining scales has changed, you need an adapter for dates and more.
working basic v3 example:
var options = {
type: 'line',
data: {
datasets: [{
label: '# of Votes',
data: [],
borderColor: 'pink'
}]
},
options: {
scales: {
x: {
type: 'realtime',
realtime: {
duration: 20000,
refresh: 100,
delay: 200,
onRefresh: chart => {
const now = Date.now();
chart.data.datasets.forEach(dataset => {
dataset.data.push({
x: now,
y: Math.random()
});
});
}
}
}
}
}
}
var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
<body>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns/dist/chartjs-adapter-date-fns.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-streaming/2.0.0/chartjs-plugin-streaming.js"></script>
</body>

ChartJs - stacked bar chart with groups - how to create second x-axis with stack id

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>

Chart.js Stacked Bar - datasets visibility and ordering

I have a stacked chart with 3 datasets: Red, Green, Blue.
Here is the link to JSFiddle: https://jsfiddle.net/bwcfL58v/
Let's imagine that these are the layers, which overlay each others:
Red as bottom layer, then Green as middle layer and Blue as top layer.
Take a look at the third day: we don't see the red value, cause it behind the green value (red smaller than green here). So, the question is how to move Green to the bottom layer and Red higher. I need the biggest value to be always at the bottom and the smallest value - at the top, this will allow us to see all the datasets for each day.
All I need is to datasets always be visible and do not hide each others.
let ctx = document.getElementById("myChart");
let myChart = new Chart(ctx, {
type: "bar",
data: {
labels: ["Day 1", "Day 2", "Day 3"],
datasets: [
{
label: 'Blueberry',
data: [25, 30, 40],
backgroundColor: 'blue',
},
{
label: 'Greenberry',
data: [50, 60, 100],
backgroundColor: 'green',
},
{
label: 'Strawberry',
data: [100, 120, 50],
backgroundColor: 'red',
}
]
},
options: {
responsive: true,
maintainAspectRatio: false,
scales: {
xAxes: [{
stacked: true,
gridLines: {
drawOnChartArea: false
},
}],
yAxes: [{
stacked: false,
display: false,
gridLines: {
drawOnChartArea: false
},
ticks: {
beginAtZero: true,
},
}]
},
legend: {
display: false
}
}
});