I wrote in the mounted function:
this.gradient = this.$refs.canvas[0].$el.childNodes[0]
.getContext('2d')
.createLinearGradient(0, 0, 0, 450)
this.gradient.addColorStop(0, '#F44336')
this.gradient.addColorStop(0.3, '#F50057')
this.gradient.addColorStop(0.6, '#FF4081')
this.gradient.addColorStop(1, '#FF9100')
and in the function where I set the values for the charts:
datasets: [
{
label: service.name,
backgroundColor: this.gradient,
responsive: true,
data: service.statusdatavalue
}
]
There are no Console Errors nor others.
The result is always the same:
Any ideas?
Thank you.
I made the gradient the way below.
datasets: [{
label: service.name,
backgroundColor: this.gradient,
responsive: true,
data: service.statusdatavalue,
fill: true. // here!
}]
Related
We use the chart-js-react to build area charts in our service. Our chart will display logs information which is time-based data like, {x:"2022-06-27T21:00:00Z", y:25}.
Since the time could be a random value in each data point, so there are some issue when we want to display a few series with different X-values(different time), as shown in the image. We got overlapping and blank area when the X-value(timestamp) is missing in another series.
Update: checked this Issue: https://github.com/chartjs/Chart.js/issues/7695. I notice they did have some missing/ different X-value. but looks the x-value is not random. when I made the x-values mis-match. same issue: https://codepen.io/derrickwanglf/pen/RwMRMXM
TO Simply demonstrate our issue, I mock some data(real number as x-value) here.
https://codepen.io/derrickwanglf/pen/gOeMvEL
Do you know how can we stack the area chart even the x-values are random?
d0 = [{x:1, y:1}, {x:2, y:11},{x:3, y:1},{x:4, y:11},{x:5, y:10}, {x:6, y:8},{x:7, y:15},{x:8, y:2}]
d1= [{x:1, y:1}, {x:2, y:5}, {x:4, y:1}, {x:5, y:3}, {x:5.5, y:4},{x:7, y:5},{x:8, y:3}]
const ctx = document.getElementById("chart").getContext("2d");
const chart = new Chart(ctx, {
type: "line",
data: {
datasets: [
{
backgroundColor: "rgba(50,200,50,0.6)",
borderColor: "rgba(50,200,50,0.6)",
data: d0,
fill: "stack"
},
{
backgroundColor: "rgba(200,50,50,0.6)",
borderColor: "rgba(200,50,50,0.6)",
data: d1,
fill: "stack"
}
]
},
options: {
scales: {
x: {
type: "linear"
},
y: {
stacked: true,
}
},
elements: {
line: {
tension: 0.2
},
point: {
radius: 0
}
},
tooltips: {
mode: "nearest",
intersect: false,
axis: "x"
},
hover: {
mode: "nearest",
intersect: false,
axis: "x"
}
}
});
I'm trying to put data into chartJS and have it automatically scroll when it reaches the end
so like when it reaches here
it will keep adding data without the user having to scroll, is there any ways that I can do this without the scroll bar at the bottom?
Automatic scrolling without visible scroll bar would means that the user can never see data again that was scrolled out of the visible area. If this is what you want, you can simply remove outdated labels and dataset values once a certain limit is reached. This can be done using Array.shift(), which removes the first element from an array.
chart.data.labels.push(<new label>);
chart.data.datasets[0].data.push(<new value>);
if (chart.data.labels.length > maxValues) {
chart.data.labels.shift();
chart.data.datasets[0].data.shift();
}
chart.update();
Please have a look at the runnable code snippet below that allows up to 10 labels and values. Once this limit is reached, outdated labels and values are removed.
var chart = new Chart('canvas', {
type: "line",
responsive: true,
maintainAspectRatio: false,
data: {
labels: [],
datasets: [{
label: "Data",
data: [],
fill: true,
backgroundColor: "lightblue",
borderColor: "lightblue",
pointRadius: 0
}]
},
options: {
legend: {
display: true,
position: 'bottom'
},
scales: {
yAxes: [{
ticks: {
min: 0,
max: 20,
stepSize: 5
}
}]
}
}
});
var maxValues = 10;
var count = 0;
setInterval(() => {
chart.data.labels.push(++count);
chart.data.datasets[0].data.push(Math.floor((Math.random() * 20) + 1));
if (chart.data.labels.length > maxValues) {
chart.data.labels.shift();
chart.data.datasets[0].data.shift();
}
chart.update();
}, 1000);
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="canvas" height="100"></canvas>
For my charts, I am trying to have thin gridlines and thicker axis lines (both x and y).
I found an option to adjust zeroLineWidth but this is only applicable for 0 and my axis does not start at 0 (E.g. x-axis are years, so starting at 0 makes no sense).
I found some discussions about it but as far as I can tell this does not work yet: https://github.com/chartjs/Chart.js/pull/4117.
I also tried to supply an array for the gridLines lineWidth option. The first value changes the thickness of the axis but also of the first gridline. So this is not fully independent.
scales: {
yAxes: [{
gridLines: {
lineWidth: [5,1,1,1,1,1,1,1,1]
}
}]
}
Maybe there is no way to do this right now but if anyone has a solution that would be great. Even a hacky one would be welcome.
It looks like there's no way to do this since (as you noticed) the axis line width is directly derived from the gridline width via this line in the Chart.js source:
var axisWidth = gridLines.drawBorder ? valueAtIndexOrDefault(gridLines.lineWidth, 0, 0) : 0;
But, since you say a hacky solution is welcome...
The below snippet demonstrates combining two axes to achieve the desired affect; one for the border and one for the gridlines.
It's ugly, but functional.
let border_axis = {
gridLines: {
drawOnChartArea: false,
lineWidth: 10,
color: "rgba(255, 127, 0, 0.25)"
},
ticks: {
beginAtZero: true
}
},
gridline_axis = {
beforeBuildTicks: function(axis) {
if (axis.id == "y-axis-1") {
// this callback ensures both axes have the same min/max to keep ticks and gridlines aligned.
axis.max = axis.chart.scales["y-axis-0"].max;
axis.min = axis.chart.scales["y-axis-0"].min;
}
},
gridLines: {
drawTicks: false,
drawBorder: false
},
ticks: {
display: false
}
},
chart = new Chart(document.getElementById("chart"), {
type: "line",
data: {
labels: [2001, 2002, 2003, 2004, 2005],
datasets: [{
data: [1, 2, 3, 4, 5]
}]
},
options: {
scales: {
xAxes: [border_axis, gridline_axis],
yAxes: [border_axis, gridline_axis]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>
<canvas id="chart"></canvas>
I have few charts ready in chart.js. I am trying to put the data that I have fetched through JSON file. How do I change the chart data automatically in a chart? I am getting json data from URL.
chartData1:{
labels: ["01 Jan","02 Jan","03 Jan","04 Jan","05 Jan","06
Jan","07 Jan"],
datasets: [{
label: "s1",
data:
[100,0,1,0,0,1,0,0,0,1,2,3,0,0,0,0,1,1,1,0,0,0,2,1,1,0,1,3,2,1,0],
fill:false,
borderColor: 'Orange',
lineTension:0,
borderWidth:2,
radius:2
},
{
label: "s2",
data:
[2,3,4,1,4,5,3,2,0,1,0,3,5,6,3,7,2,0,5,3,1,2,3,1,0,5,4,5,8,6,2],
fill:false,
borderColor: 'Violet',
lineTension:0,
borderWidth:2,
radius:2
}
]
},
"line-chart" is the id of the <canvas> where you want to display chart.
Try with this.
var chart1 = document.getElementById("line-chart").getContext("2d");
window.myLine = new Chart(chart1).Line(chartData1, {
responsive: true,
scaleLineColor: "rgba(0,0,0,.2)",
scaleGridLineColor: "rgba(0,0,0,.05)",
scaleFontColor: "#c5c7cc"
});
Trying to get a linechart in ChartJS working according to the wishes of our clients, but I've run into an issue: When an entire week of data (we do sales) is 0, the labels plotted on the yAxis go below 0 -which is something our clients don't want. I've looked at scaleoverride, suggestedMin, and beginAtZero but none worked.
How can I change the labels so it will always have 0 as a minimum?
Complimentary image below, to visualise the issue:
The code (with one of the not-working methods I've tried):
var canvas = document.getElementById('salesChart').getContext('2d');
salesChart = new Chart(canvas, {
type: 'line',
scaleOverride: true,
scaleSteps: 10,
scaleStepWidth: 20,
scaleStartValue: 0,
data: {
labels: chartLabels,
datasets: [{
label: 'Sales',
data: chartData,
backgroundColor: "rgba(37,185,153,0.7)"
}],
},
options: {
maintainAspectRatio: false,
responsive: true
}
});
This worked for me:
options: {
maintainAspectRatio: false,
responsive: true,
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}]
}
}
Note: I left the rest of the chart config as is. You did not explicitly supply the chartLabels and chartData variables, so I used:
var chartLabels = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
var chartData = [0, 0, 0, 0, 0, 0, 0];
Fiddle: https://jsfiddle.net/3c4yq5oq/