charts.js not working properly in Ionic3 - ionic2

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'
}
}]
}
}
});

Related

How can i change the every legend label font color using chart.js version 2.8.0 (spacial line chart)?

I am using Chart.js version 2.8.0. I have encountered a problem. The problem is that I have to change the color of the every legend label. How do I change the color of the every label in this version (2.8.0)
Note: (I have no way yo use latest version for this satiation)
data: {
labels: [
"Sep",
"oct",
"Nov",
"Dec",
2020,
"Feb",
"Mar",
"Apr",
"May",
"jun",
"Jul",
],
datasets: [
{
label: "Fees",
fill: true,
// backgroundColor: "#FCBB0A",
backgroundColor: "red",
pointBackgroundColor: "red",
borderColor: "red",
pointHighlightStroke: "red",
borderCapStyle: "butt",
stacked: true,
beginAtZero: true,
data: [-200, 200, -230, -100, -200, 190, 220, -350, 180, -200, 500],
},
{
label: "Interest",
fill: true,
// backgroundColor: "#FCBB0A",
backgroundColor: "green",
pointBackgroundColor: "green",
borderColor: "green",
pointHighlightStroke: "green",
borderCapStyle: "butt",
stacked: true,
beginAtZero: true,
data: [-200, 200, 230, -100, -200, 190, 220, 350, 180, -200, 0],
},
{
label: "Net Positive",
fill: true,
// backgroundColor: "#FCBB0A",
backgroundColor: "rgba(68,208,99,0.53)",
pointBackgroundColor: "rgba(68,208,99,0.53)",
borderColor: "rgba(68,208,99,0.53)",
pointHighlightStroke: "rgba(68,208,99,0.53)",
borderCapStyle: "butt",
stacked: true,
beginAtZero: true,
data: [-200, 200, 230, -100, -200, 190, 220, 350, 180, -200, 0],
},
{
label: "Net Negative",
fill: true,
// backgroundColor: "#FCBB0A",
backgroundColor: "rgba(243,86,86,0.53)",
pointBackgroundColor: "rgba(243,86,86,0.53)",
borderColor: "rgba(243,86,86,0.53)",
pointHighlightStroke: "rgba(243,86,86,0.53)",
borderCapStyle: "butt",
stacked: true,
beginAtZero: true,
data: [-200, 200, 230, -100, -200, 190, 220, 350, 180, -200, 0],
},
{
label: "Net Value",
fill: true,
// backgroundColor: "#FCBB0A",
backgroundColor: "rgba(86,170,243,0.53)",
pointBackgroundColor: "rgba(86,170,243,0.53)",
borderColor: "rgba(86,170,243,0.53)",
pointHighlightStroke: "rgba(86,170,243,0.53)",
borderCapStyle: "butt",
stacked: true,
beginAtZero: true,
data: [-200, 200, 230, -100, -200, 190, 220, 350, 180, -200, 0],
},
],
},
options: {
borderWidth: 0,
pointRadius: 0,
showPoints: false,
showLine: false,
stacked: true,
tooltips: {enabled: false},
responsive: true,
maintainAspectRatio: false,
line: {
borderWidth: 0,
showLine: false,
},
elements: {
point: {
radius: 0,
},
},
legend: {
position: "bottom",
align: "center",
labels: {
generateLabels: function(chart) {
let labels Chart.defaults.global.legend.labels.generateLabels(chart);
labels[0].fillStyle = 'blue';
labels[0].fontColor = '#666'
labels[0].strokeStyle = 'green'
labels[0].fontSize = 14
return labels;
}
}
},
animation: {
duration: 750,
},
},
But labels[0].fontColor = '#666' and labels[0].fontSize = 14 not working
How can solve this problem please help me anyone
Instead of trying to do it in the generateLabels part you need to set it as a property in the labels config like so:
options: {
legend: {
labels: {
fontColor: 'red'
}
}
}
Example:
var options = {
type: 'line',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
borderWidth: 1
},
{
label: '# of Points',
data: [7, 11, 5, 8, 3, 7],
borderWidth: 1
}
]
},
options: {
legend: {
labels: {
fontColor: 'red'
}
}
}
}
var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
<body>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.js"></script>
</body>

Multiple Axis Line Chart

I have problem getting dataset 2 (Score) to use the y1 scale, it seems to use scale for first dataset. Where is the error? I thought that using two y-scales should solve the problem with two very different datasets, but i only get the values from the "Completed" dataset, so I assume the data for "score" is there, but way way above the scale. . .
const CHART = document.getElementById("statChart");
let statChart = new Chart(CHART, {
type: 'line',
data: {
labels: ["1", "2", "3", "4", "5", "6", "7"],
datasets: [
{
type: 'line',
label: "Completed",
yAxesID: 'y',
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,
pointHitRadius: 10,
data: [65, 59, 80, 81, 56, 55, 40]
},
{
type: 'line',
label: "Score",
yAxesID: 'y1',
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,
pointHitRadius: 10,
data: [8500, 8900, 8000, 8100, 5600, 5500, 4900]
}
]},
options: {
responsive: true,
interaction: {
mode: 'index',
intersect: false,
},
plugins:{
title: {
display: true,
text: 'Your Result'
},
tooltips: {
mode: 'nearest',
intersect: true,
},},
scales: {
y: {
type: 'linear',
display: true,
position: 'left',
min: 0,
max: 100
},
y1: {
type: 'linear',
display: true,
position: 'right',
min: 0,
max: 10000,
// grid line settings
grid: {
drawOnChartArea: false, // only want the grid lines for one axis to show up
}
}
}
}
});
You have a typo, yAxesID should be yAxisID if you change that it will work fine as you can see in the example below:
const CHART = document.getElementById("statChart");
let statChart = new Chart(CHART, {
type: 'line',
data: {
labels: ["1", "2", "3", "4", "5", "6", "7"],
datasets: [{
type: 'line',
label: "Completed",
yAxisID: 'y',
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,
pointHitRadius: 10,
data: [65, 59, 80, 81, 56, 55, 40]
},
{
type: 'line',
label: "Score",
yAxisID: 'y1',
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,
pointHitRadius: 10,
data: [8500, 8900, 8000, 8100, 5600, 5500, 4900]
}
]
},
options: {
responsive: true,
interaction: {
mode: 'index',
intersect: false,
},
plugins: {
title: {
display: true,
text: 'Your Result'
},
tooltips: {
mode: 'nearest',
intersect: true,
},
},
scales: {
y: {
type: 'linear',
display: true,
position: 'left',
min: 0,
max: 100
},
y1: {
type: 'linear',
display: true,
position: 'right',
min: 0,
max: 10000,
// grid line settings
grid: {
drawOnChartArea: false, // only want the grid lines for one axis to show up
}
}
}
}
});
<body>
<canvas id="statChart" width="600" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.0.2/chart.js" integrity="sha512-n8DscwKN6+Yjr7rI6mL+m9nS4uCEgIrKRFcP0EOkIvzOLUyQgOjWK15hRfoCJQZe0s6XrARyXjpvGFo1w9N3xg==" crossorigin="anonymous"></script>
</body>

a problem for plotting a vertical line on chart js using jinja template array

I have a small issue but it's somehow confusing. I am trying to draw a 2 y-axes chart on my web app using Flask, Jinja and Chart.JS as plotting library.
It worked well but when I try to plot a vertical line on the chart, it only works with an array, i.e.: data: [1, 2, 3, 4]. When I pass the template, it doesn't plot the vertical line – only the chart data is visible, but the line disappears. How do I fix this?
Here is the code:
new Chart(document.getElementById('chart_{{prop.name}}').getContext('2d'), {
type: 'bar', // <-- define overall chart type
data: {
labels: [
{% for item in prop.histoDataPoints %}
"{{item}}",
{% endfor %}
],
datasets: [{
type: 'line',
label: 'Density',
fill: false,
lineTension: 0.1,
backgroundColor: "rgba(0,102,102,255)",
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: [
{% for item in prop.density %}
{{ item }},
{% endfor %}
],
yAxisID: 'left-axis'
}, {
label: 'Distribution',
fill: true,
lineTension: 0.1,
backgroundColor: "rgba(0,102,102,255)",
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: [
{% for item in prop.distribution %}
{{ item }},
{% endfor %}
],
yAxisID: 'right-axis'
}]
},
options: {
scales: {
yAxes: [{
type: 'linear',
id: 'left-axis',
display: true,
position: 'left',
scaleLabel: {
display: true,
labelString: '%'
}
}, {
type: 'linear',
id: 'right-axis',
display: true,
position: 'right',
stacked: true,
scaleLabel: {
display: true,
labelString: '#'
},
gridLines: {
drawOnChartArea: true
}
}]
},
annotation: {
annotations: [{
type: 'line',
mode: 'vertical',
scaleID: "x-axis-0",
value: 573.5,
borderColor: 'rgb(75, 0, 0)',
borderWidth: 4,
label: {
enabled: true,
content: 'Test label'
}
}]
}
}
});

Chartjs 2 Line Graph Single Stroke Between Datasets

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>

ng2-charts tooltip and legend stopped working

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.