I am using Chart.js to create a simple bar chart with only two rows and 2 sets of data. I am new to using the library and after reading the examples, I feel comfortable with most of the things there. Here is what I have so far
JS code for graph:
var helpers = Chart.helpers;
var canvas = document.getElementById('bar');
var barChartData = {
labels: ["IBM", "Microsoft"],
datasets: [{
label: "Product A",
fillColor: "rgba(220,220,220,0.5)",
strokeColor: "rgba(220,220,220,0.8)",
data: [25, 75]
}, {
label: "Product B",
fillColor: "rgba(151,187,205,0.5)",
strokeColor: "rgba(151,187,205,0.8)",
data: [75, 25]
}]
}
//
var bar = new Chart(canvas.getContext('2d')).Bar(barChartData, {
tooltipTemplate: "<%if (label){%><%=label%>: <%}%><%= value %>kb",
animation: false,
})
;
Now, I was wondering if it is possible to update this graph if the data was changed in real time without refreshing the page. For instance if every second the data values keep swapping or something random happens the graph should reflect the changes. I have searched a lot but not found proper document or tutorial explaining this and I would highly appreciate it if someone can show me how to do this.
This is the FIDDLE I have created for work so far.
You can just use the method addData(), Example:
bar.addData([40, 60], "Google");
Working example - http://jsbin.com/kalilayohu/1/
this is the code
var canvas = document.getElementById('myChart');
var myBarChart = Chart.Bar(canvas,{
data:{
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [
{
label: "My First dataset",
data: [65, 59, 80, 81, 56, 55, 40],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}
]
},
options:{
scales: {
yAxes:[{
stacked:true,
gridLines: {
display:true,
color:"rgba(255,99,132,0.2)"
}
}],
xAxes:[{
gridLines: {
display:false
}
}]
}
}
});
You can update doing this:
myBarChart.data.datasets[0].data[4] = 50;//this update the value of may
myBarChart.update();
Related
I am attempting to emphasize a specific value on the X-Axis if it meets a specific condition.
For example, in my codepen I want to only change the font size of the 'blue' bar. Is this even possible with Chart.js?
var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}],
xAxes: [{
ticks: {
//only show large font size for 'Blue'
fontSize: 16
}
}]
}
}
});
Chartjs doesn't have a public api to do this but you can modify internal _ticks on beforeDraw and make the label "Blue" as major: true then that label will be drawn using the major styling in tick configuration options.
Also use this with caution since it relies on internal implementation and thus might break in future releases (very unlikely to happen but just saying).
var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}],
xAxes: [{
ticks: {
fontSize: 16,
major: {
fontSize: 20
}
}
}]
}
},
plugins: [{
beforeDraw: function({ chart }, options) {
chart.boxes
.find(box => box.id === "x-axis-0")
._ticks
.find(tick => tick.label === "Blue")
.major = true;
}
}]
});
<canvas id="myChart"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script>
PS: Just in case someone is wondering how I know this internal implementation I searched fillText in chartjs github source code and console.log(myChart) xD
Looks like it's not possible according to their docs. You can only do something like uppercase needed label with callback function
xAxes: [{
ticks: {
fontSize: 16,
callback: v => v === 'Blue' ? v.toUpperCase() : v
}
}]
For chartjs 3.0 and higher, it can be done by using scriptable-options. Include it like this into your options for ticks:
options: {
scales: {
x: {
ticks: {
font: {
size: (c) => {
if (c.index==1){
return 20 // at tick label with idx one set fontsize 20
}
else {
return 12 // for all other tick labels set fontsize 12
}
},
},
},
},
},
},
I'm new to Chart.js and I've been trying to get all the snippets I've found to work together to get my labels and tool-tips to display correctly. I thought I would post my working script to show how I managed to get my values displayed with the thousand separator, a currency symbol added to the tool-tips and to the scales, and to have labels on the X and Y axes. Some of the posts I saw didn't have examples on where to place the relevant code.
Please note, I did not write all this code. This has been compiled from multiple Stack searches and multiple attempts to get some of it to work together.
Here's the code I used...
<canvas id="myChart"></canvas>
<script>
var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ["July", "August", "September", "October", "November", "December", "January", "February", "March", "April", "May", "June"],
datasets: [{
label: 'YTD 2017/18',
data: ["12000, 11250, 10000, 2000, 3000, 6000,12000, 11250, 10000, 2000, 3000, 6000"],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)',
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)',
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
scaleLabel: {
display: true,
labelString: 'Total Sales',
fontStyle: 'bold',
fontSize: 20
},
ticks: {
beginAtZero: true,
callback: function(value, index, values) {
if(parseInt(value) >= 1000){
return '$' + value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
} else {
return '$' + value;
}
}
}
}],
xAxes: [{
scaleLabel: {
display: true,
labelString: 'Months of the Year',
fontStyle: 'bold',
fontSize: 20
}
}],
},
tooltips: {
callbacks: {
// this callback is used to create the tooltip label
label: function(tooltipItem, data) {
// get the data label and data value to display
// convert the data value to local string so it uses a comma seperated number
var dataLabel = data.labels[tooltipItem.index];
// add the currency symbol $ to the label
var value = ': $ ' + data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index].toLocaleString();
// make sure this isn't a multi-line label (e.g. [["label 1 - line 1, "line 2, ], [etc...]])
if (Chart.helpers.isArray(dataLabel)) {
// show value on first line of multiline label
// need to clone because we are changing the value
dataLabel = dataLabel.slice();
dataLabel[0] += value;
} else {
dataLabel += value;
}
// return the text to display on the tooltip
return dataLabel;
}
}
},
}
});
</script>
I'm using Chart.js for a simple bar graph with data read from mysql. Unfortunately, the y-axis starts at random numbers, often higher than some of the bars. Therefore, some bars are not visible, although their value should be high enough:
I've already used the scaleBeginAtZero: true-option as suggested here, to no avail:
var ctx = $("#mycanvas");
Chart.defaults.global.scaleBeginAtZero = true;
var barGraph = new Chart(ctx, {
type: 'bar',
data: chartdata,
options: {
scaleBeginAtZero: true
}
});
Any ideas? The complete code is available here.
Well you can use the below code. So that, Y Axes of your bar chart starts from zero.
options: {
scales : {
yAxes : [{
ticks : {
beginAtZero : true
}
}]
}
}
[Sample-Code]
var ctx = document.getElementById("myChart1");
var data = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [
{
label: "My First dataset",
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1,
data: [65, 59, 80, 81, 56, 55, 40],
}
]
};
var myBarChart = new Chart(ctx, {
type: 'bar',
data: data,
options: {
scales : {
yAxes : [{
ticks : {
beginAtZero : true
}
}]
}
}
});
I am trying to use chart.js to create a simple live line/scatter chart, z-indexed to act as a backdrop for my app. For some reason, it's rendering as an opaque gray color instead of the reddish color I've specified. And, even though I've tried changing the other chart elements and defaults the chart is always gray. I'm sure it's a trivial fix but just i can not figure it out.
Here is the link to a JS Bin that has the full code.(You'll need to set and start the timer before the chart will have any data to show) Also, more specifically, this is the JS code related to creating the chart:
var ctx = document.getElementById('canvas').getContext("2d"),
points = [{x:0,y:0}],
lineData = {
datasets: [{
fillColor: "rgba(217, 108, 99, .9)",
strokeColor: "rgba(255, 255, 255, 1)",
pumpntHighlightStroke: "rgba(220,220,220,1)",
data: points
}]
},
lineOptions = {
showScale: false,
scaleShowLabels: false,
scaleShowGridLines : false,
pointDot : false,
pointDotRadius : 0,
pointDotStrokeWidth : 0,
pointHitDetectionRadius : 0,
datasetStroke : true,
datasetStrokeWidth : 3,
datasetFill : true,
};
Chart.defaults.global.elements.point.radius = 0;
Chart.defaults.global.legend.display = false;
Chart.defaults.global.tooltips.enabled = false;
Chart.defaults.global.animation.duration = 250;
Chart.scaleService.updateScaleDefaults('linear', {
display: false,
ticks: {
beginAtZero: true,
min: 0
}
});
Chart.defaults.global.elements.line.tension = 0.05;
Chart.defaults.global.maintainAspectRatio = false;
myChart = new Chart(ctx, {
type: 'scatter',
data: lineData,
options: lineOptions
});
Thank you for your time. please let me know if there is anything further I can explain.
I think this is because you don't use the correct properties. According to the docs (http://www.chartjs.org/docs/), you should use backgroundColor, not fillColor.
See the first example in the doc: http://www.chartjs.org/docs/#getting-started-creating-a-chart
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
Note that strokeColor doesn't exist aswell.
I have this simple html:
<canvas id="myChart" width="400" height="400"></canvas>
and this js:
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
Even though the canvas is configured with myChart id, I get the following error:
Uncaught TypeError: Cannot read property 'offsetWidth' of undefined
JSFiddle:
https://jsfiddle.net/kroejrhx/
After revisiting the question, here's your problem: you are using the wrong version of chart.js. According to this section, if you want to use an axis that's time based, you either need to explicitly include moment.js, or use the bundle version.
Changing the resource in your jsfiddle to https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.4/Chart.bundle.min.js will show the expected chart. No need to change the code at all.
If you want to use Chart.js v2.0 then this CDN will work.
https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.3/Chart.bundle.min.js
You have to use the version 2 of chart.js. If you are using npm, in your package.json, update chart.js e.g., "chart.js": "^2.1.1",. In case you use react-chartjs-2, you will still need to make sure that your chart.js version is 2 or bigger.
Use this : var ctx = document.getElementById("myChart").getContext("2d");
Instead of : var ctx = document.getElementById("myChart");