The Chart.js code I have is:
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: tempDate.reverse(),
datasets: [{
label: '# of Votes',
data: [2000,2001,2002,2003],
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: false,
display: true
}
}]
}
}
});
and the result looks like this:
I am trying to remove the 2001.5 and 2002.5 from the y axis and also the 0 behind other values in y axis.
Basically I am trying to print exactly the data I am passing to it which is [2000,2001,2002,2003]
Use stepSize in your options
options: {
scales: {
yAxes: [{
ticks: {
stepSize: 1,
beginAtZero: false,
display: true
}
}]
}
}
Related
I'm trying to hide the gridlines drawn outside the chart area, so basically like the option below, but for outside the chart area
gridLines: {
drawOnChartArea: false,
},
Presumably you are looking to disable the tick lines which can be achieved via the drawTicks property:
new Chart(document.getElementById('canvas'), {
type: 'bar',
data: {
labels: ['a', 'b', 'c'],
datasets: [{
label: 'series1',
data: [1, 2, 4]
}]
},
options: {
scales: {
xAxes: [{
gridLines: {
drawTicks: false
},
ticks: {
padding: 10
}
}],
yAxes: [{
gridLines: {
drawTicks: false
},
ticks: {
beginAtZero: true,
padding: 10
}
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script>
<canvas id="canvas">
gridLines:
drawTicks: false;
}
Refer to the documentation for further information.
I need to set the yAxis scale so that it would start from zero to 100 with the intervals of 10. I tried several options with the scales but it didn't seem to work. I also tried to set
options: { scales: { yAxes: [{ ticks: { beginAtZero:true } }] } } });
but this didn't help, I still have negative numbers at the yAxis scale. How can I solve it?
var MONTHS = ["Январь", "Февраль", "Март", "Апрель", "Май", "Июнь", "Июль", "Август", "Сентябрь", "Октябрь", "Ноябрь", "Декабрь"];
var config = {
type: 'line',
data: {
labels: ["Январь", "Февраль", "Март", "Апрель", "Май", "Июнь", "Июль", "Август", "Сентябрь", "Октябрь", "Ноябрь", "Декабрь"],
datasets: [{
label: "Продажи",
backgroundColor: window.chartColors.red,
borderColor: window.chartColors.red,
data: [
10,
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor()
],
fill: false,
}]
},
options: {
responsive: true,
title:{
display:true,
text:'Показатели роста продаж'
},
tooltips: {
mode: 'index',
intersect: false,
},
hover: {
mode: 'nearest',
intersect: true
},
scales: {
xAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: 'Месяц'
}
}],
yAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: 'Рост'
}
}]
}
}
};
window.onload = function() {
var ctx = document.getElementById("chart-0").getContext("2d");
window.myLine = new Chart(ctx, config);
};
You need to set the ticks property of yAxes options. Refer the below code or fiddle -> http://jsfiddle.net/Lzo5g01n/10/
Always make sure you reference the latest version of Chart.js library.
yAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: 'Рост'
},
ticks:{
min: 0,
max: 100,
beginAtZero: true,
stepSize: 5
}
}]
I have a graph that look like the following with tooltips enables as these are required.
I am wanting to put labels on the 0 for the middle value between the min and max values.
The result I'm looking for is.
I've look through the documentation but cannot find anything that seems relevant.
Thanks in advance.
fiddle example
horizonalBarChart = new Chart(ctx, {
type: 'horizontalBar',
data: {
datasets: [
{
backgroundColor: "rgba(255,255,250,0)",
data: ["3.77", "4.89", "3.91", "3.34", "3.82", "3.85", "3.94", "3.83", "3.73", "3.33", "2.6", "3.86", "2.95", "3.12", "3.18", "3.05", "2.9"],
label: null
},
{
backgroundColor: ["#003f5c", "#003f5c", "#2f4b7c", "#2f4b7c", "#665191", "#665191", "#665191", "#665191", "#665191", "#a05195", "#a05195", "#d45087", "#d45087", "#d45087", "#d45087", "#d45087", "#d45087", "#f95d6a", "#f95d6a"],
data: ["1.78", "1.84", "1.61", "1.58", "1.6", "1.6", "1.6", "1.67", "1.73", "1.64", "1.86", "1.69", "1.77", "1.76", "1.74", "1.77", "1.79"],
label: null
}
]
},
options: {
responsive: true,
legend: {
display: false
},
scales: {
xAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: ''
},
ticks: {
steps: 8,
stepSize: 1,
max: 8,
min: 0,
callback: function (value, index, values) {
return value - 4;
}
},
stacked: true
}],
yAxes: [
{
barPercentage: 0.6,
display: true,
position: 'left',
type: 'category',
labels: ["-9.72", "-7.16", "11.51", "13.39", "-4.41", "-3.31", "-9", "-41.33", "-16.88", "-3.63", "17.2", "-20.62", "-6.9", "-5.4", "-7.6", "-5.44", "-3.58"],
weight: 1,
stacked: true
},
{
offset: true,
display: true,
position: 'right',
type: 'category',
labels: ["10.92", "8.76", "-11.91", "-4.99", "64.41", "101.91", "149.4", "169.73", "45.08", "7.23", "-22", "109.62", "12.7", "6.2", "8.4", "6.84", "4.18"],
gridLines: {
display: false
}
}
]
}
}
});
I'm not sure you can put the label under the bar.
What you can do, is to place the label inside the bar as explained in the documentation, using the property "mirror"
Displaying the labels inside the chart instead of outside
You can find a good example of this configuration here
That's how I set the data:
const data = {
labels: ['February', 'March'],
datasets: [
{
label: 'My First dataset',
backgroundColor: 'rgba(255,99,132,0.2)',
borderColor: 'rgba(255,99,132,1)',
borderWidth: 1,
hoverBackgroundColor: 'rgba(255,99,132,0.4)',
hoverBorderColor: 'rgba(255,99,132,1)',
data: [5, 9]
}
]
};
But the first element sets the beginning of the axis:
But I want it to start from zero
adding the following doesn't help:
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
I couldn't find another setting to do that on the docs.
I'm using this btw: https://www.npmjs.com/package/react-chartjs-2
Try Adding min to your options:
var options = {
scales: {
yAxes: [{
ticks: {
beginAtZero: true,
min: 0
}
}]
}
};
Live Copepen: Chart.js Start at zero
Replaced by:
const options = {
scales: {
y: {
beginAtZero: true
}
}
};
It worked!
As per chart.js 3.7.1 version
Directly write "beginAtZero" in x or y not in ticks
const options = {
scales: {
x: {
beginAtZero: true,
},
y: {
beginAtZero: true,
}
}
};
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.