I have a chart which is outputting information correctly but it's too tall. I've looked at the docs and can't find a way to make the Y-axis "smaller". By this, I mean changing the way it is calculate - so in this screenshot it is incrementing by 10s. Is it possible to increment it by, say, 20s? So I have three Y-axis points? This would reduce the height.
For reference, the way Google Analytics outputs data is a good way of doing it. Their charts are nice and slim, making space for other content around them.
You can use the stepSize property of y-axis ticks. By setting this property to a value (interval) of 20 will reduce the y-axis's ticks count.
scales: {
yAxes: [{
ticks: {
stepSize: 20
}
}]
}
ᴅᴇᴍᴏ
var chart = new Chart(ctx, {
type: 'line',
data: {
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May'],
datasets: [{
label: 'LINE',
data: [10, 30, 20, 50, 60],
backgroundColor: 'rgba(0, 119, 290, 0.2)',
borderColor: 'rgba(0, 119, 290, 0.6)',
fill: false
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true,
stepSize: 20 //<-- set this
}
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<canvas id="ctx"></canvas>
Related
I'm trying to make a line graph with a single stroke between each datapoint on the graph. There should be a small space between each side of the datapoint.
I see that the docs say to use borderDash but the strokes will run through my datapoints instead of only between. I looked for a way to add padding/margin around each datapoint but I don't see a way to do that.
Because of the borderDash limitation that you pointed out, I think the easiest way to get the desired effect is to use a combination of pointRadius, backgroundColor, pointBorderColor, and pointBorderWidth.
This works by creating a white border around each point that makes it looks like there's a gap.
For example:
backgroundColor: '#000',
pointRadius: 5,
pointBorderColor: '#fff',
pointBorderWidth: 3,
Here's what it looks like:
And here's a runnable snippet:
const ctx = document.getElementById('myChart').getContext('2d');
new Chart(ctx, {
type: 'line',
data: {
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
datasets: [{
borderColor: '#000',
backgroundColor: '#000',
pointRadius: 5,
pointBorderColor: '#fff',
pointBorderWidth: 3,
lineTension: 0,
data: [6.06, 82.2, -22.11, 21.53, -21.47, 73.61, -53.75, -60.32, -30, 20, 22, 25],
label: 'Dataset',
fill: false,
}, ],
},
options: {
scales: {
xAxes: [{
gridLines: {
drawOnChartArea: false,
drawTicks: false
}
}],
yAxes: [{
gridLines: {
drawOnChartArea: false,
drawTicks: false
}
}]
},
legend: {
display: false
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.js"></script>
<body>
<canvas id="myChart" width="600" height="400"></canvas>
</body>
I am trying to map multiple charts where x-axis (time) is fixed but y-axis can take multiple values like CPU%, RAM, IO-RATE and so on. If I try to build individual graphs things seems pretty easy but I have this weird requirement where I need to map everything on to same chart. I have been trying out things with chartjs library and I could see that Cartesian axes is capable of handling multiple axes. But the examples I find around Cartesian mostly have x-axis with some fixed label values. In my case it's time and I wonder how to do the same for time series. I also found this example for multiple time series but that doesn't seem to create multiple y-axis. What is required is something like this but I am having hard time trying to figure out how to achieve this.
I am using django for backend and I am open to try out any library out there that does this and can easily integrate with django. Currently I have been exploring things with chartjs.
First you need to define a unique xAxis and define it as a time cartesian axis.
xAxes: [{
type: 'time',
time: {
unit: 'minute',
tooltipFormat: 'HH:mm:ss'
}
}],
Then you define a linear cartesian yAxis for each dataset and make sure, the value of the yAxis.id matches the corresponding dataset.yAxisID. Use 'yAxis.position' to define whether the axis shall appear left or right of the chart.
Optionally you may also define the following Plugin Core API beforeLayout function that makes sure that an yAxis is also hidden when it's data set is hidden through a mouse click on a legend label.
plugins: [{
beforeLayout: chart => chart.data.datasets.forEach((ds, i) => chart.config.options.scales.yAxes[i].display = !ds._meta[0].hidden)
}],
Please have a look at below runnable code snippet that illustrates how it can be done.
const now = new Date().getTime();
const timestamps = new Array(10).fill().map((v, i) => now - i * 60000).reverse();
new Chart('chart', {
type: 'line',
plugins: [{
beforeLayout: chart => chart.data.datasets.forEach((ds, i) => chart.config.options.scales.yAxes[i].display = !ds._meta[0].hidden)
}],
data: {
labels: timestamps,
datasets: [{
label: 'CPU',
yAxisID: 'yAxis-CPU',
data: [68, 70, 71, 72, 75, 75, 76, 77, 79, 76],
borderColor: 'red',
fill: false
},
{
label: 'RAM',
yAxisID: 'yAxis-RAM',
data: [22, 23, 23, 23, 22, 20, 22, 22, 23, 25],
borderColor: 'blue',
fill: false
},
{
label: 'IO-RATE',
yAxisID: 'yAxis-IO-RATE',
data: [0.5, 0.6, 0.7, 0.8, 0.8, 0.2, 0.1, 0.1, 0.2, 0.2],
borderColor: 'green',
fill: false
}
]
},
options: {
scales: {
xAxes: [{
type: 'time',
time: {
unit: 'minute',
displayFormats: {
minute: 'HH:mm'
},
tooltipFormat: 'HH:mm:ss'
}
}],
yAxes: [{
id: 'yAxis-CPU',
type: 'linear',
position: 'left',
scaleLabel: {
display: true,
labelString: 'CPU %'
},
gridLines : {
display: false
},
ticks: {
beginAtZero: true
}
},
{
id: 'yAxis-RAM',
type: 'linear',
position: 'left',
scaleLabel: {
display: true,
labelString: 'RAM %'
},
gridLines : {
display: false
},
ticks: {
beginAtZero: true
}
},
{
id: 'yAxis-IO-RATE',
type: 'linear',
position: 'right',
scaleLabel: {
display: true,
labelString: 'IO-Rate %'
},
gridLines : {
display: false
},
ticks: {
beginAtZero: true
}
}
]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js"></script>
<canvas id="chart" height="90"></canvas>
I'm using chartjs-node to create a graph, and I use a label for the Y-axis.
My problem is that the distance between the Y-axes ticks and label is minimal and does not look good. I've gone over the docs and couldn't find anything all that useful for this scenario... There's an option under options -> scales -> yAxes -> ticks -> padding but it doesn't give the desired effect.
Currently I have a workaround under options -> scales -> yAxes -> ticks -> callback I manually insert spaces:
callback: (val) => ` ${val}%`
This works, but obviously is not the correct usage, and I believe that if the scale is linear this approach will prohibit me from using some of the features available with a linear scale.
Anyone knows how I can create the separation between the ticks and the label in a more elegant way?
This can be achieved using afterFit callback function of y-axis :
scales: {
yAxes: [{
afterFit: function(scale) {
scale.width = 80 //<-- set value as you wish
},
...
}]
}
ɪɴ ᴀᴄᴛɪᴏɴ
var chart = new Chart(ctx, {
type: 'line',
data: {
labels: ['Jan', 'Feb', 'Mar'],
datasets: [{
label: 'LINE',
data: [3, 2, 4],
backgroundColor: 'rgba(0, 119, 290, 0.2)',
borderColor: 'rgba(0, 119, 290, 0.6)'
}]
},
options: {
responsive: false,
scales: {
yAxes: [{
afterFit: function(scale) {
scale.width = 80 //<-- set value as you wish
},
scaleLabel: {
display: true,
labelString: 'y-axis label',
}
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<canvas id="ctx" height="180"></canvas>
I use vue-chartjs as a wrapper for chartjs. I had a simple line chart with random data but stuck on how to set fix value to be displayed on the chart's y-axis. Currently I have random data from 0-100. Now, what I want to achieve is just display 0, 50, 100 on the y-axis no matter what the random value is starts from 0-100.
Sample Script
putData: function () {
this.datacollection = {
labels: ['JAN', 'FEB', 'MAR', 'APR', 'MAY', 'JUN', 'JUL', 'AUG', 'SEP', 'OCT', 'NOV', 'DEC'],
datasets: [{
lineTension: 0,
borderWidth: 1,
borderColor: '#F2A727',
pointBackgroundColor:[ '#fff', '#fff', '#fff', '#fff', '#fff', '#F2A727'],
backgroundColor: 'transparent',
data: [this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt()]
}]
}
},
getRandomInt: function () {
return Math.floor(Math.random() * (95)) + 5
}
Any help would be much appreciated.
To achieve that, you need to set stepSize: 50 and maxTicksLimit: 3 for y-axis ticks, in your chart options :
scales: {
yAxes: [{
ticks: {
stepSize: 50,
maxTicksLimit: 3
}
}]
}
Above answer is correct.
For those intereseted, I post code for latest version of Chart.js
Updated to Chart.js v3.2.0 (not backwards-compatible with v2.xx)
In order to avoid automatic scaling if your random data values are all in the middle range close to 50, do the following:
Add min: 0 and max: 100 , so you force chart to show exactly those 3 ticks including the 0, hence maxTicksLimit: 3:
100
50
0
<script>
// ...
options: {
scales: {
y: {
min: 0,
max: 150,
ticks: {
stepSize: 50,
maxTicksLimit: 3
}
}
}
};
// ...
</script>
Source: https://www.chartjs.org/docs/latest/axes/#tick-configuration
(Be aware that in new versions v3.xx min: 0 and max: 100 are now located outside the ticks-object, whereas in v2.xx it used to be inside the ticks-object).
How to set a fixed row size in horizontal bar. I tried with
yAxes: [{
barPercentage: 1.0,
categoryPercentage: 1.0
}]
but it resized bar and i need fixed size.
The perfect would be chart with fixed row size (bar, label) and independent of the amount of data (scrollbar). Can I implement it with chartJS?
horizontal bar
code
Thanks.
Here is the update JS code. which will fix the fixed row size in horizontal bar.
https://jsfiddle.net/1knt2md8/
var ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, {
type: 'horizontalBar',
data: {
labels: [
['Label_1_Line_1', 'Label_1_Line_2', 'Label_1_Line_3'],
['Label_2_Line_1', 'Label_2_Line_2', 'Label_2_Line_3'],
['Label_3_Line_1', 'Label_3_Line_2', 'Label_3_Line_3'],
['Label_4_Line_1', 'Label_4_Line_2', 'Label_4_Line_3'],
['Label_5_Line_1', 'Label_5_Line_2', 'Label_5_Line_3'],
['Label_6_Line_1', 'Label_6_Line_2', 'Label_6_Line_3'],
['Label_7_Line_1', 'Label_7_Line_2', 'Label_7_Line_3'],
],
datasets: [{
label: "My First dataset",
backgroundColor: 'rgb(255, 99, 132)',
borderColor: 'rgb(255, 99, 132)',
data: [0, 10, 5, 2, 20, 30, 70],
}]
},
options: {
scales: {
yAxes: [{
maxBarThickness : 80
}],
xAxes: [{
ticks: {
mix: 0,
max: 40,
stepSize: 5
}
}]
}
}
});