chart.js: set specific numbers in y-axis - chart.js

I'm using chart.js version: 2.9.3
My line graph has 16,000 points.
The Y value range is from 10E7 ti -10E7
I want to display 10E7, -10E7 on the Y-axis and not 10000000, -10000000
How can I do it ?
Thank you in advance,
Zvika


Use the ticks.callback property in options.scales.yAxes along with Javascript's Number.toExponential.
For example:
{
type: 'line',
data: {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [{
label: 'Data',
data: [93000, -292768, -172234, -836236, 743553, 95348, 453460],
fill: false,
}, ],
},
options: {
scales: {
yAxes: [{
ticks: {
callback: function(val) {
return val.toExponential()
}
}
}]
}
},
}

Related

How to set a length difference in chart?

I am implementing charts and my chart looks like this.
There comes a difference of 20-40-60 but i want a difference of 0,100,200,300,400,500. How to handle this?

See the Chart.js documentation on linear scales.
Set the ticks.stepSize for your yAxis to 100. You may also want to set ticks.beginAtZero to true.
Here's a full example:
{
type: 'bar',
data: {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [
{
label: 'Data',
data: [602, 102, 510, 240, 680, 740, 410],
fill: false,
}
],
},
options: {
scales: {
yAxes: [
{
ticks: {
stepSize: 100,
beginAtZero: true,
},
},
],
},
},
}

chartjs 2.7 how to add labels in center of horizontal bar graph

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

Is there anyway add 2 or more chart with foreach loop

<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>
</head>
<body>
<script>
<!--bar stacked-->
var data2 = {
CC: [{
code: '123ASD',
labels: ["7/2/2018", "7/3/2018", "7/4/2018", "7/5/2018", "7/6/2018", "7/9/2018", "7/10/2018"],
datasets: [
{
label: 'AAA',
backgroundColor: "rgba(255,0,0,1)",
data: [32,41,21,78,0,0,0]
},
{
label: 'BBB',
backgroundColor: "rgba(0,255,0,1)",
data: [10,80,12,70,65,44,18]
},
{
label: 'CCC',
backgroundColor: "rgba(0,0,205,1)",
data: [915,400,233,398,334,766,1071]
},
]}
,
{
code: 'ASD123',
labels: ["7/2/2018", "7/3/2018", "7/4/2018", "7/5/2018", "7/6/2018", "7/9/2018", "7/10/2018"],
datasets: [
{
label: 'AAA',
backgroundColor: "rgba(255,0,0,1)",
data: [55,22,40,2,0,0,0]
},
{
label: 'BBB',
backgroundColor: "rgba(0,255,0,1)",
data: [10,2,100,0,17,55,74]
},
{
label: 'CCC',
backgroundColor: "rgba(0,0,205,1)",
data: [232,555,800,900,723,1001,942]
},
]
},
]
};
data2.CC.forEach( function(i, item){
document.body.innerHTML += '<canvas id="'+i.code+'"></canvas>'
var ctx2 = document.getElementById(i.kodu).getContext('2d');
window.myBar = new Chart(ctx2, {
type: 'bar',
data: data2.AA[0],
options: {
title: {
display: true,
text: i.code
},
tooltips: {
mode: 'index',
intersect: false
},
responsive: true,
scales: {
xAxes: [{
stacked: true,
}],
yAxes: [{
stacked: true
}]
}
}
});
});
</script>
</body>
</html>
when I run I get this error: Uncaught TypeError: Cannot read property 'currentStyle' of null and my first chart can't load
I try Uncaught TypeError: Cannot read property 'currentStyle' of null in ChartJS but my first chart again dont load
Is there anyone help?

You had a couple of issues:
Chart reference was being overridden by the last chart in the collection
A few references to variables did not exist from your original source dump
Chart data source reference needed to be changed
document.addEventListener('DOMContentLoaded', function(){
var chartData = {
CC: [{
code: '123ASD',
labels: ["7/2/2018", "7/3/2018", "7/4/2018", "7/5/2018", "7/6/2018", "7/9/2018", "7/10/2018"],
datasets: [{
label: 'AAA',
backgroundColor: "rgba(255,0,0,1)",
data: [32,41,21,78,0,0,0]
},{
label: 'BBB',
backgroundColor: "rgba(0,255,0,1)",
data: [10,80,12,70,65,44,18]
},{
label: 'CCC',
backgroundColor: "rgba(0,0,205,1)",
data: [915,400,233,398,334,766,1071]
}]
},{
code: 'ASD123',
labels: ["7/2/2018", "7/3/2018", "7/4/2018", "7/5/2018", "7/6/2018", "7/9/2018", "7/10/2018"],
datasets: [{
label: 'AAA',
backgroundColor: "rgba(255,0,0,1)",
data: [55,22,40,2,0,0,0]
},{
label: 'BBB',
backgroundColor: "rgba(0,255,0,1)",
data: [10,2,100,0,17,55,74]
},{
label: 'CCC',
backgroundColor: "rgba(0,0,205,1)",
data: [232,555,800,900,723,1001,942]
}]
}]
};
chartData.CC.forEach(function(data, index){
var canvas = document.createElement('canvas'),
chartId = 'chart' + data.code;
canvas.id = chartId;
document.body.appendChild(canvas);
var context = document.getElementById(chartId).getContext('2d');
window[chartId] = new Chart(context, {
type: 'bar',
data: data,
options: {
title: {
display: true,
text: data.code
},
tooltips: {
mode: 'index',
intersect: false
},
responsive: true,
scales: {
xAxes: [{
stacked: true,
}],
yAxes: [{
stacked: true
}]
}
}
});
});
});
Stack snippet is throwing a script error because of chart.js so I created a Codepen

You charts are not being loaded because your code should be item instead of data2.AA[0]. Also, you do not have any property with name kodu in your data object. Check out working version below:
var data2 = {
CC: [{
code: '123ASD',
labels: ["7/2/2018", "7/3/2018", "7/4/2018", "7/5/2018", "7/6/2018", "7/9/2018", "7/10/2018"],
datasets: [{
label: 'AAA',
backgroundColor: "rgba(255,0,0,1)",
data: [32, 41, 21, 78, 0, 0, 0]
},
{
label: 'BBB',
backgroundColor: "rgba(0,255,0,1)",
data: [10, 80, 12, 70, 65, 44, 18]
},
{
label: 'CCC',
backgroundColor: "rgba(0,0,205,1)",
data: [915, 400, 233, 398, 334, 766, 1071]
},
]
},
{
code: 'ASD123',
labels: ["7/2/2018", "7/3/2018", "7/4/2018", "7/5/2018", "7/6/2018", "7/9/2018", "7/10/2018"],
datasets: [{
label: 'AAA',
backgroundColor: "rgba(255,0,0,1)",
data: [55, 22, 40, 2, 0, 0, 0]
},
{
label: 'BBB',
backgroundColor: "rgba(0,255,0,1)",
data: [10, 2, 100, 0, 17, 55, 74]
},
{
label: 'CCC',
backgroundColor: "rgba(0,0,205,1)",
data: [232, 555, 800, 900, 723, 1001, 942]
},
]
},
]
};
data2.CC.forEach(function(item, arr) {
var chartId = item.code;
var canvas = document.createElement("Canvas");
var ctx = canvas.getContext('2d');
var chart = new Chart(ctx, {
type: 'bar',
data: item,
options: {
title: {
display: true,
text: chartId
},
tooltips: {
mode: 'index',
intersect: false
},
responsive: true,
scales: {
xAxes: [{
stacked: true,
}],
yAxes: [{
stacked: true
}]
}
}
});
document.body.appendChild(canvas);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>

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>