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];
}
}
}
}
});
Related
function chartJS_shortcode(){
?><canvas id="myChart" width="400" height="400"></canvas><?php
<script>
const ctx = document.getElementById('myChart').getContext('2d');
const 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: {
y: {
beginAtZero: true
}
}
}
});
</script>
}
add_shortcode("chartJS", "chartJS_shortcode");
I want to create a chart shortcode through chart.js and when I add this code in functions.php, its breaks the site. Please tell me what is wrong with this code? however, its code works fine when I paste into the page.
Place the JavaScript in it's own file. Reasons for doing this is that you only want to load the script once and it keeps your shortcode a bit cleaner. Let's call that file chart.js
Let's register that script for enqueueing with wp_register_script, meaning that it will be added to the page whenever we give the signal.
add_action('wp_enqueue_scripts', function() {
wp_register_script('chartJS', 'your-assets-folder/chart.js', [], false, true);
});
Then for the shortcode. Because the script is now in a separate file, the code is much cleaner. Here we call wp_enqueue_script to add your JS to the bottom of the page.
The most important part here is returning the HTML as a string. This will be the output of the shortcode.
add_shortcode('chartJS', function($atts, $content = null) {
wp_enqueue_script('chartJS');
return '<canvas id="myChart" width="400" height="400"></canvas>';
});
I am building a chart with React and Chart.js, and I need to display tick labels that have mixed font styles. Chart.js returns the tick values as a string of the the text passed in as well as the HTML tags that wrap the values we want to italicize.
I tried writing a callback function to return jsx which nulled out the y axis tick marks. Additionally, I have tried applying conditions to the fontStyle prop, and customizing the html in the labels.
let italicizedFont = 'Font'.italics()
console.log(italicizedFont)
var myChart = new Chart(ctx, {
type: 'horizontalBar',
data: {
labels: ["Normal Font", "Mixed <i>Font</i>", `Mixed ${italicizedFont}`, 'Mixed font in <i>Return</i>'],
datasets: [{
data: [12, 19, 8],
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)',
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
],
borderWidth: 1
}]
},
options: {
responsive: false,
scales: {
xAxes: [{
ticks: {
beginAtZero: true
}
}],
yAxes: [{
ticks: {
callback: (value, i, values) => {
if(i !== 3 ){
return value
}
return values[3].replace(/<i>/g, '').replace(/<\/i>/g, '')
},
// fontStyle: 'italic'
}
}]
}
}
});
Code Pen Example
I would expect that Chart.js would convert the string "normal text italicized text" to a string. However, Chart.js seems capable of only returning a fully italicized string "normal text italicized text" or a string with the html tags included.
I am using chart.js to drwa doughnut chart.I tried to change label font size with my below code but its not working for me.
also I tried to wrap it in two lines to show full label but wrap is also not working.
Attached is sample example of chart where United Arab emirates is Label which is cutting and not showing fully for me /
My code is :
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: 'Fruits',
data: ['one', 'two','three','three', 'four', 'five'],
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)'
],
borderWidth: 1,
fontSize:18, // This is not working
wrap: true, // This is not working
itemWrap: true, // This is not working
}]
},
options: {
legend: {
display: false ,
},
}
});
Anyone if any idea ? Thanks
try to use this line
// Global Options
Chart.defaults.global.defaultFontSize = 18;
var myChart = new Chart(ctx, {
rest of your code..
}
I keep getting this error and I wasn't able to display a Chart.js chart yet, although I have tried multiples codes I found on the internet.
Here is the relevant part of the HTML :
<head>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script>
...
</head>
<body>
<canvas id = "myChart"></canvas>
...
</body>
Here is the javascript :
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
}
}]
}
}
});
I found that example here : http://www.chartjs.org/docs/
And I get this error in the console :
TypeError: t is undefined
Can someone help please ? Thanks.
Solved, apparently the script link I was using was bugged. Changed it to https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js and it works fine. See Chris G's comment.
Put the javascript code (start with <script type="text/javascript">var ctx ...</script>) after the canvas element. This ensures that the canvas element is already present at the time when it gets referenced by var ctx = document.getElementById("myChart");
This should solve your problem.
I'm using 2.8.0 (current latest). Earlier versions as suggested here did not help.
The solution to this error for me was providing the correct element ID for the context. I was giving new Chart() "chartjs-1" because I blindly copied an example, but my canvas ID was "myCanvas". Giving new Chart() the actual ID of my canvas fixed the problem.
Note, the error in the question is from Firefox. Chrome gave a different error that clued me into the real culprit: Cannot read property 'length' of null
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");