We Keep Coding

Remove space between chart js legend and chart

How do I remove this space between the legend of this chart and the chart it self
If I change the size it just breaks the diagram :(.
JSFiddle: https://jsfiddle.net/ucs8ybLg/14/
image of the space between label and diagram
Code for the diagram
const config = {
type: 'radar',
data: data,
options: {
elements: {
line: {
borderWidth: 2
}
},
scales: {
r: {
suggestedMin: 0,
suggestedMax: 10
}
}
},
};
const data = {
labels: [
'Problemlösung',
'Ausdauer',
'Selbstständigkeit',
'Zuverlässigkeit',
'Reflexionsfähigkeit',
'Teamwork',
'Respektvoller Umgang',
'Pflichtbewusstsein'
],
datasets: [{
label: 'Schüler',
data: [10, 8, 6, 7, 5, 10, 5, 6],
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)'
},
{
label: 'Lehrer',
data: [8, 10, 7, 7, 3, 9, 8, 7],
fill: true,
backgroundColor: 'rgba(54, 162, 235, 0.2)',
borderColor: 'rgb(54, 162, 235)',
pointBackgroundColor: 'rgb(54, 162, 235)',
pointBorderColor: '#fff',
pointHoverBackgroundColor: '#fff',
pointHoverBorderColor: 'rgb(54, 162, 235)'
}]
};
Thank you very much for the help!

You can explicitly define options.aspectRatio in order to change the width / height ratio of the chart.
options: {
aspectRatio: 1.5,
...
for more information, please consult Configuration Options from the Chart.js documentation

Search box to show information in line chart

I'm trying to add a search box in to my web page that allows the user to select the data to show in a line chart.
I know how to pass the variable from the search box to PHP but the question is how can I render the chart in Javascript to update the information with the value of the search box after I have updated it in the PHP?
$(document).ready(function() {
$.ajax({
url: "http://localhost/chartjs/followersdata.php",
type: "GET",
success: function(data) {
console.log(data);
var userid = [];
var facebook_follower = [];
var twitter_follower = [];
var googleplus_follower = [];
for (var i in data) {
userid.push("UserID " + data[i].userid);
facebook_follower.push(data[i].facebook);
twitter_follower.push(data[i].twitter);
googleplus_follower.push(data[i].googleplus);
}
var chartdata = {
labels: userid,
datasets: [{
label: "facebook",
fill: false,
lineTension: 0.1,
backgroundColor: "rgba(59, 89, 152, 0.75)",
borderColor: "rgba(59, 89, 152, 1)",
pointHoverBackgroundColor: "rgba(59, 89, 152, 1)",
pointHoverBorderColor: "rgba(59, 89, 152, 1)",
data: facebook_follower
},
{
label: "twitter",
fill: false,
lineTension: 0.1,
backgroundColor: "rgba(29, 202, 255, 0.75)",
borderColor: "rgba(29, 202, 255, 1)",
pointHoverBackgroundColor: "rgba(29, 202, 255, 1)",
pointHoverBorderColor: "rgba(29, 202, 255, 1)",
data: twitter_follower
},
{
label: "googleplus",
fill: false,
lineTension: 0.1,
backgroundColor: "rgba(211, 72, 54, 0.75)",
borderColor: "rgba(211, 72, 54, 1)",
pointHoverBackgroundColor: "rgba(211, 72, 54, 1)",
pointHoverBorderColor: "rgba(211, 72, 54, 1)",
data: googleplus_follower
}
]
};
var ctx = $("#mycanvas");
var LineGraph = new Chart(ctx, {
type: 'line',
data: chartdata
});
},
error: function(data) {}
});
});
Thanks for your replies.

This link can help you
https://www.chartjs.org/docs/latest/developers/api.html
// duration is the time for the animation of the redraw in milliseconds
// lazy is a boolean. if true, the animation can be interrupted by other animations
LineGraph.render({
duration: 800,
lazy: false,
easing: 'easeOutBounce'
});

I have managed to do this, but I only return the json not the chart rendered.
<form action="./followersdata.php" method="post">
Licencia:<br>
<input type="text" name="licencia" id="licencia"><br>
<input type="submit" value="Submit" onsubmit="return showgraph();">
</form>

Chart JS add max value to legend

I'm new in Chart JS and I'm trying to add the maximum values for each dataset inside the legend. I've tried using legendCallback :
HTML:
<canvas id="lineChart"></canvas>
Javascript:
var ctx = document.getElementById("lineChart");
var lineChart = new Chart(ctx, {
type: 'line',
data: {
labels: ['1','2','3','4','5','6','7','8','9','10'],
datasets: [{
label: "Max",
backgroundColor: "rgba(235, 70, 70, 0.31)",
borderColor: "rgba(231, 25, 25, 0.7)",
pointBorderColor: "rgba(231, 25, 25, 0.7)",
pointBackgroundColor: "rgba(231, 25, 25, 0.7)",
pointHoverBackgroundColor: "#fff",
pointHoverBorderColor: "rgba(220,220,220,1)",
pointBorderWidth: 1,
data: [31, 74, 6, 39, 20, 85, 7, 80, 35, 70]
}, {
label: "Avg",
backgroundColor: "rgba(255, 255, 111, 0.3)",
borderColor: "rgba(255, 255, 50, 0.70)",
pointBorderColor: "rgba(255, 255, 50, 0.70)",
pointBackgroundColor: "rgba(255, 255, 50, 0.70)",
pointHoverBackgroundColor: "#fff",
pointHoverBorderColor: "rgba(151,187,205,1)",
pointBorderWidth: 1,
data: [82, 23, 66, 9, 99, 4, 2, 25, 67, 20]
},
{
label: "Min",
backgroundColor: "rgba(90, 189, 90, 0.3)",
borderColor: "rgba(50, 173, 50, 0.70)",
pointBorderColor: "rgba(50, 173, 50, 0.70)",
pointBackgroundColor: "rgba(50, 173, 50, 0.70)",
pointHoverBackgroundColor: "#fff",
pointHoverBorderColor: "rgba(151,187,205,1)",
pointBorderWidth: 1,
data: [30, 46, 60, 29, 79, 54, 23, 25, 47, 10]
}]
},
options: {
legend: {
display: true,
position: 'bottom'
},
legendCallback: function(chart) {
return 'a';
},
scales: {
xAxes: [{
gridLines: {
color: "rgba(0, 0, 0, 0)",
}
}]
}
}
});
but the displayed legend didn't changed. I've searched for some answers and I also tried using: lineChart.generateLegend(); but still no result.
It is possible to add the maximum value for each dataset inside legend?
Thanks in advance!

Yes, it is possible to show the max value for each dataset inside the legend. You can use the legend.labels.generateLabels config property to do this.
This property allows you to define your own function that generates the legend labels. To add the max, we simply iterate through each dataset's data array, find the max, and build it into the label string.
Here is an example configuration. The magic happens when we set the text property in the return.
legend: {
display: true,
position: 'bottom',
labels: {
generateLabels: function(chart) {
var data = chart.data;
return Chart.helpers.isArray(data.datasets) ? data.datasets.map(function(dataset, i) {
return {
text: dataset.label + " (Max Value: " + Chart.helpers.max(dataset.data).toLocaleString() + ")",
fillStyle: (!Chart.helpers.isArray(dataset.backgroundColor) ? dataset.backgroundColor : dataset.backgroundColor[0]),
hidden: !chart.isDatasetVisible(i),
lineCap: dataset.borderCapStyle,
lineDash: dataset.borderDash,
lineDashOffset: dataset.borderDashOffset,
lineJoin: dataset.borderJoinStyle,
lineWidth: dataset.borderWidth,
strokeStyle: dataset.borderColor,
pointStyle: dataset.pointStyle,
// Below is extra data used for toggling the datasets
datasetIndex: i
};
}, this) : [];
},
},
},
I also created a codepen to demonstrate this.

Plotting on charts js more than one dataset

I have the following json:
[
{"periodo":"0","mes":"7","anio":"2015","montoIngreso":0,"monedaIngreso":"0","identifierIngreso":null,"montoGasto":0,"monedaGasto":"0","identifierGasto":null,"balance":0",
{"periodo":"1","mes":"8","anio":"2015","montoIngreso":0,"monedaIngreso":"0","identifierIngreso":null,"montoGasto":0,"monedaGasto":"0","identifierGasto":null,"balance":0},
{"periodo":"2","mes":"9","anio":"2015","montoIngreso":0,"monedaIngreso":"0","identifierIngreso":null,"montoGasto":0,"monedaGasto":"0","identifierGasto":null,"balance":0},
{"periodo":"3","mes":"10","anio":"2015","montoIngreso":0,"monedaIngreso":"0","identifierIngreso":null,"montoGasto":0,"monedaGasto":"0","identifierGasto":null,"balance":0},
{"periodo":"4","mes":"11","anio":"2015","montoIngreso":0,"monedaIngreso":"0","identifierIngreso":null,"montoGasto":0,"monedaGasto":"0","identifierGasto":null,"balance":0},
{"periodo":"5","mes":"12","anio":"2015","montoIngreso":0,"monedaIngreso":"0","identifierIngreso":null,"montoGasto":0,"monedaGasto":"0","identifierGasto":null,"balance":0},
{"periodo":"6","mes":"1","anio":"2016","montoIngreso":0,"monedaIngreso":"0","identifierIngreso":null,"montoGasto":0,"monedaGasto":"0","identifierGasto":null,"balance":0},
{"periodo":"7","mes":"2","anio":"2016","montoIngreso":0,"monedaIngreso":"0","identifierIngreso":null,"montoGasto":0,"monedaGasto":"0","identifierGasto":null,"balance":0},
{"periodo":"8","mes":"3","anio":"2016","montoIngreso":0,"monedaIngreso":"0","identifierIngreso":null,"montoGasto":0,"monedaGasto":"0","identifierGasto":null,"balance":0},
{"periodo":"9","mes":"4","anio":"2016","montoIngreso":0,"monedaIngreso":"0","identifierIngreso":null,"montoGasto":0,"monedaGasto":"0","identifierGasto":null,"balance":0},
{"periodo":"10","mes":"5","anio":"2016","montoIngreso":0,"monedaIngreso":"0","identifierIngreso":null,"montoGasto":0,"monedaGasto":"0","identifierGasto":null,"balance":0},
{"periodo":"11","mes":"6","anio":"2016","montoIngreso":3833.874,"monedaIngreso":"1","identifierIngreso":"ARS","montoGasto":175.56,"monedaGasto":"1","identifierGasto":"ARS","balance":3658.314},
{"periodo":"11","mes":"6","anio":"2016","montoIngreso":3833.874,"monedaIngreso":"1","identifierIngreso":"ARS","montoGasto":"460810","monedaGasto":"2","identifierGasto":"USD","balance":-456976.126},
{"periodo":"11","mes":"6","anio":"2016","montoIngreso":3833.874,"monedaIngreso":"1","identifierIngreso":"ARS","montoGasto":190.4448,"monedaGasto":"3","identifierGasto":"UYU","balance":3643.4292},
{"periodo":"11","mes":"6","anio":"2016","montoIngreso":"5000","monedaIngreso":"2","identifierIngreso":"USD","montoGasto":175.56,"monedaGasto":"1","identifierGasto":"ARS","balance":4824.44},
{"periodo":"11","mes":"6","anio":"2016","montoIngreso":"5000","monedaIngreso":"2","identifierIngreso":"USD","montoGasto":"460810","monedaGasto":"2","identifierGasto":"USD","balance":-455810},
{"periodo":"11","mes":"6","anio":"2016","montoIngreso":"5000","monedaIngreso":"2","identifierIngreso":"USD","montoGasto":190.4448,"monedaGasto":"3","identifierGasto":"UYU","balance":4809.5552},
{"periodo":"12","mes":"7","anio":"2016","montoIngreso":219.318,"monedaIngreso":"1","identifierIngreso":"ARS","montoGasto":15.444,"monedaGasto":"1","identifierGasto":"ARS","balance":203.874},
{"periodo":"12","mes":"7","anio":"2016","montoIngreso":219.318,"monedaIngreso":"1","identifierIngreso":"ARS","montoGasto":"105002","monedaGasto":"2","identifierGasto":"USD","balance":-104782.682},
{"periodo":"12","mes":"7","anio":"2016","montoIngreso":"324342","monedaIngreso":"2","identifierIngreso":"USD","montoGasto":15.444,"monedaGasto":"1","identifierGasto":"ARS","balance":324326.556},
{"periodo":"12","mes":"7","anio":"2016","montoIngreso":"324342","monedaIngreso":"2","identifierIngreso":"USD","montoGasto":"105002","monedaGasto":"2","identifierGasto":"USD","balance":219340}]
And i have a var with the labels:
["2015-7", "2015-8", "2015-9", "2015-10", "2015-11", "2015-12", "2016-1", "2016-2", "2016-3", "2016-4", "2016-5", "2016-6", "2016-7"]
From the first json, there supposed to be three datasets "montoIngreso" "montoGasto" and "balance"
The problem is that for some of the labels, i have two values on the json, for instance
anio:2016 mes:7 have 4 records so i need to add each of them to form 3 unique datasets
how can i do this?
Thanks!

Ok its not fancy but:
var valoresIngresos = new Array(labels.length).fill(0);
var valoresGastos = new Array(labels.length).fill(0);
var valoresBalance = new Array(labels.length).fill(0);
for(var i=0;i<labels.length;i++) {
var fuentes = dataSource.filter(source=>(source.anio+"-"+source.mes) == labels[i]);
for(var j=0;j<fuentes.length;j++) {
valoresIngresos[i] = valoresIngresos[i]+parseFloat(fuentes[j].montoIngreso);
valoresGastos[i] = valoresGastos[i]+parseFloat(fuentes[j].montoGasto);
valoresBalance[i] = valoresBalance[i]+parseFloat(fuentes[j].balance);
}
}
var ingresosDataset = {
label: "Ingresos",
data:valoresIngresos,
backgroundColor: "rgba(38, 185, 154, 0.31)",
borderColor: "rgba(38, 185, 154, 0.7)",
pointBorderColor: "rgba(38, 185, 154, 0.7)",
pointBackgroundColor: "rgba(38, 185, 154, 0.7)",
pointHoverBackgroundColor: "#fff",
pointHoverBorderColor: "rgba(220,220,220,1)",
pointBorderWidth: 1,
};
datasets.push(ingresosDataset);

Chart.js change label font color

I have a simple chart using http://www.chartjs.org like :
<script>
var canvas = document.getElementById('myChart2');
var data = {
labels: ["Eating", "Drinking", "Sleeping", "Designing", "Coding", "Cycling", "Running"],
datasets: [{
label: "My First dataset",
backgroundColor: "rgba(179,181,198,0.2)",
borderColor: "rgba(179,181,198,1)",
pointBackgroundColor: "rgba(179,181,198,1)",
pointBorderColor: "#fff",
pointHoverBackgroundColor: "#fff",
pointHoverBorderColor: "rgba(179,181,198,1)",
data: [65, 59, 90, 81, 56, 55, 40]
}, {
label: "My Second dataset",
backgroundColor: "rgba(255,99,132,0.2)",
borderColor: "rgba(255,99,132,1)",
pointBackgroundColor: "rgba(255,99,132,1)",
pointBorderColor: "#fff",
pointHoverBackgroundColor: "#fff",
pointHoverBorderColor: "rgba(255,99,132,1)",
data: [28, 48, 40, 19, 96, 27, 100]
}]
};
var option = {
showLines: false
};
var myLineChart = Chart.Radar(canvas, {
data: data,
options: option
});
</script>
I'm looking for in the documentation but I don't find how to change all labels color ?
In my exemple I need to change color of labels: ["Eating", "Drinking", "Sleeping", "Designing", "Coding", "Cycling", "Running"] or label: "My First dataset",
Any ideas ?

/*Global settings*/
Chart.defaults.global.defaultFontColor = '#fff';

If anyone is using ng2-charts with Typescript:
in the Component:
private lineChartOptions:any = {
legend : {
labels : {
fontColor : '#ffffff'
}
}
};
In the template:
<canvas baseChart [options]="lineChartOptions"></canvas>