I'm trying to create curved labels for a Polar Area graph using Chart.js, like this:
I have found this issue where they discuss it, but it doesn't seem to have an answer yet.
So far, I'm only being able to display the labels at the side of the graph, but not in a curved way:
Chart.register( ChartDataLabels );
const config = {
"type": "polarArea",
"data": {
"labels": [
"aaaaaaaa",
"bbbbbbbb",
"cccccccc",
"dddddddd",
"eeeeeeee",
"ffffffff",
"gggggggg",
"hhhhhhhh"
],
"datasets": [
{
"data": [
80,
40,
54,
62,
71,
45,
50,
85
],
"backgroundColor": [
"#674ea7",
"#db4b4b",
"#2f2f6e",
"#3c1414",
"#fc3631",
"#556b2f",
"#820000",
"#76a5af"
]
}
]
},
"options": {
"responsive": true,
"scales": {
"r": {
"angleLines": {
"display": true
},
"ticks": {
"display": false
},
"pointLabels": {
"display": true,
"centerPointLabels": true,
"font": {
"size": 14
}
}
}
},
"scale": {
"min": 0,
"max": 100,
"ticks": {
"display": false,
"beginAtZero": true
}
},
"plugins": {
"legend": {
"position": 'top',
},
"datalabels": {
"formatter": (value, context) => value + '%',
"color": "#ffffff"
}
}
}
}
const ctx = document.getElementById( 'graph' ).getContext( '2d' );
const chart = new Chart( ctx, config );
Does anyone know how to do it?
You can use chartjs-plugin-labels to achieve this
You can see a working example here
The key is to set arc to true and position to outside in the plugin options. e.g.
{
labels: {
render: 'label',
arc: true,
fontColor: '#000',
position: 'outside'
}
}
Fraser suggested to use chartjs-plugin-labels. The problem is, that chartjs-plugin-labels is no longer maintained and doesn't support Chart.js v3.
Therefore, you should use chart.js-plugin-labels-dv. This plugin was forked from chartjs-plugin-labels and adapted for Chart.js v3.
plugins: {
labels: {
arc: true,
fontColor: '#000',
position: 'outside',
fontSize: 14,
render: (args) => args.dataset.helper ? args.label : '',
fontColor: (args) => legendLabelColors[args.index]
}
}
Note that labels.render makes sure, that the data labels are drawn for the outer (helper) dataset only.
Please take a look at your amended and runnable code and see how it works.
Chart.register( ChartDataLabels );
const legendLabelColors = ["rgb(255, 99, 132)", "rgb(255, 159, 64)", "rgb(255, 205, 86)", "rgb(75, 192, 192)", "rgb(54, 162, 235)", "rgb(153, 102, 255)", "rgb(201, 203, 207)", "rgb(54, 162, 88)"];
const config = {
type: "polarArea",
data: {
labels: ["aaaaaaaa", "bbbbbbbb", "cccccccc", "dddddddd", "eeeeeeee", "ffffffff", "gggggggg", "hhhhhhhh"],
datasets: [
{
data: [80, 40, 54, 62, 71, 45, 50, 85],
backgroundColor: ["rgba(255, 99, 132, 0.5)", "rgba(255, 159, 64, 0.5)", "rgba(255, 205, 86, 0.5)", "rgba(75, 192, 192, 0.5)", "rgba(54, 162, 235, 0.5)", "rgba(153, 102, 255, 0.5)", "rgba(201, 203, 207, 0.5)", "rgba(54, 162, 88, 0.5)"],
datalabels: {
formatter: (value, context) => value + '%',
color: "#ffffff"
},
},
{
helper: true,
data: [100, 100, 100, 100, 100, 100, 100, 100],
backgroundColor: ["rgba(255, 99, 132, 0.2)", "rgba(255, 159, 64, 0.2)", "rgba(255, 205, 86, 0.2)", "rgba(75, 192, 192, 0.2)", "rgba(54, 162, 235, 0.2)", "rgba(153, 102, 255, 0.2)", "rgba(201, 203, 207, 0.2)", "rgba(54, 162, 88, 0.2)"],
datalabels: {
display: false
}
}
]
},
options: {
layout: {
padding: 20
},
scales: {
r: {
angleLines: {
display: true
},
ticks: {
display: false
},
pointLabels: {
display: false
}
}
},
scale: {
min: 0,
max: 100
},
plugins: {
labels: {
arc: true,
fontColor: '#000',
position: 'outside',
fontSize: 14,
render: (args) => args.dataset.helper ? args.label : '',
fontColor: (args) => legendLabelColors[args.index]
}
}
}
}
const chart = new Chart( 'graph', config );
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels#2"></script>
<script src="https://unpkg.com/chart.js-plugin-labels-dv/dist/chartjs-plugin-labels.min.js"></script>
<canvas id="graph"></canvas>
Related
I want to make image float above bar chart but when I acheived it it's not always show,It display only when mouseover on the bar and error 404 keeps appear on log
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/emn178/chartjs-plugin-labels/src/chartjs-plugin-labels.js"></script>
<canvas id="myChart" width="10" height="6"></canvas>
<script>
new Chart(document.getElementById('myChart'), {
type: 'bar',
data: {
labels: ['A', 'B', 'C', 'D'],
datasets: [{
label: 'My Dataset',
// data: [25, 59, 80, 76],
data: [25, 59, 80, 76],
fill: false,
backgroundColor: ['rgba(255, 99, 132, 0.2)', 'rgba(255, 159, 64, 0.2)', 'rgba(255, 205, 86, 0.2)', 'rgba(75, 192, 192, 0.2)'],
borderColor: ['rgb(255, 99, 132)', 'rgb(255, 159, 64)', 'rgb(255, 205, 86)', 'rgb(75, 192, 192)', 'rgb(54, 162, 235)'],
borderWidth: 1
}]
},
options: {
plugins: {
labels: {
render: 'image',
textMargin: 10,
images: [
{
src: 'https://i.stack.imgur.com/9EMtU.png',
width: 20,
height: 20
},
null,
{
src: 'https://i.stack.imgur.com/9EMtU.png',
width: 20,
height: 20
},
null
]
}
},
// layout: {
// padding: {
// top: 30
// }
// },
// legend: {
// display: false
// },
// scales: {
// yAxes: [{
// ticks: {
// beginAtZero: true
// }
// }]
// }
}
});
how can I make image always show on bar without mouseover and make error disappeared
How make border radius for chart area chart.js
I need to make a border radius of 16px for the chart area
Maybe there is a plugin?
I am using chart.js V3.7.
I am using chart.js V3.7
How make border radius for chart area chart.js
I need to make a border radius of 16px for the chart area
Maybe there is a plugin?
I am using chart.js V3.7.
const ctx = document.getElementById('myChart').getContext('2d');
var gradient = ctx.createLinearGradient(0, 0, 0, 400)
gradient.addColorStop(0, 'rgba(244, 192, 56, 0.3)')
gradient.addColorStop(0.35, 'rgba(244, 192, 56, 0.3)')
gradient.addColorStop(1, 'rgba(244, 192, 56, 0)');
const plugin = {
id: 'background',
beforeDraw: (chart, args, opts) => {
if (!opts.color) {
return;
}
const {
ctx,
chartArea
} = chart;
ctx.fillStyle = opts.color;
ctx.fillRect(chartArea.left, chartArea.top, chartArea.width, chartArea.height)
}
};
Chart.register(plugin);
var config = {
type: 'line',
data: {
labels: [['05.08', '2021'], ['06.08', '2021'], ['07.08', '2021'], ['08.08', '2021'], ['09.08', '2021'], ['10.08', '2021'], ['11.08', '2021'], ['12.08', '2021'], ['13.08', '2021'], ['14.08', '2021'], ['15.08', '2021']],
datasets: [{
data: [130, 260, 240, 270, 249, 310, 295, 330, 247, 280, 265, 265,],
fill: true,
backgroundColor: gradient,
borderColor: [
'#F4C038',
],
borderWidth: 4,
pointRadius: 6,
pointBackgroundColor: '#272E3B',
pointHoverBorderColor: '#fff',
pointBorderWidth: 4,
pointHoverBorderWidth: 4,
}]
},
options: {
responsive: true,
tension: 0.25,
plugins: {
background: {
color: '#272E3B'
},
legend: {
display: false,
labels: {
font: {
size: 14,
family: "Rubik"
}
}
}
},
scales: {
y: {
grid: {
color: '#3D4554',
borderColor: '#3D4554',
tickColor: 'transparent',
},
ticks: {
padding: 38,
callback: function(value) {
return '$' + value;
},
color: "rgba(255, 255, 255, 0.5)",
font: {
size: 16,
family: "Rubik",
weight: 300
},
}
},
x: {
grid: {
color: '#3D4554',
borderColor: '#3D4554',
tickColor: 'transparent',
},
ticks: {
padding: 16,
color: "rgba(255, 255, 255, 0.5)",
font: {
size: 14,
family: "Rubik",
weight: 300
},
}
}
},
}
};
new Chart(ctx, config);
There is no plugin but you can write your own like so:
const plugin = {
id: 'border',
beforeDraw(chart, args, options) {
const {
ctx,
chartArea: {
left,
top,
width,
height
}
} = chart;
ctx.save();
ctx.strokeStyle = options.color;
ctx.lineWidth = options.width;
ctx.setLineDash(options.dash || []);
ctx.lineDashOffset = options.offset;
ctx.strokeRect(left, top, width, height);
ctx.restore();
}
};
const options = {
type: 'line',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
borderColor: 'orange'
},
{
label: '# of Points',
data: [7, 11, 5, 8, 3, 7],
borderColor: 'pink'
}
]
},
options: {
plugins: {
border: {
color: 'red',
width: 16
}
}
},
plugins: [plugin]
}
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.7.0/chart.js"></script>
</body>
To add the border to the chart area in chart.js, we need to use the chartAreaBorder plugin
const chartAreaBorder = {
id: 'chartAreaBorder',
beforeDraw(chart, args, options) {
const {ctx, chartArea: {left, top, width, height}} = chart;
ctx.save();
ctx.strokeStyle = options.borderColor;
ctx.lineWidth = options.borderWidth;
ctx.setLineDash(options.borderDash || []);
ctx.lineDashOffset = options.borderDashOffset;
ctx.strokeRect(left, top, width, height);
ctx.restore();
}
};
Paste the above piece of code before creating your chart and
Then use the following code for creating your chart and border around it,
const ctx = document.getElementById('dynamic-chart').getContext('2d');
const myChart = new Chart(ctx, {
type: 'Your_Chart_Type_Here',
data: {
labels:Your_Data_Here,
datasets: [{
label: 'Your Data Here',
data: 'Your_Data_Here,
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
},
options: {
plugins:{
chartAreaBorder:{
borderColor:'red',
borderWidth:2,
borderDash:[5,5],
borderDashOffset:2,
}
}
}
},
plugins:[chartAreaBorder]
});
Result is as follow
This Code will give the border to chartArea. I hope this sorted out your problem.
I have the following Bar Chart here
import React, { Component, useState, useEffect } from "react";
import { Bar } from "react-chartjs-2";
import { months } from "../../helpers/utils";
import Axios from "axios"; //axios library to make requests to api
// Chart.defaults.global.defaultFontFamily = "Roboto, sans-serif";
function BarChart() {
//retrieving data from api
const [intentsList, setintentsList] = useState([]);
useEffect(() => {
Axios.get("http://localhost:3001/countintents").then((response) => {
setintentsList(response.data);
console.log(response.data);
});
}, []);
// BarChart
//const labels = months({ count: 1 });
const data = {
labels: ["Industry_solutions"],
datasets: [
{
axis: "y",
label: "My First Dataset",
data: intentsList.map((val, key) => [val.industry_solutions]),
fill: false,
backgroundColor: [
"rgba(255, 99, 132, 0.2)",
"rgba(255, 159, 64, 0.2)",
"rgba(255, 205, 86, 0.2)",
"rgba(75, 192, 192, 0.2)",
"rgba(54, 162, 235, 0.2)",
"rgba(153, 102, 255, 0.2)",
"rgba(201, 203, 207, 0.2)",
],
borderColor: [
"rgb(255, 99, 132)",
"rgb(255, 159, 64)",
"rgb(255, 205, 86)",
"rgb(75, 192, 192)",
"rgb(54, 162, 235)",
"rgb(153, 102, 255)",
"rgb(201, 203, 207)",
],
borderWidth: 1,
},
],
};
const options = {
indexAxis: "y",
// Elements options apply to all of the options unless overridden in a dataset
// In this case, we are setting the border of each horizontal bar to be 2px wide
elements: {
bar: {
borderWidth: 2,
},
},
responsive: true,
plugins: {
legend: {
position: "right",
display: false,
},
title: {
display: true,
text: "Chart.js Horizontal Bar Chart",
},
},
};
return (
<div>
<Bar data={data} options={options} /> {/* Props */}
</div>
);
}
export default BarChart;
Which I would like to populate with data which I have:
[{"products":2,"industry_solutions":3,"about_us":2}]
so the horizontal labels will be products, industry solutions and about_us with their respective counts. This data was obtained from a sql db query to an api endpoint and I merely obtained the data from there.
If I assume that the response of API is
{"products":2,"industry_solutions":3,"about_us":2}
const data = {
labels: Object.keys(intentsList),
datasets: [
{
axis: "y",
label: "My First Dataset",
data: Object.values(intentsList),
fill: false
}
}
Above code will render the bar graph you are expecting from the data
I am using chart.js and it's bar chart. I am displaying some data for the period of 12 months. What I would like to do is to set the width of the bar that is representing current month to a higher value than the others. But, I am not sure how to do this, since I only saw an option of setting the width to every bar in the dataset. This are my options that I currently have:
const options = {
type: "bar",
data: {
labels: counties.map(county => dateStringEU(county.Date.split(" ")[0])).reverse(),
datasets: [
{
backgroundColor: "#006BE8",
borderColor: "rgba(151,187,205,1)",
barPercentage: 0.9,
categoryPercentage: 0.9,
}
]
},
options: {
legend: {
display: false
},
scales: {
yAxes: [
{
ticks: {
fontColor: '#736B8A',
beginAtZero: true,
stepSize: 100
},
gridLines: {
display: false
}
}
],
xAxes: [
{
ticks: {
fontColor: '#736B8A'
},
gridLines: {
display: false
}
}
]
}
}
}
Is it possible to set the width individually for each bar and how can we do it if so?
Despite it's not clearly documented, you can define barPercentage as an array of values.
barPercentage: [0.5, 0.5, 0.5, 0.5, 1, 0.5, 0.5],
Please have a look at the amended code from Chart.js bar documentation.
new Chart(document.getElementById("chart"), {
type: "bar",
data: {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [{
label: "My First Dataset",
data: [65, 59, 80, 81, 56, 55, 40],
barPercentage: [0.5,0.5,0.5,0.5,1,0.5,0.5],
categoryPercentage: 1,
fill: false,
backgroundColor: ["rgba(255, 99, 132, 0.2)", "rgba(255, 159, 64, 0.2)", "rgba(255, 205, 86, 0.2)", "rgba(75, 192, 192, 0.2)", "rgba(54, 162, 235, 0.2)", "rgba(153, 102, 255, 0.2)", "rgba(201, 203, 207, 0.2)"],
borderColor: ["rgb(255, 99, 132)", "rgb(255, 159, 64)", "rgb(255, 205, 86)", "rgb(75, 192, 192)", "rgb(54, 162, 235)", "rgb(153, 102, 255)", "rgb(201, 203, 207)"],
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="chart" height="80"></canvas>
I am setting the following default in Chartjs (v2.9.3) to alter the default look of my bar charts:
Chart.defaults.bar.scales.xAxes[0].categoryPercentage = .95;
This causes the following deprecation warnings:
bar chart: "scales.[x/y]Axes.categoryPercentage" is deprecated. Please use "dataset.categoryPercentage" instead
But I can't get that to work, amongst others I have tried:
Chart.defaults.bar.dataset.categoryPercentage = 1;
Chart.defaults.bar.datasets[0].categoryPercentage = 1;
Chart.defaults.global.bar.dataset.categoryPercentage = 1;
Chart.defaults.global.bar.datasets[0].categoryPercentage = 1;
Is there a good resource to find the right commands to set defaults? Unfortunately, the otherwise excellent documentation is very incomplete in this regard.
The above isn't the only default setting I am struggling with.
For example, the following doesn't do anything (even though Chart.defaults.global.hover.animationDuration = 50; works):
Chart.defaults.global.hover.mode = 'index';
Chart.defaults.global.hover.intersect = true;
The correct syntax for globally changing the bar categoryPercentage is the following:
Chart.defaults.global.datasets.bar.categoryPercentage = 0.95;
And here's a working sample:
Chart.defaults.global.datasets.bar.categoryPercentage = 0.95;
var canvas = document.getElementById('myChart');
var data = {
labels: ["A", "B", "C", "D", "E"],
datasets: [{
label: "Occurrences",
data: [3, 5, 2, 4, 6],
fill: false,
backgroundColor: ["rgba(255, 99, 132, 0.2)", "rgba(255, 159, 64, 0.2)", "rgba(255, 205, 86, 0.2)", "rgba(75, 192, 192, 0.2)", "rgba(54, 162, 235, 0.2)"],
borderColor: ["rgb(255, 99, 132)", "rgb(255, 159, 64)", "rgb(255, 205, 86)", "rgb(75, 192, 192)", "rgb(54, 162, 235)"],
borderWidth: 1
}]
};
var option = {
scales: {
yAxes:[{
ticks: {
beginAtZero: true
}
}]
}
};
var myBarChart = Chart.Bar(canvas, {
data:data,
options:option
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="myChart" width="400" height="200"></canvas>
To find out about other valid options contained in Chart.defaults, simply log it to the console (console.log(Chart.defaults)) and search for the option name.
You don't need to set it globally, I actually recommend you to set it for each chart according to documentation.
var canvas = document.getElementById('myChart');
var data = {
labels: ["A", "B", "C", "D", "E"],
datasets: [{
label: "Occurrences",
data: [3, 5, 2, 4, 6],
fill: false,
backgroundColor: ["rgba(255, 99, 132, 0.2)", "rgba(255, 159, 64, 0.2)", "rgba(255, 205, 86, 0.2)", "rgba(75, 192, 192, 0.2)", "rgba(54, 162, 235, 0.2)"],
borderColor: ["rgb(255, 99, 132)", "rgb(255, 159, 64)", "rgb(255, 205, 86)", "rgb(75, 192, 192)", "rgb(54, 162, 235)"],
borderWidth: 1
}]
};
var option = {
datasets: {
bar: {
categoryPercentage: 0.95
}
},
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
};
var myBarChart = Chart.Bar(canvas, {
data: data,
options: option
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="myChart" width="400" height="200"></canvas>