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 trying to achieve charts with vue js. I'm getting the chart with no chart itself but labels crossed. I've no idea what is going wrong.
This is supposed to be my pie chart. As you can see I'm getting the labels crossed that means remove all the labelled data and hence gives me an empty chart. Here is my code.
export const productChartData = {
type: 'pie',
data: {
labels: ['Purchased', 'Return', 'Cancelled', 'Shipped', 'Returned'],
datasets:[
{
data: ['22, 33, 12, 18, 19'],
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)'
],
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)'
],
borderWidth: 1
}
]
},
options:{
maintainAspectRatio:false,
title:{
display:true,
fontSize:18,
text: "Products"
}
}
}
export default productChartData;
On my .vue file,
methods: {
createChart(chartId, chartData){
const canvas = document.getElementById(chartId);
const ctx = canvas.getContext('2d');
const myChart = new Chart(ctx, {
type: chartData.type,
data: chartData.data,
options: chartData.options
});
}
}
There is an issue in your chart rendering code:
data: ['22, 33, 12, 18, 19'] should be passed as data: [22, 33, 12, 18, 19]. I have modified the pen and it's working -> https://codepen.io/anon/pen/dwKjqM
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");
So I have been given a small task by one of the graphic designers I work with, whereby we need to have a graph similar to the doughnut graph, that can be seen on the morris.js homepage in the sense the tooltip is in the center of the doughnut, but we are using chartjs to get the nice loading animation.
After some investigation, to try and get Morris.js to do the animation, this was found to be extremely difficult, so I opted to go for making ChartJs appear more like morris.js.
To add to the complexity (ever so slightly) we are using angular for alot of our logic, and to implement numerous features, so we have gone with angular-chartjs which is suiting our purposes quite nicely.
Now to the nitty gritty.
So far I've gotten quite close I think to replicating the general idea that Morris JS has done. I tried to do my code in a jsfiddle but for some reason I can't get the angular-chart.js to work.
Basically the issue I am having is in the afterLabel function, I'm a little stumped as to how to get it to center, so both the main label and the afterLabel both are centered in the doughnut.
I won't say the code I did is particularly pleasant, but it seems to so far be working, so any suggestions would be much appreciated.
I should also note, the code does work using standard chartjs, and you can find the fiddle here https://jsfiddle.net/maraket/5qpsztrm/ which seems to work just fine except for the centering.
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: 'doughnut',
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: {
maintainAspectRatio: false,
tooltips: {
bodyColor: "#000",
backgroundColor: "rgba(0,0,0,0)",
custom: function(tooltip) {
tooltip.bodyFontSize = this._chartInstance.innerRadius / 4;
var txt = [
(tooltip.beforeTitle || []).join('\n'), (tooltip.title || []).join('\n'), (tooltip.afterTitle || []).join('\n'), (tooltip.beforeBody || []).join('\n'), (tooltip.body || []).join('\n'), (tooltip.afterBody || []).join('\n'), (tooltip.beforeFooter || [])
.join('\n'), (tooltip.footer || []).join('\n'), (tooltip.afterFooter || []).join('\n')
];
txt = txt.join("\n");
tooltip.y = ((this._chartInstance.chartArea.bottom - this._chartInstance.chartArea.top) / 2) + this._chartInstance.chartArea.top - tooltip.bodyFontSize;
tooltip.x = (this._chart.width / 2) - (this._chart.ctx.measureText(txt).width / 1.5);
},
callbacks: {
label: function(tooltipItem, data) {
return data.labels[tooltipItem.index];
},
afterLabel: function(tooltipItem, data) {
return data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
}
}
}
}
});
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();