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,
},
},
},
the automatic scaling of the y-axis does not seem to work properly. I have the following code:
<script>
$(function () {
var lineChartCanvas = $('#lineChart').get(0).getContext('2d')
var lineChartData = {
datasets: [
{
label: 'Digital Goods',
backgroundColor: 'rgba(60,141,188,0.9)',
borderColor: 'rgba(60,141,188,0.8)',
pointRadius: false,
pointColor: '#3b8bba',
pointStrokeColor: 'rgba(60,141,188,1)',
pointHighlightFill: '#ffffff',
pointHighlightStroke: 'rgba(60,141,188,1)',
data: {{data}}
},
]
}
var lineChartOptions = {
maintainAspectRatio: false,
responsive: true,
legend: {
display: false
},
scales: {
xAxes: [{
gridLines: {
display: false,
}
}],
yAxes: [{
gridLines: {
display: false,
}
}]
}
}
var lineChart = new Chart(lineChartCanvas, {
type: 'line',
data: lineChartData,
options: lineChartOptions
})
});
enter image description here
The graphs yaxes goes till 5, however, there is no data bigger than 1. I would like it to be more precise (y-axes not higher than 1 or something). However, as this code is part of a bigger application, I cannot set a fixed max as the code differs per scenario.
I tried to add an example, however, the data is not exactly like that (orginially 8760 values) and in this example another problem comes up. My lib is jquery.min.js (https://jsfiddle.net/742ovrLm/)
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>
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
I am trying to draw a horizontal bar chart using chart.js 2.3.0 -
var MeSeContext = document.getElementById("MeSeStatusCanvas").getContext("2d");
var MeSeData = {
labels: [
"ME",
"SE"
],
datasets: [
{
label: "Test",
data: [100, 75],
backgroundColor: ["#669911", "#119966" ],
hoverBackgroundColor: ["#66A2EB", "#FCCE56"]
}]
};
var MeSeChart = new Chart(MeSeContext, {
type: 'horizontalBar',
data: MeSeData,
options: {
scales: {
yAxes: [{
stacked: true
}]
}
}
});
But it only shows one bar. What did I miss here?
You can see only one chart because the lowest value of your data (75 here) is the scale's left limit.
As shown in the following screenshot of your code's result, if you hover on the scale, you can still see the associated data, which means it is here.
You have two ways to fix this :
Set the min property of the xScale ticks to the value you want (enough to see it of course) :
var MeSeChart = new Chart(MeSeContext, {
type: 'horizontalBar',
data: MeSeData,
options: {
scales: {
xAxes: [{
ticks: {
min: 60 // Edit the value according to what you need
}
}],
yAxes: [{
stacked: true
}]
}
}
});
You can see the result with a min set to 60 on this jsFiddle :
Set the beginAtZero property to true, which is the same as setting min to 0 :
xAxes: [{
ticks: {
beginAtZero: true
}
}],
You can see the result with the beginAtZero property set to true on this jsFiddle.