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.
Related
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: {{ labels}},//labels are the time values
datasets: [{
label: '# temperature',
data: {{ datas}},
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
}
}]
}
}
});
You need to define your xAxis as a time cartesian axis with a unit that matches your data. The default display format of 'hour' is 'hA' (for instance '2PM'). You should probably also use the same format for displaying tooltips.
xAxes: [{
type: 'time',
time: {
unit: 'hour',
tooltipFormat: 'hA'
}
}],
Please note that Chart.js uses Moment.js for the functionality of the time axis. Therefore you should use the bundled version of Chart.js that includes Moment.js in a single file.
Please have a look at belo runnable code snippet.
const labels = [1585725538000, 1585729616000, 1585742414000, 1585812498000, 1585842536000, 1585918521000, 1585938665000, 1585948685000];
const datas = [15, 16, 15, 17, 12, 13, 11, 12];
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: labels,
datasets: [{
label: '# temperature',
data: datas,
backgroundColor: 'rgba(255, 99, 132, 0.2)',
borderColor: 'rgba(255, 99, 132, 1)',
borderWidth: 1
}]
},
options: {
scales: {
xAxes: [{
type: 'time',
time: {
unit: 'hour',
tooltipFormat: 'hA'
}
}],
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.js"></script>
<canvas id="myChart" height="90"></canvas>
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 writing code to read in values from my Firebase database, store them into an array, and then plug my array into the Chart.js code to display my data in the graph. But my graph is coming up empty.
First, I create a snapshot of the values in the database, and push them to the new array genderData. I then confirmed that the array was populated with a console.log(genderData) (see below). As far as I can tell, the array was populated:
My console log:
I then console logged outside of my ref call to the database, and it looks like this:
My code to pull data from the database:
var rootRef = firebase.database().ref().child('counters');
// Get counter values.
var genderData = [];
rootRef.once('value').then(function(snapshot){
genderData.push(snapshot.val()['Male']);
genderData.push(snapshot.val()['Female']);
genderData.push(snapshot.val()['Nonbinary']);
genderData.push(snapshot.val()['Other']);
genderData.push(snapshot.val()["Didn't Say"]);
console.log(genderData);
})
console.log(genderData);
Then, I created a regular bar graph with Chart.js, and tried to plug in genderData into the graph:
// Bar graph displaying the total number of students by gender.
var ctx = document.getElementById("myChart4").getContext('2d');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ["Male", "Female", "Non-Binary", "Other", "Unspecified"],
datasets: [{
data: genderData,
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: {
title: {
display: true,
text: 'Total Students by Time Taken to Complete Degree'
},
legend:{
display: false
},
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}]
}
}
});
But my graph is empty:
EDIT:
Upon further inspection, I noticed that the values are showing up... kind of.
So it seems that my data just isn't creating the "bar" of the graph? And my y values start at 0.0 and end at 1.0, and I have no idea why.
I'm working with chartjs and trying to update my initial state with an API call which looks like:
this.state = {
data: {
labels: [], //<-- SET THIS STATE
datasets: [{
fill: 'false',
lineTension: 0,
label: 'Price in USD',
data: [], //<-- SET THIS STATE
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
}]
}
}
I need to setState for labels - which I have done already. But got lost and confused as to also setState for code below at the same time.
data: {
labels: [],
datasets: [{
fill: 'false',
lineTension: 0,
label: 'Price in USD',
data: [], <------THISSSS
Here's what I did to set my labels state
let labels = this.state.data.labels
labels = timeData
this.setState(({data}) => ({data: {
...data,
labels: labels
}}))
You are initializing labels as this.state.data.labels, which is fine, but then you change it to timeData, which I'm assuming is declared somewhere else in the code. You don't need to set labels to this.state.data.labels if you're going to assign it a new value immediately after. Also, if you want to simplify it further, you can also exclude the line labels = timeData and just use timeData in the setState call.
As for the this.setState() call, you should not be passing it a function.
To answer your question, this is how you can set the state of labels and the second data property without affecting the rest of the state:
this.setState({
data: {
labels: timeData,
datasets: [{
...this.state.data.datasets,
data: SOME_VALUE_HERE
}]
}
});
>>> Radar chart labels with background color
Hi there, I just want to ask for an option to add the background color (a rounded rect with bg color) for labels (individually) in Chartjs. Is there any callback that I can apply for changing this, any help is appreciated with best regards!
This is the current code:
let chart = new Chart('chart-0', {
type: 'radar',
data: radarChartData,
options: {
responsive: true,
legend: {
position: 'top',
},
title: {
display: true,
text: 'Radar Chart | Chart.js',
fontSize: 16
},
scale: {
ticks: {
beginAtZero: true
},
pointLabels: {
fontSize: 14, // fontSize is ok
fontColor: presets.blue, // fontColor is accessible
backgroundColor: presets.yellow //This is not working for sure!
}
},
animation: {
animateScale: true,
animateRotate: true
}
}
});
You can do using backgroundColor.
data: {
labels: chart_label,
datasets: [{
label: '# of Votes',
data: chart_data,
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
}]
},
In case someone needs the answer, I did posted in in chartjs and Tim has done it so well: https://github.com/chartjs/Chart.js/issues/5085
Rgrds,