I am trying to change the background color of the tooltip, but can only seem to change the key: https://jsfiddle.net/1ez0Lo8a/
Referring to the black background of the tooltip when you hover over the bar.
tooltips: {
yAlign: 'bottom',
callbacks: {
labelColor: function(tooltipItem, chart) {
return {
backgroundColor: 'rgb(255, 0, 0)'
}
},
}
Further, as you can see, I've managed to remove the axis - but none of those settings have removed the very bottom horizontal axis. Can anyone advise how to remove that one also ?
Use backgroundColor property directly under tooltips .
Try this code :
tooltips: {
yAlign: 'bottom',
callbacks: {
labelColor: function(tooltipItem, chart) {
return {
backgroundColor: 'rgb(255, 0, 0)'
}
},
},
backgroundColor: '#227799'
}
tooltips: { backgroundColor: '...'} is works, but for dynamical change of background with depend of element (when argument is function) I had to do patch in 3 places of unpacked code of bundle, version 2.7.3 (it may be in higher versions also).
Related
Is it possible to add border color to the text.
https://codesandbox.io/s/react-chartjs-2-doughnut-pie-chart-forked-j3dhsn?file=/src/index.js
The only thin missing in your code is datalabels.borderWidth
datalabels: {
color: "#fff",
borderColor: "#000",
borderWidth: 2, // <- add this
font: {
size: 14,
weight: "bold"
}
}
Please take a look at your amended CodeSanbox to see the result.
I'm using scatter graph. On hover over a point, the box representing the point color is not filled
I need to fill it with the color of the line instead of just the border being of the color.
Fiddle
This is my dataset:
this.ScatterChart.data.datasets.push({
label: this.label,
data: this.Axiscoordinates,
fill: false,
lineTension: 0.1,
borderColor: SetColor,
color: SetColor,
backGroundColor: SetColor,
borderWidth: 1,
yAxisID: this.yAxisUnit,
showLine: true
});
in your dataset object put the backgroundColor to the color you want it to be, that will solve it
datasets: [
{
data: []
backgroundColor: color
}
]
EDIT:My mistake backgroundColor is with a lower g instead of a captial one
I'm using ChartJS with the plug-in ChartJS DataLabels to show text values right next to the points (who would have thought that a plugin is necessary for this basic task, but I digress).
My issue I need to vary the color of my text labels along with the individual dataset. But so far I haven't found a solution. I'm adding new datasets dynamically, they're not statically pre-loaded. The color should match the color of the dataset.
Suppose I have
var colorpalette = ["red", "blue", "green", "magenta", "yellow", "brown", "purple", "orange", "black", "gray"];
var currseriesnum = 0;
var chart = null;
function setUpChart() {
var ctx = document.getElementById('chartArea').getContext('2d');
chart = new Chart(ctx, {
type: 'line',
data: {
labels: monthnames,
datasets: [] // Initially blank - series added dynamically with chart.update()
},
options: {
legend: {
display: false
},
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
},
plugins: { // ChartsJS DataLabels initialized here
datalabels: {
anchor: 'end',
align: 'bottom',
formatter: Math.round,
font: {
weight: 'bold',
size: 16
},
color: colorpalette[currseriesnum] // Pick color dynamically
}
}
}
});
}
Doesn't work. Also tried a function, color: function(context), but unsure how to retrieve the current index of the dataset I'm getting here.
I'm adding series to the chart dynamically (initially empty) as below, and incrementing the global var currseriesnum.
chart.data.datasets.push({
label: keyValueSelection.label,
fill: false,
data: keyValueSelection.value,
borderColor: colorpalette[currseriesnum],
borderWidth: 2
});
chart.update();
currseriesnum++;
They gave me the answer on the ChartJS DataLabels forum:
plugins: {
datalabels: {
color: function(ctx) {
// use the same color as the border
return ctx.dataset.borderColor
}
}
}
I have the following code to create a graph using Chart.js v2.1.3:
var ctx = $('#gold_chart');
var goldChart = new Chart(ctx, {
type: 'line',
data: {
labels: dates,
datasets: [{
label: 'I want to remove this Label',
data: prices,
pointRadius: 0,
borderWidth: 1
}]
}
});
The code looks simple, but I cannot remove the label from the graph. I tried a lot of solutions I found online, but most of them use Chart.js v1.x.
How can I remove the dataset labels?
Just set the label and tooltip options like so
...
options: {
legend: {
display: false
},
tooltips: {
callbacks: {
label: function(tooltipItem) {
return tooltipItem.yLabel;
}
}
}
}
Fiddle - http://jsfiddle.net/g19220r6/
As of 2021, the namespace has changed from options.legend to options.plugins.legend. This simple code worked for me -
options: {
plugins: {
legend: {
display: false
}
}
}
Documentation reference
add:
Chart.defaults.global.legend.display = false;
in the starting of your script code;
New Solution ChartJS v3.1.1
The above solution is correct for previous versions of chart js prior to v3.1 for v3.1.1 use the following
...
options: {
plugins:{
legend: {
display: false
}
}
}
For those who want to remove the actual axis labels and not just the legend in 2021 (Chart.js v.3.5.1). Note: this also removes the axes.
const chartWrap = document.querySelector('.chart-wrap')
const canvas = document.createElement('canvas')
chartWrap.appendChild(canvas)
const ctx = canvas.getContext('2d')
const myChart = new Chart(ctx, {
type: 'line',
data: {
labels: ['Your', 'axis', 'labels'],
datasets: [
{
label: 'Your legend label',
data: [1, 3, 2],
backgroundColor: '#54ACEF'
}
]
},
options: {
maintainAspectRatio: false,
plugins: {
legend: false // Hide legend
},
scales: {
y: {
display: false // Hide Y axis labels
},
x: {
display: false // Hide X axis labels
}
}
}
})
<div class="chart-wrap" style="width: 200px; height: 100px;"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.min.js" integrity="sha512-Wt1bJGtlnMtGP0dqNFH1xlkLBNpEodaiQ8ZN5JLA5wpc1sUlk/O5uuOMNgvzddzkpvZ9GLyYNa8w2s7rqiTk5Q==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
You can also put the tooltip onto one line by removing the "title":
this.chart = new Chart(ctx, {
type: this.props.horizontal ? 'horizontalBar' : 'bar',
options: {
legend: {
display: false,
},
tooltips: {
callbacks: {
label: tooltipItem => `${tooltipItem.yLabel}: ${tooltipItem.xLabel}`,
title: () => null,
}
},
},
});
It's just as simple as adding this:
legend: {
display: false,
}
Or if you want you could use this other option which should also work:
Chart.defaults.global.legend.display = false;``
new Chart('idName', {
type: 'typeChar',
data: data,
options: {
legend: {
display: false
}
}
});
Replace options with this snippet, will fix for Vanilla JavaScript Developers
options: {
title: {
text: 'Hello',
display: true
},
scales: {
xAxes: [{
ticks: {
display: false
}
}]
},
legend: {
display: false
}
}
I created a simple ColumnChart. Is there a way to change the font color globally (through options)?
I would like to change the color of the X and Y axis text. I was able to change the font, the background color, etc. but not the font color.
This is what I have so far:
var options = {
backgroundColor: '#f1f1f1',
fontName: 'Segoe UI'
};
chart.draw(data, options);
Thanks in advance.
There is no global font style option. You have to set the styles on each element separately:
chart.draw(data, {
titleTextStyle: {
color: 'red'
},
hAxis: {
textStyle: {
color: 'red'
},
titleTextStyle: {
color: 'red'
}
},
vAxis: {
textStyle: {
color: 'red'
},
titleTextStyle: {
color: 'red'
}
},
legend: {
textStyle: {
color: 'red'
}
}
});
If you wish to, you can make a feature request to add support for a global font style.
There's no solution within the google charts API that I know of. I use a workaround in JQuery that I run after the chart is rendered:
$.each($("text"),function(index, value) {
$(this).attr("fill","#ffffff");
$(this).attr("font-family","cursive");
})
If you need to globally change the background of all charts on the page, you can use:
$.each($("rect"),function(index, value) {
console.log(this);
if($(this).attr("fill") == "#ffffff")
$(this).attr("fill","#000000");
})
This works by finding any white rectangle and changing it's fill attribute to black.
You may need to tweak these to make sure they only impact your chart and not other elements of the page.