I use Radar ChartJS, I have 5 levels for each position. Here is when my data has 5 levels.
Showing full 5 level
However, when my data does not have all 5 levels, the chart only shows the highest level. I wish that when I don't have 5 levels, 5 levels will also be displayed.
Not Showing full 5 level when data haven't level 5
My setting
scales: {
r: {
angleLines: {
color: '#FFF',
},
pointLabels: {
color: '#FFF', // Color labels
font: {
size: 11,
},
backdropColor: listColor,
backdropPadding: "10",
borderRadius: "15",
padding: 20,
},
grid: {
circular: true,
color: "#FFF",
min: 5,
},
beginAtZero: true,
ticks: {
beginAtZero: true,
max: 5,
min: 0,
stepSize: 1,
display: false,
}
},
Thanks so much.
Related
I am migrating chart.js to 3.x as per the migration guide.
https://www.chartjs.org/docs/master/getting-started/v3-migration/
I am trying to set the xAxis zeroLineColor to "#FFFFFF" and I want to have the Grid line color as "#00FFFF" but as per the chart.js migration document document scales.[x/y]Axes.zeroLine* options of axes were removed. Use scriptable scale options instead.
I am not sure how to use scriptable scale options for setting the xAxis line zero to white.
Update:
Working example:
https://jsfiddle.net/g4vq7o2b/2/
In order to obtain different colors for the grid's zero line, you could define an array of colors for the option gridLines.color.
gridLines: {
drawBorder: false,
color: ["#FFFFFF", "#00FFFF", "#00FFFF", "#00FFFF", "#00FFFF"]
}
Since gridLines.color is a scriptable options, it also accepts a function which is invoked with a context argument for each of the underlying data values as follows:
gridLines: {
drawBorder: false,
color: context => context.tick.value == 0 ? "#FFFFFF" : "#00FFFF"
}
Please take a look at below runnable code and see how it works.
new Chart(document.getElementById("myChart"), {
type: "line",
data: {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [{
label: "My Dataset",
data: [2, 3, 1, 4, 2, 4, 2],
fill: false,
backgroundColor: "rgba(0, 255, 0, 0.3)",
borderColor: "rgb(0, 255, 0)"
}]
},
options: {
scales: {
y: {
min: 0,
ticks: {
stepSize: 1
},
gridLines: {
drawBorder: false,
color: context => context.tick.value == 0 ? "#FFFFFF" : "#00FFFF"
}
},
x: {
gridLines: {
drawBorder: false,
color: context => context.tick.value == 0 ? "#FFFFFF" : "#00FFFF"
}
}
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.0.0-beta/chart.min.js"></script>
<canvas id="myChart" height="90"></canvas>
Using chart_v3.7.0.js cartesian time axis, for me, configuring zeroline and other gridlines works, using scriptable options.
Apply property for "context.tick.value == 0" (=baseline)
like:
...
options: {
scales: {
x: {
gridLines: {
color: "#00ff00",
},
ticks: { font: { size: 30 },
maxRotation: 90,
minRotation: 90,
},
type: 'time',
time: {
/*tooltipFormat: "DD.MM hh:mm",*/
displayFormats: {
minute: 'HH:mm',
hour: 'HH:mm',
day: 'dd.MMM',
}
},
},
y: {
grid: {
color: (line) => (line.index === 0 ? 'red' : 'rgba(0, 0, 0, 0.1)') //color of lowest horizontal grid line
color: context => context.tick.value == 0 ? "#FFFFFF" : "#00FFFF", // zero-line baseline color
lineWidth: context => context.tick.value == 0 ? 3 : 1, // zero-line baseline width
},
position: 'right', // show axis on the right
title: { display: true,
rotation: 0,
text: "°C", },
},
},
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'm trying to fit line charts into some very small table cells:
As you can see, the rightmost point's tooltip gets slightly cut off. This is the only one that causes a problem.
The easiest fix would probably be to put a higher z-index on the tooltip, but I've googled it and I don't think that's possible. Instead, is it possible to make the tooltip display on the left side of the point instead of below it? That's what the second to last point does:
Here are my chart options:
public lineChartOptions:any = {
responsive: false,
tooltips: {
yPadding: 2,
xPadding: 2,
caretPadding: 5,
caretSize: 3,
displayColors: false,
},
layout: {
padding: {
left: 5,
right: 5,
top: 5,
bottom: 5,
}
},
scales: {
yAxes: [{
ticks: {
//stepSize: 50,
max: 150,
beginAtZero: true,
display: true,
}
}],
xAxes: [{
display: false,
}]
}
};
Any help is appreciated.
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).
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.