When Charts.js (Version: 2.1.3) renders my polar area charts for low data values the scale is drawn with fractional values:
Example polar area chart
The fractions do not make sense in the context of my data (student numbers). I would rather display a scale of whole numbers, or no scale. I have tried to change the chart options, looked at and tested various examples, searched for answers on this site and elsewhere, but no success yet. Any advice please?
Example of my code:
var ML_Chart_obj = new Chart(ctx,
{
type: "polarArea",
data: {
datasets: [{
data: [0,1,0],
backgroundColor: [
"rgba(060,186,084,0.6)"
,"rgba(244,194,013,0.6)"
,"rgba(219,050,054,0.6)"
],
label: ""
}],
labels: [
"Active, on target"
,"Unspecified start or end date"
,"Active, at risk"
]
},
options: {
scales: {
xAxes: [{
display:false
}]
},
legend: {
display: false
}
}
});
A little too late, but this is how you do it.
options{
scale: {
ticks: {
stepSize: 1
}
}
}
Related
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 have a simple bar graph, but every bar has a different width. Is there any way to make the bars' widths uniform and match the x axis units/grid spacing?
This is how my chart is defined:
var chart = new Chart(ctx, {
type: 'bar',
data: chartData,
options: {
annotation: {
annotations: []
},
legend: {
display: false
},
scales: {
xAxes: [{
type: 'time',
time: {
unit: 'day',
stepSize: 1,
},
ticks: {
maxTicksLimit: 21,
autoSkip: true
}
}]
}
}
});
Turns out my chart.js version was slightly out of date. After I replaced it with the latest version (2.7.3) the bars suddenly looked fine.
Problem solved :-)
I am trying to implement chartJS bar chart and use the legend to filter bars.
I want to set the labels list to be empty because this allows me to remove bars clearly.
I am looking for a way to set the ticks with labels on X axis, since it is empty from text now.
JSfiddle:
https://jsfiddle.net/m1eorjwv/1/
var options = {
type: 'bar',
data: {
labels: [],
datasets: [
{
label: 'red',
data: [12],
borderWidth: 1
},
{
label: 'blue',
data: [7],
borderWidth: 1
}
]
},
options: {
scales: {
yAxes: [{
ticks: {
reverse: false,
beginAtZero: true
}
}]
}
}
}
Thanks a lot, Alon
I managed to do this, here is the ansert:
enter code here
code
https://jsfiddle.net/ehacujny
can anyone help me understand why the first chart in this fiddle isn't showing correctly?. It should have two grouped horizontal stacks, but the two datasets assigned to the secondary X axis (x-axis-1) of the datasets are not showing.
https://jsfiddle.net/c2jtL7gz/5/
var myChart = new Chart(ctx, {
type: "horizontalBar",
data: {
"datasets":[{
"label":"One",
"data":[100],
"stack":"Stack 0",
"backgroundColor":"green"
},{
"label":"Two",
"data":[200],
"stack":"Stack 0",
"backgroundColor":"orange"
},{
"label":"Three",
"data":[150],
"stack":"Stack 1",
"xAxisID":"x-axis-1",
"backgroundColor":"lightgrey"
},{
"label":"Four",
"data":[300],
"stack":"Stack 1",
"xAxisID":"x-axis-1",
"backgroundColor":"darkgrey"}]},
options: {
scales: {
xAxes: [{
stacked: true,
id: "x-axis-0",
},{
stacked: true,
id: "x-axis-1",
}],
yAxes: [{
stacked: true,
id: "y-axis-0",
}],
}
}
});
The second chart has the same configuration, but with minimal changes to make it a normal (vertical) bar chart, and it works exactly as expected.
Is this a bug in the library, or something I'm missing?
Welcome to StackOverflow! According to the docs it looks like the data structure for the horizontal bar chart is slightly different. You want data to look like:
data: {
"labels": ["One", "Two", "Three", "Four"],
"datasets":[{
"label": "First Dataset",
"data":[100,200,150,300],
"backgroundColor":["green","orange","lightgrey","darkgrey"]
}]
},
I've attached a fiddle here: https://jsfiddle.net/c2jtL7gz/6/
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.