I've got one data-set values not showing in dual-yAxes charting.
I've got the general Chart.js code working with dual data-sets and dual yAxes. however, one data set is not showing correctly on chart. the "Temp" values range between 66 and 78, but appear to be "off the chart" despite the min/max range values I use.
See my code here on JSFiddle
<div style="width:75%">
<canvas class=".content" id="myChart" ></canvas>
</div>
<Script>
var canvas = document.getElementById('myChart').getContext('2d');
// #ts-ignore
var myChart = new Chart(canvas, {
options: {
scales: {
yAxes: [
{
id: 'SG',
//type: 'linear',
position: 'left',
ticks:
{
min: 1,
max: 1.1
}
},
{
id: 'Temp',
//type: 'linear',
position: 'right',
ticks:
{
min: 32,
max: 100
}
}
]
}
},
type: 'bar', //not really needed, over-ridden below
data: {
labels: ['Mon', 'Tues', 'Wed', 'Thurs', 'Fri'],
datasets: [{
label: 'Gravity',
yAxesID: 'SG',
data: [1.07, 1.045, 1.030, 1.014, 1.012],
backgroundColor: '#ff6384' //red
}, {
//type: 'line',
label: 'Temp F',
yAxesID: 'Temp',
data: [78, 66, 78, 66, 76],
backgroundColor: '#36a2eb' //blue
}]
}
});
</Script>
Maybe I'm missing something specific to dual-yAxes charting...
There is a spelling mistake replace yAxesID with yAxisID, and the dataset population should look like the below code or you can see the fiddle for your reference -> https://jsfiddle.net/69p7Lsth/1/
datasets: [{
label: 'Gravity',
yAxisID: 'SG',
data: [1.07, 1.045, 1.030, 1.014, 1.012],
backgroundColor: '#ff6384' //red
}, {
label: 'Temp F',
yAxisID: 'Temp',
data: [8, 66, 78, 66, 76],
backgroundColor: '#36a2eb' //blue
}]
Related
I am trying to set min/max starting values to scale and circular grid to a radar in chartjs, but none seens to work.
const chart1 = new Chart($('#chart-area1'), {
type: 'radar',
data: {
labels: ['test1', 'test2', 'test3'],
datasets: [{
label: '1',
data: [20, 25, 55],
borderColor: setup_borderColor[0],
backgroundColor: setup_backgroundColor[0],
borderWidth: 1
},{
label: '2',
data: [25, 35, 40],
borderColor: setup_borderColor[1],
backgroundColor: setup_backgroundColor[1],
borderWidth: 1
}]
},
options: {
scale: {
min: 0,
max: 100,
},
scales: {
r: {
grid: {
circular: true
}
}
}
}
});
The radar chartjs should start at 0 with a max value at 100 and be a circular grid, but both options dont work, my result:
Result:
Chartjs version: Chart.js v2.9.3
You are mixing V2 and V3 syntax in all the wrong ways, in V2 you need to use the scale option not scales.r and the min/max have to be configured in the ticks part not in the root and grid must be gridLines:
var options = {
type: 'radar',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
borderColor: 'pink'
},
{
label: '# of Points',
data: [7, 11, 5, 8, 3, 7],
borderColor: 'orange'
}
]
},
options: {
scale: {
ticks: {
max: 40,
min: 0
},
gridLines: {
circular: true
}
}
}
}
var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
<body>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>
</body>
For more info you can read the 2.9.4 documentation
I have a graph that displays data of the last 2h, 8h, 24h, or 48h. This can be changed via buttons on the webpage. When the timespan includes midnight, I would like to display vertical lines with little labels (maybe at hover) at midnight displaying the date (or day of the week) of the upcoming day.
I have not found any resources on how to do that in Chartjs 3. How would I do such a task?
This is how I create the graph. "time" is an array of epoch times:
chart = new Chart(
document.getElementById('Chart'),
{
type: 'line',
data:
{
labels: time,
datasets: [
{
label: dataObjects[start].label,
backgroundColor: dataObjects[start].backgroundColor,
borderColor: dataObjects[start].borderColor,
fill: dataObjects[start].fill,
data: dataObjects[start].data,
yAxisID: 'A',
}]
},
options: {
elements: {point: {radius: 0.5, borderWidth: 1},
line: {borderWidth: 3}},
maintainAspectRatio: false,
scales: {
x:
{
//max: last_time,
type: "time",
grid: {borderColor: color.time},
ticks: {color: color.time},
time: {
unit: 'hour',
tooltipFormat: 'dd.MM. HH:mm',
displayFormats: {
second: "HH:mm",
minute: "HH:mm",
hour: "HH:mm",
day: "d.MM.",
week: "d.MM."
},
}
},
A:
{
type: 'linear',
grid: {borderColor: color.time},
position: 'left',
ticks: {color: color.time},
suggestedMin: dataObjects[start].suggestedMin,
suggestedMax: dataObjects[start].suggestedMax,
title: {text: dataObjects[start].text,
display: true,
color: color.time}
}
},
plugins: {
legend: {display: false}
}
}
});
You could use the annotation plugin. In your case you will need to change the string I used to determine the correct x axis placement to the timestamp of the midnight you want and then you have a line there:
const options = {
type: 'line',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
borderColor: 'pink'
}]
},
options: {
plugins: {
annotation: {
annotations: {
line1: {
type: 'line',
xMin: 'Green',
xMax: 'Green',
label: {
enabled: true,
content: 'end value'
}
},
line2: {
type: 'line',
xMin: 'Blue',
xMax: 'Blue',
label: {
enabled: true,
content: 'begin value'
}
}
}
}
}
}
}
const ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
<body>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.0/chart.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-annotation/1.3.1/chartjs-plugin-annotation.min.js"></script>
</body>
You can use a mixed chart to create this graph mixing a line chart and a bar chart.
Here you can view one example:
https://codepen.io/alyf-mendonca/pen/dyZZoeB
HTML:
<div>
<canvas id="myChart"></canvas>
</div>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
JS:
const labels = [
'January',
'February',
'March',
'April',
'May',
'June',
];
const data = {
labels: [
'20:00',
'21:00',
'22:00',
'23:00',
'00:00',
'01:00',
'02:00'
],
datasets: [{
type: 'line',
label: 'Bar Dataset',
data: [20, 21, 23, 22, 21, 20, 23],
borderColor: 'rgb(255, 99, 132)',
backgroundColor: 'rgba(255, 99, 132, 0.2)'
}, {
type: 'bar',
label: 'Line Dataset',
data: [0, 0, 0, 0, 50, 0, 0],
fill: false,
borderColor: 'rgb(54, 162, 235)'
}]
};
const config = {
type: 'bar',
data: data,
options: {
scales: {
x: {
stacked: true
}
}
},
};
const myChart = new Chart(
document.getElementById('myChart'),
config
);
I'm trying to create a percentile chart, ie a chart with some lines corresponding to each percentile. Given a user input, I want to show their mark in the chart with a dot.
So basically, my question is: Is it possible to place a dot in a multiple line chart? If so, how do I do it?
var lineChart = new Chart(myChart2, {
type: 'line',
data: {
labels: ['6', '7', '8', '9', '10', '11'],
datasets: [ {
label: "50th",
data: [20, 22, 28, 26, 25, 26],
borderColor: '#166ab5',
fill: false
}, {
label: "90th",
data: [72, 74, 68, 75, 74, 78],
borderColor: '#00FF00',
fill: false
}, {
label: "10th",
data: [2, 2, 5, 4, 6, 5],
borderColor: '#FF0000',
fill: false
}]
},
options: {
title: {
text: "Percentile",
display: true
},
legend: {
},
scales: {
xAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: ''
}
}],
yAxes: [{
display: true,
ticks: {
beginAtZero: true
}
}]
},
annotation: {
annotations: [{
type: 'line',
mode: 'horizontal',
scaleID: 'y-axis-0',
value: '26',
borderColor: 'tomato',
borderWidth: 1
}],
drawTime: "afterDraw" // (default)
}
}
});
I've got a simple chart.js chart with dual axes. To improve readability, I'd like to color coordinate the chart & scale data. Is this possible?
For example, in my sample below, I'd like to have the temp values on left axis shown in red and the SG values on the right axis shown in blue.
I've tried adding fontColor and scaleFontColor options under the specific axis options, but no luck.
Here is my code:
var canvas = document.getElementById('myChart');
var chartData = {
labels: ['Mon', 'Tue', 'Wed', 'Thur', 'Fri'],
datasets: [{
label: 'Temp F',
yAxisID: 'F',
display: true,
fill: false,
borderColor: '#ff6384', //red
data: [100, 96, 84, 76, 69]
}, {
//type: 'line',
label: 'Gravity',
yAxisID: 'G',
display: true,
fill: false,
borderColor: '#36a2eb', //blue
data: [1.07, 1.055, 1.020, 1.015, 1.012]
}]
};
var myChart = new Chart(canvas, {
type: 'line',
data: chartData,
options: {
title: {
display: true,
text: 'Mmm Beer!'
},
scales: {
yAxes: [{
id: 'F',
position: 'left',
scaleFontColor: '#ff6384', //red
ticks: {
suggestedMin: 32,
suggestedMax: 100
}
}, {
id: 'G',
position: 'right',
ticks: {
suggestedMin: 1,
suggestedMax: 1.1
},
gridLines: {
drawOnChartArea: false, // only want the grid lines for one axis to show up
},
}]
}
}
});
body {
background: #20262E;
padding: 20px;
font-family: Helvetica;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script>
<div>
<canvas id="myChart"></canvas>
</div>
I think I have solved the problem. As you are trying to change the color of both Y axis values. You need to add fontColor property inside ticks object for the specific yAxes. Then assign any color value you want to fontColor property of ticks object.
Find the changes here
var canvas = document.getElementById('myChart');
var chartData = {
labels: ['Mon', 'Tue', 'Wed', 'Thur', 'Fri'],
datasets: [{
label: 'Temp F',
yAxisID: 'F',
display: true,
fill: false,
borderColor: '#ff6384', //red
data: [100, 96, 84, 76, 69]
}, {
//type: 'line',
label: 'Gravity',
yAxisID: 'G',
display: true,
fill: false,
borderColor: '#36a2eb', //blue
data: [1.07, 1.055, 1.020, 1.015, 1.012]
}]
};
// #ts-ignore
var myChart = new Chart(canvas, {
type: 'line',
data: chartData,
options: {
title: {
display: true,
text: 'Mmm Beer!'
},
scales: {
yAxes: [{
id: 'F',
position: 'left',
ticks: {
fontColor: '#ff6384', //red
suggestedMin: 32,
suggestedMax: 100
}
}, {
id: 'G',
position: 'right',
ticks: {
fontColor: '#36a2eb', //blue
suggestedMin: 1,
suggestedMax: 1.1
},
gridLines: {
drawOnChartArea: false, // only want the grid lines for one axis to show up
},
}]
}
}
});
body {
background: #20262E;
padding: 20px;
font-family: Helvetica;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script>
<div>
<canvas class=".content" id="myChart"></canvas>
</div>
Hope, this will help you. Thanks!
I'm getting myself familiar with Chart.js and want to do a simple thing but couldn't. I just want the chart to re-animate when clicking on a button, but couldn't get it to work. I thought by attaching chart.update to the onclick would work, but it didn't. Thanks for help.
http://jsfiddle.net/f7nj80ye/5/
$('#button1').click(function(){
chart.update();
});
You need to destroy it, and create it again :
var ctx = document.getElementById("myChart");
var config = {
type: 'bar',
data: {
labels: ["2014", "2015", "2016"],
datasets: [{
label: 'Group 1',
data: [50, -59, 64],
datalabels:{
anchor: "end",
align: "end",
color:"black",
font:{ size: 14, },
},
backgroundColor: [ '#5bbbbb', '#5bbbbb4', '#5bbbbb' ],
borderWidth: 1
},{
label: 'Group 2',
data: [69, -85, 92],
datalabels:{
anchor: "end",
align: "end",
color:"black",
font:{ size: 14, },
},
backgroundColor: ['#ddd','#ddd','#ddd'],
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero:true,
max:100
}
}]
}
}
};
var chart = new Chart(ctx, config);
(function() { // self calling function replaces document.ready()
//adding event listenr to button
document.querySelector('#button1').addEventListener('click',function(){
chart.destroy();
chart = new Chart(ctx, config);
});
})();
And here is a fiddle : http://jsfiddle.net/f7nj80ye/30/