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
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,
},
},
},
});
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>
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>
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
},
}],
}
}
};
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.