I am using Chart JS with data label plugin and I want to show data labels next to the bar and pie chart but noticed that some of the data labels are getting cut or going out of canvas. Is their any way to fix this?
var chartData3 = {
labels: ["January", "February", "March", "April", "May", "June"],
datasets: [{
backgroundColor: "#79D1CF",
data: [60, 90, 81, 56, 55, 40],
datalabels: {
align: 'end',
anchor: 'end'
}
}]
};
https://plnkr.co/edit/I906pCN8tdrrOX2hgN0W?p=preview
Thanks,
MSK
You need to set padding to display the labels properly. Also, adjust the canvas width and height to account for padding so that your chart doesn't get too small.
options: {
layout: {
padding: {
left: 50,
right: 50,
top: 50,
bottom: 50
}
}
}
Set max tick in chart option, for example:
this.chartOption.scales.yAxes[0].ticks.max = Math.max(...chartData3.datasets[0].data) * 1.2
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 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>
Working with a Google bar chart, here is what I got:
Here my custom options
var options = {
width: 500, height: 240,
legend : 'none',
vAxis:{title:'Answers',textStyle:{color: '#005500',fontSize: '12', paddingRight: '100',marginRight: '100'}},
hAxis: { title: 'Percentage', textStyle: { color: '#005500', fontSize: '12', paddingRight: '100', marginRight: '100'} }
};
Can't I set a width for these <g> / <rect> tags?
I believe the chartArea.left option is what you are looking for. Try something like this, and mess around with chartArea.left and chartArea.width values (should add up to your total width of 500 though) until your y labels are all visible:
var options = {
width: 500, height: 240,
legend : 'none',
vAxis:{title:'Answers',textStyle:{color: '#005500',fontSize: '12', paddingRight: '100',marginRight: '100'}},
hAxis: { title: 'Percentage', textStyle: { color: '#005500', fontSize: '12', paddingRight: '100', marginRight: '100'} },
chartArea: {left:100, width: 400}
};
chartArea width can be set in percentage. chartArea: {width: 50%}. This will leave up to 50% of the total chart width to the left column.