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
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 would like to use chart.js to draw a bar in a horizontal bar chart that has a border all the way around.
As can be seen on the image I'm successful in applying a border but I can't figure out how to get a border on the left side; which would make it a full square.
Any help would be appreciated.
You can set the borderSkipped option to false, depending on if you do it in the options or on the dataset level it will apply to all bars or only the bars of that specific dataset.
var options = {
type: 'bar',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
borderWidth: 5,
borderColor: 'pink',
borderSkipped: false //Apply setting only to this bar dataset
}]
},
options: {
elements: {
bar: {
borderSkipped: false // Apply setting to all bar datasets
}
}
}
}
var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
<body>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.0/chart.js"></script>
</body>
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 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).
I am working ChartJS component using angular2. I would like to know whether there is any way to render as this image or not.
Basically, The Bar Chart rendered on the grid. When I click on the column bar, for example, June the horizontal line should be displayed with the up arrow at the exact month under the column bar. Do you have any suggestions? Thanks in advance.
You can capture the onclick event of the canvas and check which bar has been clicked with the getElementAtEvent method of chartjs. getElementAtEvent gives you all the relevant information you need (chart-width, x-coordinate of the bar, label etc.) to draw a custom line below the chart.
canvas.onclick = function (evt) {
var activePoints = myBarChart.getElementAtEvent(evt);
if (activePoints[0]) {
//draw your custom line
}
};
The snippet below has two canvas. One for chart.js to draw the actual chart and the second below to draw a line with the text of the clicked label.
var canvas = document.getElementById('myChart');
var data = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [{
label: "My First dataset",
backgroundColor: "rgba(255,99,132,0.2)",
borderColor: "rgba(255,99,132,1)",
borderWidth: 2,
hoverBackgroundColor: "rgba(255,99,132,0.4)",
hoverBorderColor: "rgba(255,99,132,1)",
data: [65, 59, 20, 81, 56, 55, 40],
}]
};
var option = {
scales: {
yAxes: [{
stacked: true,
gridLines: {
display: true,
color: "rgba(255,99,132,0.2)"
}
}],
xAxes: [{
gridLines: {
display: false
}
}]
}
};
var myBarChart = Chart.Bar(canvas, {
data: data,
options: option
});
canvas.onclick = function (evt) {
var activePoints = myBarChart.getElementAtEvent(evt);
if (activePoints[0]) {
var chart = activePoints[0]._chart;
var canvasX = document.getElementById('xAxis2');
// set the width of the second canvas to the chart width
canvasX.width = chart.width;
var canvas2D = canvasX.getContext('2d');
// draw the line
canvas2D.moveTo(0, 20);
canvas2D.lineTo(activePoints[0]._view.x - 10, 20);
canvas2D.lineTo(activePoints[0]._view.x, 0);
canvas2D.lineTo(activePoints[0]._view.x + 10, 20);
canvas2D.lineTo(canvasX.width, 20);
canvas2D.stroke();
// add the label text
canvas2D.font = '12px serif';
canvas2D.fillText('for ' + activePoints[0]._view.label, canvasX.width - 100, 15);
}
};
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.bundle.min.js"></script>
<canvas id="myChart" width="400" height="250"></canvas>
<canvas id="xAxis2" height="20"></canvas>