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/
Related
I am using charts js version 2.9.4. I am creating a horizontal single-bar chart.
I want to add functionality on legends to Show and hide the single Bar on clicking every legend.
Is it possible to achieve this functionality through chart js or any other chart library?
Thanks!
barChartOptions = {
legend: {
display: true,
position: "bottom",
onHover: function (event, legendItem) {
document.getElementById("mybarChart").style.cursor = "pointer";
},
labels: {
usePointStyle: true,
generateLabels: function (chart) {
var labels = chart.data.labels;
var dataset = chart.data.datasets[0];
var legend = labels.map(function (label, index) {
return {
datasetIndex: 0,
text: label,
fillStyle: dataset.backgroundColor[index],
strokeStyle: dataset.borderColor[index],
lineWidth: 1,
};
});
return legend;
},
},
},
};
yourData = {
labels: [18, 82, 22, 80, 85, 88, 90],
datasets: [
{
data: [1, 2, 3, 4, 10, 12, 15],
barThickness: 20,
backgroundColor: [
"#ff6384",
"#36a2eb",
"#ffce56",
"#4bc0c0",
"#9966ff",
"#9966fe",
"#9955cd",
"#9966ee",
],
borderColor: ["#ff6384", "#36a2eb", "#ffce56", "#4bc0c0", "#9966ff"],
},
],
};
this.chart = new Chart(ctx, {
type: "horizontalBar",
data: yourData,
options: barChartOptions,
});
Thanks
I'm new to chart.js, and I have a question about making x-axis labels position to the top.
This is the result that I expected: x-axis labels are on the top.
And this is my attempt:
const ctx = document.getElementById('weather_chart');
const myChart = new Chart(ctx, {
data: {
datasets: [{
type: 'bar',
label: 'rainfall probability',
data: [10, 20, 30, 40],
}, {
type: 'line',
label: 'temperature',
data: [50, 50, 50, 50],
borderColor: '#EB6E4B',
backgroundColor: '#EB6E4B',
}],
labels: ['now', '9am', '10am', '11am', '12pm'],
},
options: {
plugins: {
legend: {
display: false,
},
}
}
});
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<div id="chart">
<canvas id="weather_chart"></canvas>
</div>
If it is possible, would you take your time to write the answer?
Thanks in advance, and if my question is insufficient, I would appreciate it if you could tell me.
You can configure all scale related things like position in this namepsaces: options.scales[scaleId]. For more config options of the scales you can read the documentation: https://www.chartjs.org/docs/master/axes/
const ctx = document.getElementById('weather_chart');
const myChart = new Chart(ctx, {
data: {
datasets: [{
type: 'bar',
label: 'rainfall probability',
data: [10, 20, 30, 40],
}, {
type: 'line',
label: 'temperature',
data: [50, 50, 50, 50],
borderColor: '#EB6E4B',
backgroundColor: '#EB6E4B',
}],
labels: ['now', '9am', '10am', '11am', '12pm'],
},
options: {
scales: {
x: {
position: 'top'
}
},
plugins: {
legend: {
display: false,
},
}
}
});
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<div id="chart">
<canvas id="weather_chart"></canvas>
</div>
inside options > scales > xAxes the xAxes is an array, so we can define multiple axis and there configuration like this:
options:{
scales: {
xAxes: [
{
position: 'top',
ticks: {
maxRotation: 90,
minRotation: 80
}
}
]
}
}
Checkout the example here
https://codepen.io/ganeshbkdm/pen/oNeaOwm
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
}]
I following the example of Chart.js for a stacked colum graph
http://www.chartjs.org/samples/latest/charts/bar/stacked-group.html
But when I try to replicate for my graph... the stack parameter does not works.
I use the version 2.4.
Here is my code
var color = Chart.helpers.color;
var barChartData = {
labels: [1,2,3,4,5,6,7]<?php // echo ($asse) ?> ,
datasets: [
{
label: '2016',
backgroundColor: color('#FCB441').alpha(0.5).rgbString(),
borderColor: '#FCB441',
borderWidth: 1,
data: [2,4,6,8,10,12,14] ,
stack: 0,
},
{
label: '2017',
backgroundColor: color('#FF0000').alpha(0.5).rgbString(),
borderColor: '#FF0000',
borderWidth: 2,
data: [2,4,6,8,10,12,14] ,
stack: 0,
},
{
label: '3',
backgroundColor: color('#FFFF00').alpha(0.5).rgbString(),
borderColor: '#FFFF00',
borderWidth: 2,
data: [1,2,3,4,5,6,7] ,
stack: 1,
},
]
};
window.onload = function() {
var ctx = document.getElementById('Chart_<?php echo $this->id ?>').getContext('2d');
window.myBar = new Chart(ctx, {
type: 'bar',
data: barChartData,
options: {
tooltips: {
mode: 'index',
intersect: false
},
responsive: true,
scales: {
xAxes: [{
stacked: true
}],
yAxes: [{
stacked: true
}]
}
}
});
};
`});
Here is my graph:
My Graph
I still don't get it where's my mistake, it seems like the demo code.
Thanks in advice.
Phil
Can Chart.js v2.x generate a combined stacked bar chart with 2 unstacked lines utilizing one y-axis? If so, how?
Below fiddle has 2 y-axis. The descending line, would render better if the right y-axis had a maximum value of 6000 as does the left axis.
jsfiddle example.
Below is the code for reference.
// set default no fill beneath the line
Chart.defaults.global.elements.line.fill = false;
// stacked bar with 2 unstacked lines - nope
var barChartData = {
labels: ['2016', '2017', '2018', '2019'],
datasets: [{
type: 'bar',
label: 'a',
yAxisID: "y-axis-0",
backgroundColor: "rgba(217,83,79,0.75)",
data: [1000, 2000, 4000, 5000]
}, {
type: 'bar',
label: 'b',
yAxisID: "y-axis-0",
backgroundColor: "rgba(92,184,92,0.75)",
data: [500, 600, 700, 800]
}, {
type: 'line',
label: 'c',
yAxisID: "y-axis-0",
backgroundColor: "rgba(51,51,51,0.5)",
data: [1500, 2600, 4700, 5800]
}, {
type: 'line',
label: 'd',
yAxisID: "y-axis-1",
backgroundColor: "rgba(151,187,205,0.5)",
data: [5000, 3000, 1000, 0]
}]
};
var ctx = document.getElementById("chart").getContext("2d");
// allocate and initialize a chart
var ch = new Chart(ctx, {
type: 'bar',
data: barChartData,
options: {
title: {
display: true,
text: "Chart.js Bar Chart - Stacked"
},
tooltips: {
mode: 'label'
},
responsive: true,
scales: {
xAxes: [{
stacked: true
}],
yAxes: [{
stacked: true,
position: "left",
id: "y-axis-0",
}, {
stacked: false,
position: "right",
id: "y-axis-1",
}]
}
}
});
Turns out, I just needed a modification or two so that the 2 y-axis use the same scale. See this jsfiddle. Now the chart renders better. The key, in my case, is adding a ticks node and these two properties to both yAxes objects:
ticks: {
beginAtZero: true,
suggestedMax: 5800
}
Naturally, the suggestedMax value would not be hard coded. Further, since the 2 scales are now the same, I hid the right scale with this property setting display: false.
As the fiddle shows, we now have 2 unstacked lines on a stacked bar chart nicely rendered.
Use this as the data for the graph:
var barData = {
labels: ['test1','test2'],
datasets: [
{
label: 'stack1',
backgroundColor: 'yellow',
borderColor: 'white',
borderWidth: 1,
stack: '1',
data: [5,4,3,2,1]
},
{
label: 'stack2',
backgroundColor: 'blue',
borderColor: 'white',
borderWidth: 1,
stack: '2',
data: [1,2,3,4,5]
}
]
};
This is the component to render the data:
<Bar data={barData} options={{scales: { xAxes: [{stacked:true}} }], yAxes:[{stacked:true}}] } }}}} />