Using v2.0beta of Chart.js
I'm having trouble displaying the xAxes and yAxes scale labels, as well as setting the yAxes min/max.
I need the yAxes ticks to range from -10 to 120 in increments of 10....this was super easy to do in v1 but I had to switch to v2.0 in order to invert the yAxes...help would be much appreciated :)
Tried setting it up in a jsfiddle but couldn't get it to work, sorry.
Here's my Line object:
var chart = new Chart(context, {
type: 'line',
data: data,
options: {
scales: {
xAxes: [
{
position: "top",
scaleLabel: {
display: true,
labelString: "Frequency (Hz)",
fontFamily: "Montserrat",
fontColor: "black",
},
ticks: {
fontFamily: "Montserrat",
}
}
],
yAxes: [
{
position: "left",
scaleLabel: {
display: true,
labelString: "dB",
fontFamily: "Montserrat",
fontColor: "black",
},
ticks: {
fontFamily: "Montserrat",
reverse : true,
min: -10,
max: 120,
},
}
],
},
}
});
A bit late answer but Chart.js v2.0beta doesn't seem to support those tick options well.
I updated your fiddle. I updated Chart.js v2.0beta to Chart.js v2.5, which is the latest Chart.js for now.
Your tick options should look like
ticks: {
min: -10,
max: 110,
stepSize: 10,
reverse: true,
},
I know you were asking for set boundaries, but with my chart I do not know what the scale is so I look at the data and get the Hi/Low and adjust the chart to match the data.
var hi = data.datasets[3].data[0];
var lo = data.datasets[1].data[data.datasets[1].data.length - 1];
ticks: {
max: hi,
min: lo,
stepSize: 10
}
}
Hope this helps someone.
Related
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 have the following Scatter plot chart created with Chart.js and for some reason, the green dots are not aligned with the xAxis labels. Note that I am doing this in a Vue.js app using vue-chart.js but I don't think this is the reason. Any idea of how I could align plots and xAxis labels?
data: {
labels: this.sessionLabels, // Example: ["2020-02-07T13:57:43", "2020-02-07T13:57:43", "2020-02-07T13:57:43", "2020-02-07T13:57:43", "2020-02-07T16:42:39", "2020-02-07T16:42:39"...]
datasets: [
{
label: "Session",
backgroundColor: "#42b983",
data: this.sessions // Example: [{x:1, y:0}, {x:2, y:0}, {x:3, y:0}, ...]
}
]
},
options: {
title: {
display: true,
text: "Sessions executed over the last 7 days",
fontColor: "#ffffff",
fontSize: "14",
fontStyle: "normal"
},
legend: {
display: false
},
scales: {
xAxes: [
{
ticks: {
callback: function(value, index, values) {
return this.sessionLabelsAlias[index];
}.bind(this)
}
}
],
yAxes: [
{
ticks: {
max: 100,
min: 0,
stepSize: 10
}
}
]
}
}
The main problems is that your sessionLabels contains identical values.
Also when explicitly defining labels, your data should simply be an array of values, each one corresponding to the label at the same position.
[0, 0, 0, 0, 0 ...]
So I only want to show the axes border lines - and hide the grid lines. This is using the latest version of the chart.js package (2.9.3) and I have replicated my issue in a simplified Codepen shown below:
var myChart = new Chart(ctx, {
type: 'scatter',
data: {
labels: [4, 0],
datasets: [{
data: [
{ group_name: "Group A", x: 4, y: 25 },
{ group_name: "Group B", x: 0, y: 0 },
],
}],
},
options: {
legend: { display: false },
scales: {
yAxes: [ {
type: 'logarithmic',
scaleLabel: { display: true, labelString: 'Active %', fontSize: 15 },
position: 'left',
gridLines: { display: false, drawBorder: true },
ticks: {
min: 0,
max: 50,
maxTicksLimit: 4,
padding: 10,
callback: value => `${value.toLocaleString()}%`,
},
} ],
xAxes: [ {
type: 'logarithmic',
position: 'bottom',
scaleLabel: { display: true, labelString: 'User Count', fontSize: 15 },
gridLines: { display: false, drawBorder: true },
ticks: {
min: 0,
maxTicksLimit: 6,
padding: 10,
callback: value => value.toLocaleString(),
},
} ],
},
}
});
Any help or insight is appreciated; the settings I'd expect to work from the docs don't seem to be working.
You can put this options in gridline properties:
xAxes: [{
gridLines: {
display: true,
drawBorder: true,
drawOnChartArea: false
}
}]
Source: https://www.chartjs.org/samples/latest/scales/gridlines-display.html
Solved it (sort of). When I downgrade to chart.js 2.8.0 the chart borders now display as expected. With 2.9.3 the borders were not showing at all, regardless of chart type.
gridLines: { drawBorder: true, lineWidth: 0 }
I have a bubble Chart and I am passing the values for plotting the charts.
The bubble Chart Automatically calculates the Labels for the X-Axis but I want to set it or hardcode it rather than bubble Chart doing it.
this.chart = new Chart(htmlRef, {
type: 'bubble',
data: {
// labels: ["0", "60", "120", "180", "240", "300"],
datasets: [
{
type:'line',
label: 'CPU Usage',
//data: [10,20],
data: [{x:0,y:5,r:5},{x:10,y:20},{x:15,y:30},{x:25,y:40},{x:55,y:30},{x:80,y:40}],
borderColor: '#4333FF',
backgroundColor: '#3398FF',
fill: true,
borderWidth: 2
}
]
},
options: {
tooltips:{
callbacks:{
label:function(tooltip){
console.log(tooltip);
return ("CPU Utilization : "+tooltip.yLabel);
}
}
},
legend: {
display: true,
position: "right"
},
scales: {
xAxes: [
{
display: true,
gridLines: {
lineWidth: 2,
drawBorder: true
]
},
scaleLabel: {
display: true,
labelString: 'Time'
}
}],
yAxes: [
{
display: true,
stacked: true,
scaleLabel: {
display: true,
labelString: 'Utilization'
},
ticks: {
min: 0,
max: 100,
// forces step size to be 5 units
stepSize: 30
}
}
]
}
}
})
I expect to set Labels myself like it should be [0,30,60,90,120 ] or if i want to change it on click of button , it should change to [0,60,120,180,240,300].
At any point in time, I can update the Labels in X-Axis.
I am plotting bar chart with time axis, X-Axis unit is 'day' and ticks will be 30 day apart.With this tooltip is not displaying. I am using 2.0 beta2 version. Its a 1 year graph with random time sample data. UserCallBack function skips ticks for 30 days.
Any suggestions why tool tip is not displaying?
var canvas = document.getElementById('myChart');
var labelsArray = ["2017/06/09 00:00:00", "2017/07/05 00:00:00"];
var data = {
labels: labelsArray,
datasets: [{
label: "My First dataset",
data: [10, 50],
backgroundColor: "rgba(255,99,132,0.2)",
borderColor: "rgba(255,99,132,1)",
borderWidth: 2,
hoverBackgroundColor: "rgba(255,99,132,0.4)",
hoverBorderColor: "rgba(255,99,132,1)",
}]
};
var xAxesConfig = [{
type: "time",
categoryPercentage: 0.1,
barPercentage: 0.2,
time: {
displayFormat: 'MMM-DD',
format: 'YYYY/MM/DD HH:mm:SS',
unit: 'day',
min: '2016/09/12 17:00:00',
max: '2017/09/12 17:00:00'
},
scaleLabel: {
display: true,
labelString: 'Time',
fontSize: 14,
fontStyle: "bold"
},
ticks: {
maxRotation: 0,
autoSkip: false,
userCallback: function(value, index, values) {
return (index % 30 == 0) ? value : null;
//return value;
}
}
}];
var yAxesConfig = [{
position: 'left',
gridLines: {
display: true
},
ticks: {
maxTicksLimit: 5,
suggestedMin: 0,
suggestedMax: 10
},
scaleLabel: {
display: true,
labelString: 'Value',
fontSize: 14,
fontStyle: "bold"
}
}];
var option = {
scales: {
yAxes: yAxesConfig,
xAxes: xAxesConfig,
}
};
var myBarChart = Chart.Bar(canvas, {
data: data,
options: option
});