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.
Related
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'm trying to make a line graph with a single stroke between each datapoint on the graph. There should be a small space between each side of the datapoint.
I see that the docs say to use borderDash but the strokes will run through my datapoints instead of only between. I looked for a way to add padding/margin around each datapoint but I don't see a way to do that.
Because of the borderDash limitation that you pointed out, I think the easiest way to get the desired effect is to use a combination of pointRadius, backgroundColor, pointBorderColor, and pointBorderWidth.
This works by creating a white border around each point that makes it looks like there's a gap.
For example:
backgroundColor: '#000',
pointRadius: 5,
pointBorderColor: '#fff',
pointBorderWidth: 3,
Here's what it looks like:
And here's a runnable snippet:
const ctx = document.getElementById('myChart').getContext('2d');
new Chart(ctx, {
type: 'line',
data: {
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
datasets: [{
borderColor: '#000',
backgroundColor: '#000',
pointRadius: 5,
pointBorderColor: '#fff',
pointBorderWidth: 3,
lineTension: 0,
data: [6.06, 82.2, -22.11, 21.53, -21.47, 73.61, -53.75, -60.32, -30, 20, 22, 25],
label: 'Dataset',
fill: false,
}, ],
},
options: {
scales: {
xAxes: [{
gridLines: {
drawOnChartArea: false,
drawTicks: false
}
}],
yAxes: [{
gridLines: {
drawOnChartArea: false,
drawTicks: false
}
}]
},
legend: {
display: false
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.js"></script>
<body>
<canvas id="myChart" width="600" height="400"></canvas>
</body>
In Chartjs I have two plots, as shown here:
var config = {
type: 'line',
data: {
labels: [
"2017-07-03T01:05:00+0100",
....
],
datasets: [
{
label: "Consumption",
fill: 'origin',
pointRadius: 0,
borderColor: "#0000ff",
backgroundColor: "rgba(255,10,13,255)",
data: [
0.015625,
0.0199861111111,
...
],
}
,
{
fill: 'origin',
label: "PV",
pointRadius: 0,
borderColor: "#ebf909",
backgroundColor: "rgba(29,241,13,210)",
data: [
0.0,
.....
],
}
]
},
options: {
responsive: true,
title:{
display:true,
text:"Chart.js Line Chart - Stacked Area"
},
tooltips: {
mode: 'index',
},
hover: {
mode: 'index'
},
scales: {
xAxes: [{
scaleLabel: {
display: true,
labelString: 'Time'
}
}],
yAxes: [{
stacked: false,
scaleLabel: {
display: true,
labelString: 'kWh'
}
}]
}
}
};
var ctx = document.getElementById("canvas").getContext("2d");
var myChart = new Chart(ctx, config);
Is there any way I can make the green plot show through the red one in places where the latter completely obscures the former?
You need to set fill property to false for the first dataset (the red one), to make it transparent.
datasets: [{
label: "Consumption",
fill: false,
pointRadius: 0,
borderColor: "#0000ff",
backgroundColor: "rgba(255,10,13,255)",
...
or, you can also reduce the opacity of background color, like so ...
backgroundColor: "rgba(255, 10, 13, 0.1)"
Here is the working codepen
In normal laptop view i am getting the chart well labeled and all the graph points are coming but when i open the app in moible view in browser it it does not fit well with the screen(as shown in image 2).. Can anyone please suggest some way to tackle it and show all the points in mobile screen like the desktop(full screen) one.
In normal desktop view
in mobile view:
this is my code:
this.lineChart = new Chart(this.lineCanvas.nativeElement, {
type: 'line',
data: {
labels: this.labels,
datasets: [
{
label: "My First dataset",
fill: false,
lineTension: 0.1,
backgroundColor: "rgba(75,192,192,0.4)",
borderColor: "rgba(75,192,192,1)",
borderCapStyle: 'butt',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderColor: "rgba(75,192,192,1)",
pointBackgroundColor: "#fff",
pointBorderWidth: 1,
pointHoverRadius: 5,
pointHoverBackgroundColor: "rgba(75,192,192,1)",
pointHoverBorderColor: "rgba(220,220,220,1)",
pointHoverBorderWidth: 2,
pointRadius: 1,
pointHitRadius: 10,
data: this.priceArr,
spanGaps: true,
}
]
}, options:{
scales: {
yAxes: [{
scaleLabel: {
display: true,
labelString: 'Price Rise/Fall'
}
}],
xAxes: [{
scaleLabel: {
display: true,
labelString: 'Time'
}
}]
}
}
});
I want to change the grids color of my line chart using options field but I have no idea from where to begin.
I First tried to change the canvas backgroud colors using gradient but the results weren't good.
canvas{
background:linear-gradient(top, #ea1a07 0%, #f4b841 75%,#f2dd43 100%);
}
However, I didn't get what I want because as you see in the above image, not only the grids were colored but also the x values, y labels and the chart legend were colored too.
Picture of the result I'm getting with this css code
Example of what I want to get
my chart.js options are
options = {
scales: {
xAxes: [{
gridLines: {
color: 'rgba(171,171,171,1)',
lineWidth: 1
}
}],
yAxes: [{
ticks: {
beginAtZero: true,
max: 100,
min: 0,
stepSize: 10
},
gridLines: {
color: 'rgba(171,171,171,1)',
lineWidth: 0.5
}
}]
},
responsive: true
};
So, is there a way to set only the grid's background to 3 different colors (with gradient or not)?
NB: I'm using chart.js with angular 2 (ng2-charts)
The easiest way to do this is to use the chartjs-plugin-annotation plugin and configure 3 box annotations bound to your Y axis (each box would have a different color).
Here is an example below (and you can see it in action with this codepen).
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: 'line',
data: {
datasets: [{
label: 'Points',
data: [
{x: 0, y: 2},
{x: 1, y: 3},
{x: 2, y: 2},
{x: 1.02, y: 0.4},
{x: 0, y: -1}
],
backgroundColor: 'rgba(123, 83, 252, 0.8)',
borderColor: 'rgba(33, 232, 234, 1)',
borderWidth: 1,
fill: false,
}],
},
options: {
title: {
display: true,
text: 'Chart.js - Gridline Background',
},
scales: {
xAxes: [{
type: 'linear',
position: 'bottom',
ticks: {
min: -1,
max: 8,
stepSize: 1,
fixedStepSize: 1,
},
gridLines: {
color: 'rgba(171,171,171,1)',
lineWidth: 1
}
}],
yAxes: [{
afterUpdate: function(scaleInstance) {
console.dir(scaleInstance);
},
ticks: {
min: -2,
max: 4,
stepSize: 1,
fixedStepSize: 1,
},
gridLines: {
color: 'rgba(171,171,171,1)',
lineWidth: 0.5
}
}]
},
annotation: {
annotations: [{
type: 'box',
yScaleID: 'y-axis-0',
yMin: 1,
yMax: 4,
borderColor: 'rgba(255, 51, 51, 0.25)',
borderWidth: 2,
backgroundColor: 'rgba(255, 51, 51, 0.25)',
}, {
type: 'box',
yScaleID: 'y-axis-0',
yMin: -1,
yMax: 1,
borderColor: 'rgba(255, 255, 0, 0.25)',
borderWidth: 1,
backgroundColor: 'rgba(255, 255, 0, 0.25)',
}, {
type: 'box',
yScaleID: 'y-axis-0',
yMin: -2,
yMax: -1,
borderColor: 'rgba(0, 204, 0, 0.25)',
borderWidth: 1,
backgroundColor: 'rgba(0, 204, 0, 0.25)',
}],
}
}
});
It's important to note that the annotations are painted on top of the chart, so your annotation color needs to contain some transparency to see the stuff behind it.
There is no problem using this plugin with ng2-charts. Just add the source in a <script> in your app's html file and add the annotation property into your options object. Here is an Angular2 / ng2-charts example demonstrating how to use the annotations plugin.