Chart.js data set static numbers - javascript

how to make the Y-axis have static values, even if the graph is not drawn. I need to always have 4 values ​​0, 5, 10, 15, even if there is no graph. This is an updatable chart.
This is my chart
I need like this

This ca be achieved by defining the y-axis as follows:
y: {
suggestedMin: 0,
suggestedMax: 15,
ticks: {
stepSize: 5
}
}
Please take a look at below runnable code and see how it works.
new Chart('myChart', {
type: 'bar',
data: {
labels: ['A', 'B', 'C'],
datasets: [{
label: 'My Dataset',
data: [,,]
}]
},
options: {
scales: {
y: {
suggestedMin: 0,
suggestedMax: 15,
ticks: {
stepSize: 5
}
}
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.js"></script>
<canvas id="myChart" height="90"></canvas>

Related

How to display grid lines (without showing label) between each ticks?

I'm using Chart.js 2 (React-chart-js 2) to display a line chart.
Does anyone have any reference to keeping the vertical gridline between each displayed label?
It seems like the vertical gridline only showing on each displayed label.
You can make use of the scriptable options for this, see example that hides every second label, you can adjust it to hide a bigger step if you want.
Example:
var options = {
type: 'line',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
borderWidth: 1
},
{
label: '# of Points',
data: [7, 11, 5, 8, 3, 7],
borderWidth: 1
}
]
},
options: {
scales: {
x: {
ticks: {
callback: function(val, index) {
return index % 2 === 0 ? this.getLabelForValue(val) : '';
}
}
}
}
}
}
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.0.0/chart.js"></script>
</body>
You can try using following configuration
var config = {
type: 'line',
showDatapoints: true,
legend: { position: 'top' },
data: data,
options: {
responsive: true,
hoverMode: 'index',
stacked: false,
title: {
display: true,
text: 'Chart Title'
},
scales: {
yAxes: [{
type: 'linear', // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance
display: true,
position: 'left',
id: 'y-axis-1',
},
{
type: 'linear', // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance
display: true,
position: 'right',
id: 'y-axis-2',
// grid line settings
gridLines: {
drawOnChartArea: true, // only want the grid lines for one axis to show up
},
}],
}
}
};

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: How to display object data types on line graph correctly?

I want to achieve this exact graph using Graph.js:
I've reduced the code to this:
new Chart($('#myChart'), {
type: 'line',
data: {
labels: ['16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00'],
datasets: [{
label: 'Users',
fill: false,
borderColor: 'blue',
borderWidth: 2,
pointRadius: 0,
data: [{
x: "16:30",
y: 775
}, {
x: "17:00",
y: 750
} ]
}]
}
});
I can't seem to be adding key-value pairs with keys that don't exist on the horizontal axis.
I also want to display the labels on the time axis every 6 columns only, like in the photo. I tried adding empty values on the labels array like this: ['16:00', '','','','','', '17:00', '', ...]
To achieve this I had to skip the labels I didn't want to show, but they had to be on the graph, even though not visible. Here is the code for the Y axis:
options: {
scales: {
yAxes: [{
scaleLabel: {
display: true,
labelString: 'Users'
},
gridLines: {
drawTicks: false
},
ticks: {
min: 400,
max: 1100,
stepSize: 50,
skipRatio: 2,
callback: function(tick, index, array){
return (index % 2) ? "" : tick;
},
padding: 5
}
}]
}
}
I did the same for the X axis and managed to get an identical graph to the one on the image.

Chart.js: Minimum value for x-axis at horizontal stacked bar chart

I am using Chart.js to generate a horizontal stacked bar chart. The chart currently looks like this:
This chart shows the user after how many years they should restorate a specific component of a house. I am trying to change this to in which year the user should do the restoration. Adding the current year to the values results to the following:
This is pretty much what I need if I could set the starting value of the x-axis to the current year. I tried to do this setting the minimum value like this:
options: {
scales: {
xAxes: [{
ticks: {
min: 2017
},
...
Unfortunatly results in not displaying the datasets at all like this:
I tried all combinations with adding the current year and setting the minimum values but nothing results in a useful chart.
In the following you can see my current source code:
var mainChart_ctx = document.getElementById("main_chart").getContext("2d");
var mainChart_config = {
type: 'horizontalBar',
data: {
labels: ['Kellerdecke', 'Fenster', 'Außenwand', 'Erdberührter Boden', 'Dach'],
datasets: [{
label: 'Beginn ab heute',
backgroundColor: 'transparent',
data: [4, 21, 25, 25, 25],
borderColor: '#666',
borderWidth: 1
},
{
label: 'Sanierungsdauer',
backgroundColor: '#ffcc00',
data: [2, 5, 5, 5, 5],
borderColor: '#666',
borderWidth: 1
},
{
label: 'Mittlere Restlebensdauer',
backgroundColor: 'orange',
data: [39, 0, 38, 51, 37],
borderColor: '#666',
borderWidth: 1
},
{
label: 'Maximale Restlebensdauer',
backgroundColor: 'orangered',
data: [20, 0, 0, 0, 0],
borderColor: '#666',
borderWidth: 1
}
]
},
options: {
tooltips: {
enabled: true
},
legend: {
display: false
},
title: {
display: true,
text: 'Sanierungsfahrplan',
fontSize: 24
},
scales: {
xAxes: [{
ticks: {
min: 0 /* Todo: change to current year? */
},
stacked: true,
scaleLabel: {
display: true,
labelString: 'Jahre',
fontSize: 16
}
}],
yAxes: [{
ticks: {
stepSize: 10
},
stacked: false,
scaleLabel: {
display: true,
labelString: 'Bauteil',
fontSize: 16
},
}]
}
}
};
mainChart = new Chart(mainChart_ctx, mainChart_config)
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.bundle.min.js"></script>
<canvas id="main_chart"></canvas>
I was able to get a suitable result using a callback like this:
xAxes: [{
ticks: {
min: 0,
callback: function (value, index, values) {
return value + 2017;
}
},
...
]
I found that suggestedMin works well:
options: {
scales: {
xAxes: [{
display: true,
ticks: {
suggestedMin: 2017
}
}]
}
}

How To Format Scale Numbers in Chart.js v2

First of all, I apologize if my question is a slightly the same as others question. I searched for a solution and found 3 similar questions, yet none of them worked in my case, because the examples I found use Chart.js v1.
I saw a sample using a function placed in scaleLabel to format the numbers just like this:
var options = {
animation: false,
scaleLabel: function(label){
return '$' + label.value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}
};
The above code, however, doesn't work anymore in the new Chart.js v2.
How can I format the scale numbers in Chart.js v2?
Here is my code: https://jsfiddle.net/2n7xc7j7/
When adding option configurations, you need to make sure you nest the settings in the right sections. You can format the scale numbers by adding a callback function to the yAxes ticks configuration section:
options = {
scales: {
yAxes: [{
ticks: {
callback: function(value) {
return value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}
}
}]
}
};
JSFiddle Demo: https://jsfiddle.net/2n7xc7j7/1/
In V3 the locale property has been added. This makes it so all the numbers on the scales an tooltips get formatted correctly automatically in the numberformat of that country code:
// Element
const ctx = document.getElementById("myChart")
// Data
const data = {
labels: ['First', 'Second', 'Third', 'Fourth'],
datasets: [{
label: 'Sample',
data: [2982, 1039, 3200, 2300],
backgroundColor: "rgba(90, 150, 220, 0.85)",
borderColor: "rgba(70, 120, 180, 1)",
borderWidth: 2
}],
}
// Options
const options = {
locale: 'en-US'
};
const chart_trans_hari = new Chart(ctx, {
type: 'bar',
data: data,
options: options
});
<canvas id="myChart"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.6.0/chart.js"></script>
I did this:
http://profwtelles.ddns.net/grafico2.html
var canvas = document.getElementById('chart');
new Chart(canvas, {
type: 'line',
data: {
labels: ['1', '2', '3', '4', '5'],
datasets: [{
label: 'A',
yAxisID: 'A',
data: [100, 96, 84, 76, 69]
}, {
label: 'B',
yAxisID: 'B',
data: [1, 1, 1, 1, 0]
}]
},
options: {
scales: {
yAxes: [{
id: 'A',
type: 'linear',
position: 'left',
}, {
id: 'B',
type: 'linear',
position: 'right',
ticks: {
max: 1,
min: 0
}
}]
}
}
});
I hope to help you.
Best Regards

Categories