Develop Reference

How can I create a dynamically assigned variable for a chart with chart.js?

I am trying to create a series of line chart dynamically and then update them once the data has been updated for a particular user in real-time.
I am running into difficulty because I can only get the most recent one to render.
I think this is because when the following code runs it overwrites the ctx variable and I lose the earlier charts.
I tried the following technique with dynamic variables so no two ctx variables would be the same, but it doesn't work.
Thanks in advance for your help.
window['ctx_'+userid] = document.getElementById("forceCurveGraph_"+userid).getContext("2d");
window['myLineChart'+userid] = new Chart(window['ctx_'+userid], {
type: 'line', data: {
datasets: [{
label: "Force Curve",
data: forcecurvedata, backgroundColor: ['rgba(57,118,251, 0.8)']
}],
labels: labels
}, options: {
backgroundColor: ['rgba(40, 84, 141, 0.3)'],
scales: {
yAxes: [{
ticks: {
beginAtZero: true,
max: graphMax
}
}],
xAxes: [{
ticks: {
display: false
}
}]
}
}
})

Stacked bar chart with chartjs with included values

I am trying to create a visitors bar chart with included values, for example:
I want to show a bar chart of total daily visitors, and that bar should contain info of total visitors and first time visitors.
so data for a bar should look like:
data: {
labels: getDataAttributes(data, 'data-date'),
// an array holding the date of each bar (custom function)
// for example purposes lets say its just 3 bars
datasets: [{
label: ['Number of visitors', 'Number of new visitors'],
data: [[20,15], [25,10], [30, 15]],
// Here if we would use a simple stacked bar chart the height would be the sum of 2 values
// e.g.(20+15=35), but I wish that the bar height would be the number of total visitors 20
// the tooltip should contain values of total visitors and new visitors respectively 20 and 15
}]
}
I looked in the chartjs documentation, but found only examples with stacked values and that solution is not applied in my desired design, can someone please reference documentation/articles/tutorials or personal experience or perhaps I should switch to d3js? Thanks.

You could define two datasets, the first one would contain the values of new visitors, the second one the values of all visitors.
Then you would define the x-axis as being stacked:
options: {
scales: {
xAxes: [{
stacked: true
}],
Please take a look at below runnable code snippet to see how it works:
const baseData = [[20,15], [25,10], [30, 15]];
new Chart('chart', {
type: 'bar',
data: {
labels: ['25.10.2020', '26.10.2020', '27.10.2020'],
datasets: [{
label: 'Number of new visitors',
data: baseData.map(v => v[1]),
backgroundColor: 'green'
},
{
label: 'Number of visitors',
data: baseData.map(v => v[0]),
backgroundColor: 'blue'
}]
},
options: {
scales: {
xAxes: [{
stacked: true
}],
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
<canvas id="chart" height="100"></canvas>

How to remove the coloured rectangle(dataset label) in chartJS

I have used the chartjs 2.8 and drew a Bar chart using the same. There is one rectangle coming above the chart with filled color (https://imgur.com/a/fj8q0Tl). I have tried multiple ways to remove that but fails.
I have tried the below code but no luck.
legend: {
display: false,
}
Here is my current code
var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
type: 'bar',
data: chartData1,
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
Could you anyone please tell me how to remove that?

It should be this, if it doesnt work you aren't on version 2 or something else is wrong.
var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
type: 'bar',
data: chartData1,
options: {
legend: {
display: false,
},
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});

Remove top horizontal line in a horizontal bar chart (Chart.js 2)

I created a horizontal grouped bar chart in Chart.js but am getting stuck on a weird problem.
The problem is that while I disabled all grid lines and borders the chart is still showing a top horizontal line which I would like to get rid off.
It is visible in this screenshot: http://imgur.com/41YGxA8.
I also made a JSFiddle: https://jsfiddle.net/bsocw1v9/
function create_horizontal_bar_chart(){
/**
* Draw the chart on the correct canvas. Add the correct data sets
* and set the correct draw type.
*/
let ctx = document.getElementById('monthly_subscription_revenue_chart').getContext("2d");
let data = {
labels: ['Diensten'],
datasets: [
{
type: 'horizontalBar',
backgroundColor: "rgb(0,33,86)",
data: [2250],
stack: 1
},
{
type: 'horizontalBar',
backgroundColor: "rgb(219,219,219)",
data: [3000],
stack: 2
},
{
type: 'horizontalBar',
backgroundColor: "rgb(240,95,0)",
data: [750],
stack: 3
},
]
};
new Chart(ctx, {
type: 'horizontalBar',
data: data,
showScale: false,
options: {
legend: {
display: false
},
tooltips: {
enabled: false
},
hover: {
mode: null
},
scales: {
xAxes: [{
stacked: true,
display: false,
gridLines: {
drawBorder: false,
},
}],
yAxes: [{
stacked: true,
barPercentage: 0.9,
gridLines: {
drawBorder: false,
},
}]
}
}
});
}
I hope someone could help me with this problem as I simply can't figure out whats causing this.

You have only disabled borders on the edge of the chart (by setting drawBorder to false), not grid lines. The line that bugs you is a grid line. To disable grid lines for an axis use:
gridLines: {
display: false
}
Look at the docs under "Grid Line Configuration".

Horizontal xAxis labels in Chart.js

I'm working with a chart-js bar chart that has to be placed inside a small div so I was searching for a way to make the labels in the x-axis horizontal instead of diagonal. The point is to gain as much height as possible for the actual bars because right now the labels consume almost 40% of the available space.
This is my code:
let options = {
responsive: true,
maintainAspectRatio: false,
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}],
xAxes: [{
display: false
}]
}
};
let ctx = document.getElementById('barChartCtx');
let barChart = new Chart(ctx, {
type: 'bar',
data: data,
options: options
});
I have temporarily disabled the xAxis labels. It works but ideally I would like them to be horizontal. Thoughts?

You can use the scale ticks maxRotation and minRotation properties to control this.
Here is an example.
let options = {
responsive: true,
maintainAspectRatio: false,
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}],
xAxes: [{
ticks: {
minRotation: 0,
maxRotation: 0
}
}]
}
};
Keep in mind that the reason they are diagonal is because chart.js calculated that they would not fit at their default horizontal orientation. If you find that they overflow on each other when horizontal then you can still use the above properties to tweak the rotation so they are only slightly diagonal.