Chartjs wrong automatic y-Axis scale - chart.js

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/)

Related

rotating y-axis to top and x-axis to left within chart.js

I have a chart that's currently displaying like:
But I'd like to rotate it to look more like this:
(not changing the "your rating") orientation.
It should be relatively straightforward to put the x-axis on the left and the y-axis on the top, but I'm struggling.
Here is the relevant code:
var ctx = document.getElementById('canvas').getContext('2d');
window.myHorizontalBar = new Chart(ctx, {
type:'line', // 'horizontalBar',
data: horizontalBarChartData,
options: {
annotation: {
annotations: [{
type: 'line',
mode: 'vertical',
scaleID: 'y-axis-0',
value: 20,
label: {
content: 'Your Rating ',
enabled: true
}
}]
},
scales: {
xAxes: [{
gridLines: {
display:false
}
}],
yAxes: [{
gridLines: {
display:false
}
}]
},
// Elements options apply to all of the options unless overridden in a dataset
// In this case, we are setting the border of each horizontal bar to be 2px wide
responsive: true,
legend: {
display: false
},
title: {
display: false,
text: 'text4'
}
}
});
}

On hover bar is overlapped by label chartjs

I'm trying to generate a bar graph but after generating when i hover on bar first graph the hover works and tooltip is also coming correctly but when i hover on second or third bar the bar color becomes black
<script src="https://cdn.jsdelivr.net/npm/chart.js#2.8.0"></script>
<canvas id="barChart" style="margin-top:10px"></canvas>
var ctxBarChart = document.getElementById('barChart').getContext('2d');
var chart = new Chart(ctxBarChart, {
// The type of chart we want to create
type: 'bar',
// The data for our dataset
data: {
labels: ['bar 1', 'bar 2', 'bar 3'],
datasets: [{
label: 'bar graph label',
backgroundColor: ['#ff7f27', 'DodgerBlue', 'Green'],
borderColor: ['#ff7f27', 'DodgerBlue', 'Green'],
data: [24.6154, 28.4, 28.4]
}]
},
// Configuration options go here
options: {
legend: {
display: false
},
tooltips: {
callbacks: {
label: function (tooltipItem, data) {
return tooltipItem.yLabel.toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,') + '%';
}
}
},
scales: {
xAxes: [{
gridLines: {
display: false
}
}],
yAxes: [{
gridLines: {
display: false
},
ticks: {
// max: 100,
min: 0,
// stepSize:20
}
}]
}
}
});
but the result i'm getting is like this please see following images for bar 1 and bar 2
This seems to be caused by case-sensitivity of colour names.
Change your colours to all lowercase like so:
backgroundColor: ['#ff7f27', 'dodgerblue', 'green'],
borderColor: ['#ff7f27', 'dodgerblue', 'green'],
The CSS3 specification explicitly states the names are case-insensitive so this looks like a bug in Chart.js

Draw two plots using chartjs over one another with transparency

In Chartjs I have two plots, as shown here:
var config = {
type: 'line',
data: {
labels: [
"2017-07-03T01:05:00+0100",
....
],
datasets: [
{
label: "Consumption",
fill: 'origin',
pointRadius: 0,
borderColor: "#0000ff",
backgroundColor: "rgba(255,10,13,255)",
data: [
0.015625,
0.0199861111111,
...
],
}
,
{
fill: 'origin',
label: "PV",
pointRadius: 0,
borderColor: "#ebf909",
backgroundColor: "rgba(29,241,13,210)",
data: [
0.0,
.....
],
}
]
},
options: {
responsive: true,
title:{
display:true,
text:"Chart.js Line Chart - Stacked Area"
},
tooltips: {
mode: 'index',
},
hover: {
mode: 'index'
},
scales: {
xAxes: [{
scaleLabel: {
display: true,
labelString: 'Time'
}
}],
yAxes: [{
stacked: false,
scaleLabel: {
display: true,
labelString: 'kWh'
}
}]
}
}
};
var ctx = document.getElementById("canvas").getContext("2d");
var myChart = new Chart(ctx, config);
Is there any way I can make the green plot show through the red one in places where the latter completely obscures the former?
You need to set fill property to false for the first dataset (the red one), to make it transparent.
datasets: [{
label: "Consumption",
fill: false,
pointRadius: 0,
borderColor: "#0000ff",
backgroundColor: "rgba(255,10,13,255)",
...
or, you can also reduce the opacity of background color, like so ...
backgroundColor: "rgba(255, 10, 13, 0.1)"
Here is the working codepen

Show only nth tick LINE on x-axis for Chart.js diagram

I've been searching for a solution to this for a while but am getting no nearer to a solution due to the mass of deleted documentation and hacky answers for previous versions of the library.
I'm working on a chart with ChartJS v2 with quarterly-month names along the x-axis, and I've set my labels so that only every 4th label is shown (i.e. one per year). The result is this:
However, I would like to have it such that the tick lines also only appear on every 4th x-axis entry at the same point as the labels. Is this possible?
My current script tag is as follows:
<script>
var ctx = document.getElementById("myChart").getContext('2d');
ctx.canvas.width = 600;
ctx.canvas.height = 420;
var myChart = new Chart(ctx, {
type: 'line',
data: {
< snipped for brevity >
},
options: {
tooltips: {
mode: 'index',
intersect: false
},
scales: {
xAxes: [{
ticks: {
userCallback: function(item, index) {
if (index%4) return "";
return item;
},
autoSkip: false
},
display: true
}],
yAxes: [{
ticks: {
beginAtZero:true
}
}]
}
}
});
</script>
Is this possible to achieve? Thanks in advance.
Replace your tick­'s userCallback function with the following ...
userCallback: function(item, index) {
if (!(index % 4)) return item;
}
Basically, you don't need to return any empty string for the label that you wish to hide. If you do not return anything (for the label you don't want), it won't draw any tick (as well as gridline) for that label.
ᴅᴇᴍᴏ
var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sept'],
datasets: [{
label: 'Standard Rating',
data: [1, 2, 3, 4, 5, 6, 7, 8, 9],
backgroundColor: 'rgba(209, 230, 245, 0.5)',
borderColor: 'rgba(56, 163, 236, 1)',
borderWidth: 1
}]
},
options: {
responsive: false,
tooltips: {
mode: 'label',
intersect: false
},
scales: {
xAxes: [{
ticks: {
userCallback: function(item, index) {
if (!(index % 4)) return item;
},
autoSkip: false
}
}],
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<canvas id="myChart" width="350" height="200"></canvas>

Horizontal bar chart in chart.js

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.