I am using Doughnut chart of chart.js in a react js application. I would need the same look and feel for the legend than illustrated by:.
I have gone through the Chart.js documentation but I am helpless!
You have to add this at options, see next:
options: {
legend: {
display: true,
position: 'bottom',
labels: {
boxWidth: 10
}
}
}
https://www.chartjs.org/docs/latest/configuration/legend.html#legend-label-configuration here you can see all options what you can add to labels, see padding also, default is 10 you need only add boxWidth.
Related
I have tried to make the labels for both datasets in the chart.js found here.
example of chart.js to appear when hovering over the different days in the chart
I have tried to add this...
options: {
tooltips: {
mode: 'index',
intersect: false
},
hover: {
mode: 'index',
intersect: false
}
}
Bu that does not help, in a perfect world I would like to display it like 28 (30) when hovering over SUNDAY. Can somebody help out please?
Since you dont use the build in tooltip to display those values setting tooltip modes dont matter.
To get what you want just put the values in the same span the way you like so you would get this:
<div class="tick">
SUN
<span class="value value--this">28 (30)</span>
</div>
https://codepen.io/leelenaleee/pen/OJjOamw
I use ng2-charts and chartjs for angular9.
I draw a doughnut chart, and it will be shown line this:
But, I expected it will be like this:
The width of the line will smaller
How can I do that?
Thanks.
I think you can add the custom options to decrease the width of doughnut chart:
and all of the options is here https://www.chartjs.org/docs/latest/charts/doughnut.html
public DonutChartOptions: ChartOptions = {
options: {
cutoutPercentage: 80
}
};
Is there a away to add an extra label at the bottom if a pie graph like this:
Yes, you can do it as follows:
options: {
legend: {
display: true,
title: {
display: true,
text: 'Custom Chart Title',
position: 'bottom'
}
}
You can also find some more details on the official documentation, here:
Chart JS Legend Official Documentation
I'm using the latest chartJS and attempting to create a pie or doughnut chart. This seems like it should be relatively simple to me, but whenever the chart is created the top is cutoff like the image below. I've tried many things to fix this, and searched around with no luck. Has anyone run into this before? Is ChartJS no longer supported in most browsers?
I've seen other pie charts in JSfiddle that people have working, copying the exact same code into new files results in the same chopped off top graphs.
Other graphs work such as line/bar.
Edit: made some progress by changing the chart to load using windows.load. It will now display correctly when the page is resized at all, but will display the same way below initially.
Here is the HTML and JS code.
<div class="container-graph-window">
<canvas id="pieChart" width="435" height="435"></canvas>
<script>
pieChart();
</script>
</div> <!-- End continer-graph-window-->
/////////////////////////////////////////////JS CODE
function pieChart() {
var doughnutData = [
{
value: 300,
color:"#F7464A",
highlight: "#FF5A5E",
label: "Red"
},
{
value: 50,
color: "#46BFBD",
highlight: "#5AD3D1",
label: "Green"
},
{
value: 100,
color: "#FDB45C",
highlight: "#FFC870",
label: "Yellow"
},
{
value: 40,
color: "#949FB1",
highlight: "#A8B3C5",
label: "Grey"
},
{
value: 120,
color: "#4D5360",
highlight: "#616774",
label: "Dark Grey"
}
];
var ctx = document.getElementById("pieChart").getContext("2d");
window.pieChart = new Chart(ctx).Doughnut(doughnutData, {responsive : true});
} //end pie chart
Note: I must pass data into the JS function and use it to create the graph.
SOLVED: Update all of your Chart.js files if you run into this issue to the latest version.
I have a question about Google Chart API.
I'm working on Bar Chart to show a stacked bar graph.
Here's a problem that legend texts are duplicated as shown in the image below.
I set an option like this.
var options = {
isStacked: true,
legend: {position:'bottom'},
backgroundColor: {fill:'#f5f5f5'},
width: 350,
colors:['#32bb32','#06abe8','#ffcb05','#f15a22']
};
Do you have any idea?
Messing about with google charts can get a bit, well, messy. A terrible solution that happens to get the job done is to insert an excessive number of white spaces after your label, then increase the font size under text style like so:
legend: { position: 'bottom', alignment: 'center', textStyle: { fontSize: 15,}},
This is a quick and dirty solution to annoying overlapping in the legend.
With google charts, nearly all problems can be fixed using custom templates, but this solution will hold if you just want to wash your hands of the problem and move on.