ChartJS Radar Change Label Color - javascript

I'd like to style a radar chart using Chart.js, but I can't seem to figure this out.
I'd like to first of all change the color of every text to white, including the title, the label names, and the labels. I'd also like to remove the box around the axis numbers and change their colors to white too. Here is the code I have atm (I use django for the data)
new Chart(ctx, {
type: 'radar',
data: {
labels: {{ subjects|safe }},
datasets: [{
label: '2022 Noten',
data: {{ grades_avg }},
borderWidth: 1
}, {
label: '2021 Noten',
data: [],
borderWidth: 0.5
}]
},
options: {
scale: {
min: 1,
max: 6,
ticks: {
stepSize: 0.5,
}
},
responsive: true,
maintainAspectRatio: false,
scales: {
r: {
grid: {
color: 'gray'
},
angleLines: {
color: 'gray'
},
}
},
plugins: {
title: {
display: true,
text: 'Noten im Vergleich'
}
}
}
});
I just can't wrap my head around this library and I'd appreciate your help. Thanks!

OK. Below I give you an example with useful links to the documentation.
const ctx = document.getElementById('myChart');
new Chart(ctx, {
type: 'radar',
data: {
labels: ['Label 1', 'Label 2', 'Label 3', 'Label 4'],
datasets: [{
label: 'Data',
data: [3.5, 5, 2.5, 3],
borderWidth: 1
}]
},
options: {
locale: 'en-US',
scale: {
min: 1,
max: 6,
ticks: {
stepSize: 0.5,
}
},
scales: {
r: { // https://www.chartjs.org/docs/latest/axes/radial/
angleLines: {
color: 'gray'
},
grid: {
color: 'gray'
},
pointLabels: { // https://www.chartjs.org/docs/latest/axes/radial/#point-labels
color: 'white'
},
ticks: { // https://www.chartjs.org/docs/latest/axes/radial/#ticks
color: 'white',
backdropColor: 'transparent' // https://www.chartjs.org/docs/latest/axes/_common_ticks.html
}
}
},
plugins: {
title: { // https://www.chartjs.org/docs/latest/configuration/title.html
display: true,
text: 'Title',
color: 'white'
},
legend: {
labels: { // https://www.chartjs.org/docs/latest/configuration/legend.html#legend-label-configuration
color: 'white'
}
}
}
}
});
.chart-container {
position: relative;
height: 90vh;
}
canvas {
background: #282a2d;
}
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<div class="chart-container">
<canvas id="myChart"></canvas>
</div>

Related

how do I refresh new data in ApexCharts?

anyone can help me to solve my case, well I have an ApexCharts for show the data that can be refreshed whenever user want to and the data should be change to the updatest datas.
but I dont have idea how to reload the data ini ApexCharts
this my script
var options = {
series: [{
name: 'Stock Value',
type: 'column',
data: val_data_1
}, {
name: 'Actual Value',
type: 'column',
data: val_data_2
}, {
name: 'difference',
type: 'line',
data: val_data_3
}],
chart: {
height: 350,
type: 'line',
stacked: false
},
dataLabels: {
enabled: false
},
stroke: {
width: [1, 1, 4]
},
title: {
text: 'XYZ - Stock Opname',
align: 'left',
offsetX: 110
},
xaxis: {
categories: categories,
},
yaxis: [
{
axisTicks: {
show: true,
},
axisBorder: {
show: true,
color: '#008FFB'
},
labels: {
style: {
colors: '#008FFB',
}
},
title: {
text: "Stock Value",
style: {
color: '#008FFB',
}
},
tooltip: {
enabled: true
}
},
{
seriesName: 'Income',
opposite: true,
axisTicks: {
show: true,
},
axisBorder: {
show: true,
color: '#00E396'
},
labels: {
style: {
colors: '#00E396',
}
},
title: {
text: "Actual Value",
style: {
color: '#00E396',
}
},
},
{
seriesName: 'Revenue',
opposite: true,
axisTicks: {
show: true,
},
axisBorder: {
show: true,
color: '#FEB019'
},
labels: {
style: {
colors: '#FEB019',
},
},
title: {
text: "Differences",
style: {
color: '#FEB019',
}
}
},
],
tooltip: {
fixed: {
enabled: true,
position: 'topLeft', // topRight, topLeft, bottomRight, bottomLeft
offsetY: 30,
offsetX: 60
},
},
legend: {
horizontalAlign: 'left',
offsetX: 40
}
};
var chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();
i've have to hear for use the chart.UpdateSeries() but in my case I dnt know how to use it
Indeed, you have to use the updateSeries() method. It is documented here: Methods – ApexCharts.js
To help you, I give you an example with updateSeries() using a simple button. When you click on it, random integers are generated in the data array. The series is then updated accordingly.
let options = {
series: [{
name: 'Series',
data: [1, 7, 3]
}],
chart: {
type: 'line',
height: 350
},
dataLabels: {
enabled: false
},
xaxis: {
categories: ['Category 1', 'Category 2', 'Category 3']
}
};
let chart = new ApexCharts(document.querySelector('#chart'), options);
chart.render();
function getRandomNumber() {
return Math.floor(Math.random() * 10);
}
document.querySelector('button').addEventListener('click', () => {
chart.updateSeries([{
data: [getRandomNumber(), getRandomNumber(), getRandomNumber()]
}])
});
button {
padding: 10px;
color: white;
background-color: #0d6efd;
border: none;
border-radius: 5px;
cursor: pointer;
}
button:hover {
color: black;
background-color: #0dcaf0;
}
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<div id="chart"></div>
<button type="button">Update series</button>

How to increase font size in the legend of your chart.js plot?

I am trying to increase labels' font size in the legend of a plot that I have done with chart.js.
Attached there is a screenshot:
I want to increase the font size of "Label 1,2,3".
Below the javascript configuration that I am using right now:
var data = {
labels: x_axis_labels,
datasets: [
{
label: 'Label 1',
data: data_1,
borderColor: 'rgb(46,138,207)',
backgroundColor: 'rgb(46,138,207)',
yAxisID: 'y',
},
{
label: 'Label 2',
data: data_2,
borderColor: 'rgb(214,224,52)',
backgroundColor: 'rgb(214,224,52)',
yAxisID: 'y1',
},
{
data: data_3,
label:'Label 3',
borderColor: 'rgb(244,67,54)',
backgroundColor: 'rgb(244,67,54)',
yAxisID: 'y1',
pointStyle:'dash',
borderDash: [20, 30],
pointBackgroundColor: "transparent",
},
]
};
const config = {
type: 'line',
data: data,
options: {
responsive: true,
interaction: {
mode: 'index',
intersect: false,
},
stacked: false,
plugins: {
title: {
display: true,
}
},
scales: {
x:{
title:{
display: true,
text: 'X axis name',
font: {size:30},
},
ticks: {
font: {
size: 20,
}
}
},
y: {
title:{
display: true,
text: 'First y axis name',
font: {size:30}
},
type: 'linear',
display: true,
position: 'left',
ticks: {
font: {
size: 24,
}
}
},
y1: {
title:{
display: true,
text: 'Second Y axis name',
font: {size:30}
},
type: 'linear',
display: true,
position: 'right',
ticks:{
font:{
size:24,
}
},
// grid line settings
grid: {
drawOnChartArea: false,
},
},
},
},
};
I have tried Font Documnetation and Legend Documentation but I got nothing.
Someone had experience in this?
Thanks in advance
As described in the docs you can set the size in the options.plugins.legend.labels.font.size namespace
options: {
plugins: {
legend: {
labels: {
font: {
size: 20
}
}
}
}
}

chartjs-plugin-datalabels not showing on stacked horizontal bar

I'm trying to make a simple horizontal stacked bar chart and add labels to it. I'm not sure what I'm doing wrong here, any input would be appreciated.
I can make it work by downgrading to a much lower version of chart.js and the datalabel plugin.
Here is a jsfiddle:
https://jsfiddle.net/chrispret/szLgyu2j/24/
And some test code...
const testData = {
set1: '4',
set2: '3',
set3: '1',
set4: '3',
};
const data = {
labels: ["test"],
datasets: [
{
label: 'set1',
data: [testData.set1],
backgroundColor: 'red',
datalabels: {
anchor: 'center',
align: 'center',
}
},
{
label: 'set2',
data: [testData.set2],
backgroundColor: 'blue',
datalabels: {
anchor: 'center',
align: 'center',
}
},
{
label: 'set3',
data: [testData.set3],
backgroundColor: 'green',
datalabels: {
anchor: 'center',
align: 'center',
}
},
{
label: 'set4',
data: [testData.set4],
backgroundColor: 'gray',
datalabels: {
anchor: 'center',
align: 'center',
}
}
]
};
const config = {
type: 'bar',
data: data,
options: {
aspectRatio: 15 / 3,
indexAxis: 'y',
elements: {
bar: {
borderWidth: 2,
}
},
responsive: true,
scales: {
x: {
stacked: true,
},
y: {
stacked: true
}
},
plugins: {
datalabels: {
color: 'white',
font: {
weight: 'bold'
},
formatter: Math.round
},
legend: {
position: 'right',
},
title: {
display: true,
text: 'Chart.js Horizontal Bar Chart'
},
}
},
};
const myChart = new Chart(
document.getElementById('chartDemo'),
config
);
Since version 1.x, the chartjs-plugin-datalabels plugin no longer registers itself automatically. It must be manually registered either globally or locally as described here.
Therefore, to make it work, you could add the following line to your code prior to create the chart.
Chart.register(ChartDataLabels);
Please take a look at your amended code and see how it works.
const testData = {
set1: '4',
set2: '3',
set3: '1',
set4: '3',
};
const data = {
labels: ["test"],
datasets: [{
label: 'set1',
data: [testData.set1],
backgroundColor: 'red'
},
{
label: 'set2',
data: [testData.set2],
backgroundColor: 'blue'
},
{
label: 'set3',
data: [testData.set3],
backgroundColor: 'green',
datalabels: {
anchor: 'center',
align: 'center'
}
},
{
label: 'set4',
data: [testData.set4],
backgroundColor: 'gray'
}
]
};
const config = {
type: 'bar',
data: data,
options: {
aspectRatio: 15 / 3,
indexAxis: 'y',
elements: {
bar: {
borderWidth: 2
}
},
responsive: true,
scales: {
x: {
stacked: true
},
y: {
stacked: true
}
},
plugins: {
datalabels: {
anchor: 'center',
align: 'center',
color: 'white',
font: {
weight: 'bold'
},
formatter: Math.round
},
legend: {
position: 'right'
},
title: {
display: true,
text: 'Chart.js Horizontal Bar Chart'
},
}
},
};
Chart.register(ChartDataLabels);
const myChart = new Chart(
document.getElementById('chartDemo'),
config
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.0/chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-datalabels/2.0.0/chartjs-plugin-datalabels.min.js"></script>
<canvas id="chartDemo"></canvas>
Add the labels to the labels array.
const data = {
labels: ["hrZone1","hrZone2","hrZone3","hrZone4"],
datasets: [
{
label: 'peak',
data: [hrData.peak,0,0,0],
backgroundColor: 'red'
},
{
label: 'cardio',
data: [0,hrData.cardio,0,0],
backgroundColor: 'blue'
},
{
label: 'fatBurn',
data: [0,0,hrData.fatBurn,0],
backgroundColor: 'green'
},
{
label: 'under',
data: [0,0,0,hrData.under],
backgroundColor: 'gray'
}
]
};

ECharts Apache: Bar chart - add horizontal level line

I use EChart.JS in my project.
I need to add an accent as a horizontal level line for each bar. And also to add a default value.
var myChart = echarts.init(document.getElementById("sleep_graph"), null, { renderer: 'svg' });
var option;
option = {
xAxis: {
type: 'category',
data: [1, 2, 3, 4],
show: false
},
yAxis: {
type: 'value',
splitLine: {
show: false
}
},
series: [
{
data: [
{
value: #sleepGraph.DeepSleepDurationValue,
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0.2, color: '#sleepGraph.DeepSleepDurationGraphColor' },
{ offset: 1, color: 'white' }
]),
opacity: 0.8
},
label: {
show: true,
position: 'top',
color: '#sleepGraph.DeepSleepDurationGraphColor',
fontWeight: 'bold'
},
labelLine: {
show: true,
lineStyle: {
type: 'solid',
color: 'black',
width: 55,
}
}
},
{
value: #sleepGraph.SleepDurationValue,
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0.2, color: '#sleepGraph.SleepDurationGraphColor' },
{ offset: 1, color: 'white' }
]),
opacity: 0.8
},
label: {
show: true,
position: 'top',
color: '#sleepGraph.SleepDurationGraphColor',
fontWeight: 'bold'
}
},
{
value: #sleepGraph.LightSleepDurationValue,
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0.2, color: '#sleepGraph.LightSleepDurationGraphColor' },
{ offset: 1, color: 'white' }
]),
opacity: 0.8
},
label: {
show: true,
position: 'top',
color: '#sleepGraph.LightSleepDurationGraphColor',
fontWeight: 'bold'
}
},
{
value: #sleepGraph.RemSleepDurationValue,
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0.2, color: '#sleepGraph.RemSleepDurationGraphColor' },
{ offset: 1, color: 'white' }
]),
opacity: 0.8
},
label: {
show: true,
position: 'top',
color: '#sleepGraph.RemSleepDurationGraphColor',
fontWeight: 'bold'
}
}
],
type: 'bar',
barWidth: 35,
showBackground: true,
backgroundStyle: {
color: 'rgba(180, 180, 180, 0.2)'
}
}
]
};
option && myChart.setOption(option);
I failed to see your image but from your description, I think it's possible to do so with an extra bar series stacking on it. See examples at: https://www.makeapie.com/editor.html?c=xwigwFaytn and https://www.makeapie.com/editor.html?c=xD58D_iJlS .
According to ESChart, there's only chart line has markline property (But it only provide single markline). So there's no way to add horizontal level line to bar chart in ESChart.js
But you can try highcharts, it provides adding marker at the chart.
marker: {
symbol: 'c-rect',
lineColor: 'red',
lineWidth:3,
radius: 10
},
type: 'scatter',
Edit:
ApexChart
It's MIT licence and it support showing markers on chart
https://jsfiddle.net/s3xfqw6p/

How to create in a series multiple data each in a different yaxis using highcharts

I'm working on a project to register pump curves in a MySQL database. So I'm trying to create the closest possible one chart with 3 yAxis (H, NPSH, Power) and 2 xAxis (flow and efficiency). I uploaded a pump curve image here for better understanding. Note this efficiency is a logarithm scale but I prefer to create a linear scale to make it easy.
Well, every curve chart has more one rotor curve, in this case we have 5 curves which is five types of rotor (176mm, 169mm, 162mm, 154mm and 148mm).
Each rotor gives one data series in a yAxis as H, NPSH, Power and Efficiency.
So I need to create a series for each rotor size whem each series get the values ​​of the data: H,NPSH,Power,Efficiency with its yAxis referals.
Here is the link's page with the code.
$(function () {
$('#container').highcharts({
chart: {
zoomType: 'xy'
},
title: {
text: 'Curva da Bomba'
},
subtitle: {
text: 'KSB Meganorm 32-160 | Rotação 1750rpm'
},
xAxis: [{
tickmarkPlacement: 'on',
labels: {
format: '{value}m³/h',
style: {
color: '#005ca2'
}
},
title: {
text: 'Vazão Q (m³/h)',
style: {
color: '#005ca2'
}
}
},{// Rendimento
labels: {
format: '{value}%',
style: {
color: '#005ca2'
}
},
title: {
text: 'Rendimento n (%)',
style: {
color: '#005ca2'
}
},
opposite: true,
top: 90,
height: 0,
offset: 0,
lineWidth: 1
}],
yAxis: [{ // Altura manométrica H
labels: {
format: '{value}mca',
style: {
color: '#005ca2'
}
},
title: {
text: 'Altura manométrica H (mca)',
style: {
color: '#005ca2'
}
},
top: 90,
height: 250,
offset: 0,
lineWidth: 1
}, { // NPSH
labels: {
format: '{value}mca',
style: {
color: '#005ca2'
}
},
title: {
text: 'NPSH (mca)',
style: {
color: '#005ca2'
}
},
top: 380,
height: 120,
offset: 0,
lineWidth: 1
}, {// Potência
title: {
text: 'Potência (hp)',
style: {
color: '#005ca2'
}
},
labels: {
format: '{value} hp',
style: {
color: '#005ca2'
}
},
top: 540,
height: 220,
offset: 0,
lineWidth: 1
}],
tooltip: {
crosshairs: true,
shared: true
},
legend: {
layout: 'horizontal',
align: 'center',
x: 0,
verticalAlign: 'top',
y: 34,
floating: true,
backgroundColor: '#FFFFFF'
},
plotOptions: {
spline: {
lineWidth: 3,
states: {
hover: {
lineWidth: 4
}
},
marker: {
enabled: false
},
pointInterval: 1, // one hour
pointStart: 6
}
},
series: [{
name: 'Rendimento n (Rotor 176mm)',
color: '#FF0000',
type: 'spline',
data: [40,44,45.5,48,50,51.5,52.5,53,53.8,54.7,54.6,53.4,53.4,52.5],
dashStyle: 'shortdot',
tooltip: {
valueSuffix: '%'
}
}, {
name: 'Pressão H (Rotor 176mm)',
color: '#FF0000',
type: 'spline',
data: [14.1,13.9,13.7,13.45,13.2,12.8,12.45,12.1,11.65,11.3,10.7,10.27,9.8,9.2],
tooltip: {
valueSuffix: 'mca'
}
}, {
name: 'NPSH (Rotor 176mm)',
color: '#FF0000',
type: 'spline',
yAxis: 1,
data: [1.2,1.25,1.3,1.4,1.4,1.4,1.4,1.4,1.4,1.63,1.78,2.5,3.2,4],
tooltip: {
valueSuffix: 'mca'
}
}, {
name: 'Potência (Rotor 176mm)',
color: '#FF0000',
type: 'spline',
yAxis: 2,
data: [0.8,0.87,0.92,0.96,1.01,1.04,1.08,1.13,1.15,1.19,1.22,1.24,1.26,1.29],
tooltip: {
valueSuffix: 'hp'
}
}]
});
});
You can set which yAxis a series is plotted against by using the yAxis: <index> value in the series setup. For example:
...
{
name: 'Pressão H (Rotor 176mm)',
color: '#FF0000',
type: 'spline',
data: [14.1,13.9,13.7,13.45,13.2,12.8,12.45,12.1,11.65,11.3,10.7,10.27,9.8,9.2],
tooltip: {
valueSuffix: 'mca'
},
yAxis: 1,
}
...
Here is a very quick example of it. You have 2 xAxis and 3 yAxis. No idea if this is how you want to display it but this shows you how to move the axis around.

Categories