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 ...]
Related
I am trying to create a radar chart in chart js but the issue is chart is starting from 1 and ending at 12 because the min value is 1 and max value is 12, what I want is to set the default valueof 0 and 15.
const myChart = new Chart(ctx, {
type: "radar",
data: {
labels: stockSymbols,
datasets: [{
label: "PSX RADAR CHART",
data: [1,2,3,4,5,8,10,12],
borderColor: "green",
borderWidth: 1,
yAxisID: "y",
}, ],
},
options: {
scales: {
y: {
min: 0,
max: 12,
display: true,
},
},
},
});
this is my radar chart
The radar chart is using the radial scale by default. So changing y to r will solve your issue:
options: {
scales: {
r: {
min: 0,
max: 15,
},
},
},
I'm trying to mimic this Radarchart with ChartJs.
How to offset the ticks to the left like so?
what I have (below)
options: {
scale: {
ticks: {
min: 0,
max: 5,
stepSize: 1,
showLabelBackdrop: false,
beginAtZero: true,
},
gridLines: {
color: 'rgba(0, 0, 0, 0.3)'
},
angleLines: {
display: false
},
},
},
Additionally: is displaying the 0 possible?
You need to do two things.
To show the 0 tick add this to your options.scale object:
ticks: {
beginAtZero: true,
min: -0.001,
}
Note that if you set min at zero it will not work. This is how the radar tick engine works.
To add an offset to the label override the tick render callback inside the same object, like this:
ticks: {
callback: (value) => `${value} `,
}
Note the extra spaces at the end. This is the padding. See the sample below
var options = {
responsive: false,
maintainAspectRatio: true,
scale: {
ticks: {
beginAtZero: true,
callback: (value) => `${value} `,
min: -0.001,
max: 5
}
}
};
var dataLiteracy = {
labels: [
"1", "2", "3", "4", "5"
],
datasets: [{
label: "Literacy",
backgroundColor: "rgba(179,181,198,0.2)",
borderColor: "rgba(179,181,198,1)",
pointBackgroundColor: "rgba(179,181,198,1)",
pointBorderColor: "#fff",
pointHoverBackgroundColor: "#fff",
pointHoverBorderColor: "rgba(179,181,198,1)",
data: [
2, 3, 4, 1, 2
]
}]
};
var ctx = document.getElementById("canvas");
var myRadarChart = new Chart(ctx, {
type: 'radar',
data: dataLiteracy,
options: options
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.2.1/Chart.min.js"></script>
<canvas id="canvas" height="400" width="400"></canvas>
Try this in the chart options:
ticks: {
callback: (value) => {
return '${value}';
},
I'm trying to create a "chart" where I only want to show the x-axis. Basically I'm trying to create visualization of a range (min-max) and a point that sits in between like:
I'm unable to find any resources online on how to make this, or what this type of plot is even called. If anyone could help out, that would be awesome!
This is straightforward to achieve through styling a line chart appropriately and using linear x- & y-axes with points defined via x and y coordinates.
By keeping y at 0 you can assure the points all appear in the same horizontal position.
The example below gets the visual result you want, but you'll probably want to disable tooltips for the 'fake' x-axis line via a callback:
let range = {
min: 0,
max: 100
},
pointVal = 65;
new Chart(document.getElementById("chart"), {
type: "line",
data: {
labels: ["", "", ""],
datasets: [{
pointBackgroundColor: "green",
pointRadius: 10,
pointHoverRadius: 10,
pointStyle: "rectRot",
data: [{
x: pointVal,
y: 0
}]
}, {
// this dataset becomes the 'fake' x-axis line.
pointBackgroundColor: "black",
borderColor: "black",
data: [{
x: range.min,
y: 0
},
{
x: range.max / 2,
y: 0
},
{
x: range.max,
y: 0
}
]
}]
},
options: {
legend: {
display: false
},
hover: {
mode: "point"
},
layout: {
padding: {
left: 10,
right: 10,
top: 0,
bottom: 0
}
},
scales: {
xAxes: [{
type: "linear",
display: false
}],
yAxes: [{
display: false
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>
<div style="width:200px">
<canvas id="chart"></canvas>
</div>
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.
Using a standard bar chart I am able to successfully create a chart with two datasets plotted on two y-axis. Working Example here: https://jsfiddle.net/pe8kxjqc/12/ How can I create the same chart as a horizontalBar chart with the labels on the left and the two dataset axes on the top and bottom?
The horizontalBar chart doesn't appear to handle the second axis as expected. I've tried the following but it doesn't work like expected:
var data = {
labels: ["Label1", "Label2", "Label3", "Label4", "Label5"],
datasets: [
{
"label": "Total V",
"xAxisID": "v",
"backgroundColor": "rgba(53,81,103,1)",
"borderColor": "rgba(53,81,103,.4)",
"data": [100,90,80,70,60]
},
{
"label": "Total C",
"xAxisID": "c",
"backgroundColor": "rgba(255,153,0,1)",
"borderColor": "rgba(255,153,0,.4)",
"data": [10,9,8,7,6]
}]};
var options = {scales:{
xAxes:[
{position:"top",id:"v", gridLines:{color:"rgba(53,81,103,.4)"}},
{position:"bottom",id:"c", gridLines:{color:"rgba(255,153,0,.4)"}}
]}};
var ctx = document.getElementById("myChart");
new Chart(ctx, {type: "horizontalBar",data:data, options:options});
You can have dynamic configuration for bar as well as horizontalBar you can use this configurations
Fiddle demo
var data = {
labels: ["Label1", "Label2", "Label3", "Label4", "Label5"],
datasets: [{
"label": "Total V",
"yAxisID": "A",
"backgroundColor": "rgba(53,81,103,1)",
"borderColor": "rgba(53,81,103,.4)",
"data": [100, 90, 80, 70, 60]
}, {
"label": "Total C",
"yAxisID": "A",
"backgroundColor": "rgba(255,153,0,1)",
"borderColor": "rgba(255,153,0,.4)",
"data": [10, 9, 8, 7, 6]
}]
};
var options = {
scales: {
yAxes: [{
id: 'A',
position: 'left'
}]
}
};
var ctx = document.getElementById("myChart");
new Chart(ctx, {
type: "horizontalBar",
data: data,
options: options
});
coming to your question the actual problem is with var options={...} it is made to work only with bar charts. Hope you understand
Update
Replace following as option in the chart above for required axis scales
var options = {scales:{yAxes:[{id: 'A',position: 'left',gridLines:{color:"rgba(53,81,103,.4)"}},{position:"top",id:"c", gridLines:{color:"rgba(255,153,0,.4)"},ticks: { min: 0,max: 100,}},]}};
updated fiddle
Basically you will need a y-axis for the first dataset which going to hold the labels. And you will need two x-axis for showing the values in the top and in the bottom.
The second dataset will go to the x-axis which is shown at the top.
Working fiddle included:
{
scales: {
yAxes: [{
id: 'A',
position: 'left',
display: true,
gridLines: {
color: "rgba(53,81,103,.4)"
}
}, ],
xAxes: [{
barPercentage: 0.4,
display: true,
id: "1",
position: 'bottom',
ticks: {
fontColor: 'rgb(0, 0, 0)'
},
fontSize: 500,
}, {
stacked: false,
barPercentage: 1,
display: true,
type: 'linear',
id: '2',
position: 'top',
ticks: {
fontColor: 'rgb(0, 0, 0)'
},
fontSize: 500,
}],
}
};
fiddle for two axis horizontal bar chart