I want to add fill to a line chart using the react-chartjs-2 package. I'm passing fill: true to the dataset but that doesn't work as expected. Any suggestions?
const data = {
labels,
datasets: [
{
label: "Balance",
data: history.balances.map((item) => item.balance),
fill: true,
borderColor: "rgba(190, 56, 242, 1)",
backgroundColor: "rgba(190, 56, 242, 1)",
tension: 0.3,
},
],
};
This is because you are using treeshaking and not importing/registering the filler plugin.
import {Chart, Filler} from 'chart.js';
Chart.register(Filler);
Related
The chart i'm trying to 'create' is following:
Date (labels x-axis)
List of exchanges ( Label of Dataset)
Now for the data: line should show the total volume for the date (works)
I'd now like to add a Bar to that date/label showing another data set (short volume).
If i toggle Exchange on/off it removes both total/short volume for that Exchange
similar to Chart.js: How to group legends of dataset? So one toggle for multiple datasets?
I can get it to work as mixed chart, but it then adds another label (what is what im trying to avoid)
I'd like both datasets (total & short) be assigned to the same 'Label' (if its possible).
Current code without short volume
const data = {
labels: labels,
datasets: [{
label: 'AMEX',
backgroundColor: 'rgb(66, 153, 225, 0.5)',
borderColor: 'rgb(66, 153, 225, 0.5)',
data: [<?= $amexprint ?>],
},
**Etc..**
{
label: 'ARCA',
backgroundColor: 'rgb(66, 153, 225)',
borderColor: 'rgb(66, 153, 225)',
data: [<?= $arcaprint ?>],
},{
label: 'NYSE',
backgroundColor: 'rgb(51, 171, 164)',
borderColor: 'rgb(51, 171, 164)',
data: [<?= $nyseprint ?>],
}]
};
const config = {
type: 'line',
data: data,
options: {}
};
With short volume
const data = {
labels: labels,
datasets: [{
label: 'AMEXtotal',
backgroundColor: 'rgb(66, 153, 225, 0.5)',
borderColor: 'rgb(66, 153, 225, 0.5)',
data: [<?= $amexprint ?>],
},{
label: 'AMEXshort',
type: 'bar',
backgroundColor: 'rgb(66, 153, 225, 0.5)',
borderColor: 'rgb(66, 153, 225, 0.5)',
data: [<?= $amexshort ?>],
},
As mentioned... it works, data and all.. just that i'd like to have the according labels under one roof so to speak
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/
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>
I am building a line chart with different background colors between data points. When I break my dataset into the following the lineTension is lost and shows straight lines. How can I make the curves?
var data = {
labels: ["Jan", "Feb", "Mar", "Apr"],
datasets: [{
data: [73, 59, null, null],
backgroundColor: "rgba(233, 104, 92, 0.3)",
borderColor: "rgba(233, 104, 92, 0.3)",
pointRadius: 0,
lineTension: 0.4,
}, {
data: [null, 59, 70, null],
backgroundColor: "rgba(92, 193, 77, 0.3)",
borderColor: "rgba(92, 193, 77, 0.3)",
pointRadius: 0,
lineTension: 0.4
}, {
data: [null, null, 70, 55],
backgroundColor: "rgba(233, 104, 92, 0.3)",
borderColor: "rgba(233, 104, 92, 0.3)",
pointRadius: 0,
lineTension: 0.4
}
]
};
var ctx = document.getElementById("myChart").getContext("2d");
var options = {
showTooltips: false,
}
var chart = new Chart(ctx).Line(data, options);
Linetension is actually working, but you're only show 2 datapoints for each dataset. You need 3 to show a curve.
Also, it seems like you're using an old version of ChartJs, the latest version uses the following syntax:
var chart = new Chart(ctx, { type: "line", data: data,options: options });
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