How to set the size of the arc in ChartJS? - javascript

I can’t set the arc size for the chart. How to set the size of the arc? Also, I can’t make the animation work, although I took an example from the official documentation :/
Here is my code:
var ctx = document.getElementById('myChart-<%= ChartId %>').getContext('2d');
var myChart = new Chart(ctx, {
type: 'doughnut',
data: {
datasets: [{
data: [
11,69,20
],
backgroundColor: [
"#ffb74d",
"#4db6ac",
"#bf360c"
]
}]
},
options: {
tooltips: {
enabled: false
},
plugins: {
labels: {
render: 'percentage',
precision: 2,
showZero: true,
fontSize: 30,
fontColor: ['#2c405a', '#2c405a', 'white'],
fontFamily: "PTSansBold",
}
},
animation: {
duration:5000
}
}
});

According to Config Options, cutoutPercentage defines the percentage of the chart that is cut out of the middle. To also make animation work, place the canvas inside a div and add responsive: true to your options.
options: {
responsive: true,
cutoutPercentage: 30,
...
}
The animations works fine with what you defined in your options.
var myChart = new Chart(document.getElementById('myChart'), {
type: 'doughnut',
data: {
datasets: [{
data: [
11,69,20
],
backgroundColor: [
"#ffb74d",
"#4db6ac",
"#bf360c"
]
}]
},
options: {
responsive:true,
cutoutPercentage: 60,
tooltips: {
enabled: false
},
plugins: {
labels: {
render: 'percentage',
precision: 2,
showZero: true,
fontSize: 30,
fontColor: ['#2c405a', '#2c405a', 'white'],
fontFamily: "PTSansBold",
}
},
animation: {
duration: 5000
}
}
});
div {
width: 300px;
height: 300px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<div>
<canvas id="myChart"></canvas>
</div>

The doughnut/pie chart allows a number of properties to be specified for each dataset. These are used to set display properties for a specific dataset.
For example, if you want to change the width of the border there is an option of cutoutPercentage.
options: {
cutoutPercentage: 80,
...
}
Similarly, you can find other options from the official documentation.
https://www.chartjs.org/docs/latest/charts/doughnut.html
var ctx = document.getElementById('chart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'doughnut',
data: {
datasets: [{
data: [
11,69,20
],
backgroundColor: [
"#ffb74d",
"#4db6ac",
"#bf360c"
]
}]
},
options: {
cutoutPercentage: 80,
animation: {
duration:5000
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="chart"></canvas>
I hope this helps. Please let me know if you have any doubt.

if anyone looking for fix as per chartJS 3 and year-2022
they have changes some configurations and this will work as follow
options: {
cutout: 80,
...
}

Related

Chartjs v3 - Add a glow effect on hover to the arcs of the doughnut

I need to add a glow effect on hover to the doughnut chart I created. An example of the same can be found here - https://nagix.github.io/chartjs-plugin-style/samples/doughnut.html
The above link plugin works only with chart.js V2, but not with chart.js v3.
Does anyone know how can I achieve this?
I have created a doughnut chart using the following code snippet:
const myChart = new Chart(ctx, {
type: 'doughnut',
data: {
datasets: [
{
label: 'My First Dataset',
data: chartData,
borderWidth: 0,
backgroundColor: [
'#2BB3FF',
'#59DDAA',
'#FDC23C',
'#FF622D',
'#AB6CFE',
'#C4C7CF',
'#F67CF2',
],
},
],
},
options: {
hoverBorderWidth: 2.84,
spacing: 20,
hoverBorderColor: [
'#2BB3FF',
'#59DDAA',
'#FDC23C',
'#FF622D',
'#AB6CFE',
'#C4C7CF',
'#F67CF2',
],
elements: {
arc: {
angle: 360,
borderWidth: 18,
},
},
layout: {
padding: {
left: 15,
right: 15,
top: 10,
bottom: 15,
},
},
responsive: true,
cutout: '90%',
plugins: {
legend: {
display: false,
},
tooltip: {
enabled: false,
},
},
},
});

How to change font size and color + move datalabels in chart.js with chartjs-plugin-datalabels?

I want to add datalabels to the top of each bar and color them in black and make it in bigger font. Like this:
my chart with necessary labels
But all that I tried don't change the chart.
I add chartjs and charts-plugin-datalabels:
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.8.0/chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-datalabels/2.0.0/chartjs-plugin-datalabels.js"></script>
Chart creating function:
function bars_chart(data, period) {
Chart.register(ChartDataLabels)
document.querySelector('#chartContainer').innerHTML = '<canvas id="bar-chart-horizontal"></canvas>'
var chartConfig = {
type: 'bar',
data: {
labels: period,
datasets: data
},
options: {
responsive: true,
plugins: {
dataLabels: {
font: {
color: "#000000",
size: 25
},
color: "#000000"
},
legend: {
position: 'top',
},
title: {
display: true,
text: 'Chart.js Bar Chart'
},
}
},
};
new Chart(document.getElementById("bar-chart-horizontal"), chartConfig);
}
It looks like there is a simple solution but I can't find it)
Your namespace is wrong, you putted a capital L in there while it needs to be fully lower case. After that you can set anchor and align to 'end' to get the value on top of the bars:
Chart.register(ChartDataLabels)
const options = {
type: 'bar',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: 'pink'
}]
},
options: {
plugins: {
datalabels: {
color: 'black',
font: {
size: 40
},
anchor: 'end',
align: 'end'
}
}
}
}
const 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.8.0/chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-datalabels/2.0.0/chartjs-plugin-datalabels.js"></script>
</body>

getting chartsjs to show key of data label instead of value

I am having trouble with my chartsjs labels.
my graph generates fine, I am trying to set the chart so that the data labels are for the text part of the data and not the numbers part. my code shows the data labels as 4, 6 and 2 where as i need them to show the text: me, you and them.
<script>
var ctx = document.getElementById('myChart4').getContext('2d');
var myChart4 = new Chart(ctx, {
plugins: [ChartDataLabels],
type: 'doughnut',
data: {
labels: ['me','you','them'
],
datasets: [{
label: false,
data: [4,6,2
],
}]
},
options: {
responsive: false,
plugins: {
datalabels: {
color: 'black',
anchor: 'end',
align: 'end',
offset: 15
},
legend: {
display: false
},
title: {
display: true,
text:'Reason'
}
},
responsive: false,
onClick: (evt, activeEls) => {
show();
},
}
});
You can use the formatter function for this:
Chart.register(ChartDataLabels)
const options = {
type: 'bar',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: 'orange'
}]
},
options: {
plugins: {
datalabels: {
color: 'black',
anchor: 'end',
align: 'end',
offset: 15,
formatter: (val, ctx) => (ctx.chart.data.labels[ctx.dataIndex])
},
}
}
}
const 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.6.0/chart.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-datalabels/2.0.0/chartjs-plugin-datalabels.js"></script>
</body>

How to display grid lines (without showing label) between each ticks?

I'm using Chart.js 2 (React-chart-js 2) to display a line chart.
Does anyone have any reference to keeping the vertical gridline between each displayed label?
It seems like the vertical gridline only showing on each displayed label.
You can make use of the scriptable options for this, see example that hides every second label, you can adjust it to hide a bigger step if you want.
Example:
var options = {
type: 'line',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
borderWidth: 1
},
{
label: '# of Points',
data: [7, 11, 5, 8, 3, 7],
borderWidth: 1
}
]
},
options: {
scales: {
x: {
ticks: {
callback: function(val, index) {
return index % 2 === 0 ? this.getLabelForValue(val) : '';
}
}
}
}
}
}
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.0.0/chart.js"></script>
</body>
You can try using following configuration
var config = {
type: 'line',
showDatapoints: true,
legend: { position: 'top' },
data: data,
options: {
responsive: true,
hoverMode: 'index',
stacked: false,
title: {
display: true,
text: 'Chart Title'
},
scales: {
yAxes: [{
type: 'linear', // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance
display: true,
position: 'left',
id: 'y-axis-1',
},
{
type: 'linear', // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance
display: true,
position: 'right',
id: 'y-axis-2',
// grid line settings
gridLines: {
drawOnChartArea: true, // only want the grid lines for one axis to show up
},
}],
}
}
};

How to align Chart JS "legend" on right-center

I am using Chart JS version 2.x. I have prepared a bar chart with chart JS. But I like to align the legend of the chart in right center. Below I am sharing the image.
And the legend position I want.
I have tried it from documentation. In my code
options: {
legend: {
position: 'right'
}
}
Update 1: I am using chart js module in Angular5
Update 2: what I have tried that is https://jsfiddle.net/v4ur38ao/1/
Updated
options: {
plugins: {
legend: {
position: "right",
align: "middle"
}
}
}
use latest version of chart.js : https://www.chartjs.org/dist/master/Chart.min.js for more reference check this documentation and add align:'middle' in your legend it will work's
legend: {
position: "right",
align: "middle"
},
var ctx = $('#myChart');
ctx.height(100);
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ["APP1", "APP2", "APP3", "APP4", "APP5"],
datasets: [{
data: [25, 61, 47, 45, 30],
label: "Response > 5",
borderColor: "#5151A1",
backgroundColor: "#5151A1"
}, {
data: [22, 38, 53, 17, 55],
label: "Response <= 5",
borderColor: "#408040",
backgroundColor: "#408040"
}]
},
maintainAspectRatio: false,
options: {
responsive: true,
legend: {
position: "right",
align: "middle"
},
scales: {
yAxes: [{
ticks: {
min: 0,
//max: 100,
callback: function(value) {
return value + "%"
}
},
scaleLabel: {
display: true
//labelString: "Percentage"
}
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
<canvas id="myChart" height="450" width="600"></canvas>
Check your updated fiddle here
If npm install chart.js not working then refer this answer for more details check the chart.js documentation.

Categories