how can i customize labels in radar chart?
i'm not refer to legend's labels, but the voice at the vertex of the radar chart
in particular font and color
i search a lot but i found soluton for older version, and only for color property
I just tried to use pointLabels property but don't work.
Could someone help me?
IMAGE
This can be achieved through the following options:
scales: {
r: {
pointLabels: {
color: 'green',
font: {
size: 20,
style: 'italic'
}
}
}
}
I must admit that I didn't find the solution in the Chart.js documentation either. Therefore, I logged the entire chart to the console (console.log(chart)) and searched for "scales" to finally find the pointLabels default values.
Please take a look at below runnable sample and see how it works:
new Chart('radar-chart', {
type: 'radar',
data: {
labels: ['Eating', 'Drinking', 'Sleeping', 'Designing', 'Coding', 'Cycling', 'Running'],
datasets: [{
label: 'My First Dataset',
data: [65, 59, 90, 81, 56, 55, 40],
fill: true,
backgroundColor: 'rgba(255, 99, 132, 0.2)',
borderColor: 'rgb(255, 99, 132)',
pointBackgroundColor: 'rgb(255, 99, 132)',
pointBorderColor: '#fff',
pointHoverBackgroundColor: '#fff',
pointHoverBorderColor: 'rgb(255, 99, 132)'
}],
},
options: {
plugins: {
legend: {
display: false
}
},
scales: {
r: {
pointLabels: {
color: 'green',
font: {
size: 20,
style: 'italic'
}
}
}
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.2.0/chart.min.js"></script>
<canvas id="radar-chart"></canvas>
Related
As the title suggests, I would like to create a pie chart like an attachment using chart.js in Node-RED.
It's a pie chart showing the activity record of the day, but I'm worried because I can't set the two-axis label.
You can use chartjs-plugin-datalabels and define a dataset with weight: 0 for displaying the numbers.
{
data: [...Array(24)].map(v => 1),
weight: 0,
rotation: -7.5,
borderWidth: 20,
datalabels: {
formatter: (v, ctx) => ctx.dataIndex
}
}
For improving the positioning of the numbers, please consult the chartjs-plugin-datalabels documentation here.
Please take a look at the runnable code below and see how it works.
Chart.register(ChartDataLabels);
new Chart('myChart', {
type: 'pie',
data: {
labels: ['red', 'blue', 'green', 'gray'],
datasets: [{
data: [...Array(24)].map(v => 1),
weight: 0,
rotation: -7.5,
borderWidth: 20,
datalabels: {
formatter: (v, ctx) => ctx.dataIndex
}
},
{
label: 'My Dataset',
data: [48, 56, 33, 44],
backgroundColor: ['rgba(255, 0, 0, 0.2)', 'rgba(0, 0, 255, 0.2)', 'rgba(0, 255, 0, 0.2)', 'rgba(124, 124, 124, 0.2)'],
datalabels: {
textAlign: 'center',
formatter: (v, ctx) => {
const dataset = ctx.chart.data.datasets[1];
return ctx.chart.data.labels[ctx.dataIndex] + ': ' + dataset.data[ctx.dataIndex];
}
}
}
]
},
options: {
responsive: false,
plugins: {
legend: {
display: false
}
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.8.0/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels#2"></script>
<canvas id="myChart" height="300"></canvas>
I want to display text on slices itself rather than displaying it on hover as displayed below
While creating a doughnut chart you'll have to add required data values and labels in code as below,
{
type: 'doughnut',
data: {
datasets: [
{
data: [10, 20, 15, 5, 50],
backgroundColor: [ 'rgb(255, 99, 132)', 'rgb(255, 159, 64)', 'rgb(255, 205, 86)', 'rgb(75, 192, 192)', 'rgb(54, 162, 235)', ],
},
],
labels: ['Red', 'Orange', 'Yellow', 'Green', 'Blue'],
},
options: {
plugins: {
datalabels: {
formatter: (value) => {
return value + '%';
}
}
}
}
}
For more info and documentation check this out : https://quickchart.io/documentation/chart-js/custom-pie-doughnut-chart-labels/
chartjs-plugin-datalabels supports displaying of inforamtion related to the value, data, context of the graph content. Need to display image along with the text label on each graph based on the values . Refer attached snapshot
Tried custom option for toopltip but basically need to try rendering of html in the plugin data label so as image can also be added
plugins: {
datalabels: {
anchor: 'end',
align: 'start',
font: {
size: 20,
}
}
}
Display image on the bar
Expected Result :
This can be achieved by combining chartjs-plugin-datalabels with chartjs-plugin-labels as follows:
new Chart(document.getElementById('myChart'), {
type: 'bar',
data: {
labels: ['2009', '2010', '2011', '2012'],
datasets: [{
label: 'My First Dataset',
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: {
datalabels: {
anchor: 'end',
align : 'start'
},
labels: {
render: 'image',
textMargin: -60,
images: [
null,
null,
{
src: 'https://i.stack.imgur.com/9EMtU.png',
width: 20,
height: 20
},
null
]
}
},
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
canvas {
max-width: 300px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels"></script>
<script src="https://cdn.jsdelivr.net/gh/emn178/chartjs-plugin-labels/src/chartjs-plugin-labels.js"></script>
<canvas id="myChart" width="10" height="5"></canvas>
As soon as I give the chartJS div flexible values such as width=100%, the graph is not animated anymore.
I tried to use things such as width=45vh but this doesn't fit my need as the chart should always fill 100% of the width of the div above it.
I also tried to add the flexible width to the div id="1" (outer div). The chart is then animating but the width is totally screwed.
In Codepen it's working with exactly the same code:
https://codepen.io/anon/pen/ebjvMm
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ["Standard", "Premium"],
datasets: [{
label: 'Noahs Box',
data: [139, 189],
backgroundColor: [
'rgba(30, 56, 79, 1)',
'rgba(30, 56, 79, 1)',
],
borderColor: [
'rgba(30, 56, 79, 1)',
'rgba(30, 56, 79, 1)',
],
borderWidth: 1
},
{
label: 'Amazon',
data: [192.30, 440.55],
backgroundColor: [
'rgba(255, 153, 0, 1)',
'rgba(255, 153, 0, 1)'
],
borderColor: [
'rgba(255, 153, 0, 1)',
'rgba(255, 153, 0, 1)'
],
borderWidth: 1
}],
},
options: {
responsive: true,
maintainAspectRatio: false,
legend: {
display: true
},
animation: {
duration: 7500,
},
title: {
display: true,
text: 'Comparison: Noahs Box vs. Amazon'
},
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}]
}
}
});
<div style="height:450px">
<div style="position: relative;
margin: auto;
height: 100%;
width: 100%;">
<canvas id="myChart"></canvas></div></div>
This is the page where I have the problem: https://noahsbox.com/pages/price-comparison
As you can see I I have two graphs. The second one is working as it has a fix width.
The chart should be responsive and always take 100% of the width of the 'div id="1" class="grid__item large--one-half medium-down--one-whole right-image statistic-tile' (right side of the tile/section).
AND it should animate when loading the page and not just show up without any animation.
Helpful links:
https://github.com/chartjs/Chart.js/issues/2958
https://www.chartjs.org/docs/latest/general/responsive.html#configuration-options
The chart has been working fine, but suddenly it isn't anymore.
Here's a demonstration of the problem.
As you can see, the tooltips are transparent and flickering, and they don't move to the next point I'm hovering over. Also, the legend doesn't turn the lines on/off when I click on their labels.
Here are my options:
export const LineChartLevel3Options = {
lineChartLabels: ["Tid1", "Tid2", "Tid3", "Tid4"],
lineChartOptions: {
responsive: false,
title: {
display: true,
text: 'Graf over vitale værdier',
fontColor: 'black',
fontSize: 20,
},
legend: {
labels: {
fontColor: '#CCC'
}
},
scales: {
yAxes: [{
ticks: {
fontColor: '#CCC'
},
gridLines: {
color: 'rgba(0, 0, 0, 1)'
}
}],
xAxes: [{
ticks: {
fontColor: '#CCC'
},
gridLines: {
color: 'rgba(0, 0, 0, 1)'
}
}],
}
},
lineChartColors: [
{ // grey
backgroundColor: 'rgba(255,0,0,0.3)',
borderColor: 'rgba(148,159,177,1)',
pointBackgroundColor: 'rgba(148,159,177,1)',
pointBorderColor: '#fff',
pointHoverBackgroundColor: '#fff',
pointHoverBorderColor: 'rgba(148,159,177,0.8)'
},
{ // dark grey
backgroundColor: 'rgba(77,83,96,0.2)',
borderColor: 'rgba(77,83,96,1)',
pointBackgroundColor: 'rgba(77,83,96,1)',
pointBorderColor: '#fff',
pointHoverBackgroundColor: '#fff',
pointHoverBorderColor: 'rgba(77,83,96,1)'
},
{ // grey
backgroundColor: 'rgba(148,159,177,0.2)',
borderColor: 'rgba(148,159,177,1)',
pointBackgroundColor: 'rgba(148,159,177,1)',
pointBorderColor: '#fff',
pointHoverBackgroundColor: '#fff',
pointHoverBorderColor: 'rgba(148,159,177,0.8)'
}
],
lineChartLegend: true,
lineChartType: 'line',
};
And the HTML:
<canvas baseChart width="650" height="250" [datasets]="getJoinedChartData(patientService.patientLevel3)" [labels]="lineChart3.lineChartLabels" [options]="lineChart3.lineChartOptions"
[colors]="lineChart3.lineChartColors" [legend]="lineChart3.lineChartLegend" [chartType]="lineChart3.lineChartType">
</canvas>
EDIT: It seems like it has something to do with my datasets and labels. I copied the line chart from valor-software's website and it worked until I used my own labels and datasets with that one. Still haven't figured out what's wrong with them.
It turned out that binding the dataset of the chart to a method is a bad idea. The getJoinedChartData() method took some data of one of the patient objects of my application and returned it as an array that could be used with the chart. Instead I created a variable in my component and assigned the array to that, then bound the dataset to that variable. Everything is fine now.