Related
Im trying to set multiple datasets in the area chart that will be created dynamically. The datasets are showing in the chart but for some reason, the default background color is not setting for the datasets that where put via my method. Everything else in the method seems to be setting correctly. The Background color is even set correctly in the legend background but it doesn't set on the graph
This is my function
function createNewDataset(data, labels) {
let newDataSet = [];
newDataSet['label'] = "Test";
newDataSet['lineTension'] = 0.3;
newDataSet['backgroundColor'] = "rgba(102,223,56,0.71)";
newDataSet['borderColor'] = "rgb(114,223,52)";
newDataSet['pointRadius'] = 3;
newDataSet['pointBackgroundColor'] = "rgb(91,223,88)";
newDataSet['pointBorderColor'] = "rgb(93,223,65)";
newDataSet['pointHoverRadius'] = 3;
newDataSet['pointHoverBackgroundColor'] = "rgb(89,223,47)";
newDataSet['pointHoverBorderColor'] = "rgb(125,223,72)";
newDataSet['pointHitRadius'] = 10;
newDataSet['pointBorderWidth'] = 2;
newDataSet['data'] = [0, 10000, 5000, 15000, 100000, 20000, 15000, 25000, 20000, 30000, 25000, 40000];
return newDataSet;
}
And this is the hardcoded creation of the dataset
function createLinechart(){
// Area Chart Example
var ctx = document.getElementById("myAreaChart");
var myLineChart = new Chart(ctx, {
type: 'line',
data: {
labels: ["2012", "2013", "2014", "2015", "2016", "2017", "2018", "2019", "Sep", "Oct", "Nov", "Dec"],
datasets: [
createNewDataset(),{
label: "Civic",
lineTension: 0.3,
backgroundColor: "rgba(222,43,223,0.25)",
borderColor: "rgb(223,40,38)",
pointRadius: 3,
pointBackgroundColor: "rgb(223,52,49)",
pointBorderColor: "rgb(223,82,31)",
pointHoverRadius: 3,
pointHoverBackgroundColor: "rgb(223,40,38)",
pointHoverBorderColor: "rgb(223,40,38)",
pointHitRadius: 10,
pointBorderWidth: 2,
data: [0, 10000, 5000, 15000, 10000, 20000, 15000, 25000, 20000, 30000, 25000, 40000],
},{ label: "Accord",
lineTension: 0.6,
backgroundColor: "rgba(82,119,223,0.54)",
borderColor: "rgba(78, 115, 223, 1)",
pointRadius: 3,
pointBackgroundColor: "rgba(78, 115, 223, 1)",
pointBorderColor: "rgba(78, 115, 223, 1)",
pointHoverRadius: 3,
pointHoverBackgroundColor: "rgba(78, 115, 223, 1)",
pointHoverBorderColor: "rgba(78, 115, 223, 1)",
pointHitRadius: 10,
pointBorderWidth: 2,
data: [0, 10000, 5000, 1000, 10000, 2000, 10000, 20000, 25000, 10000, 25000, 40000],}],
},
options: {
maintainAspectRatio: false,
layout: {
padding: {
left: 10,
right: 25,
top: 25,
bottom: 0
}
},
scales: {
xAxes: [{
time: {
unit: 'date'
},
gridLines: {
display: false,
drawBorder: false
},
ticks: {
maxTicksLimit: 7
}
}],
yAxes: [{
ticks: {
maxTicksLimit: 5,
padding: 10,
},
gridLines: {
color: "rgb(234, 236, 244)",
zeroLineColor: "rgb(234, 236, 244)",
drawBorder: false,
borderDash: [3],
zeroLineBorderDash: [2]
}
}],
},
legend: {
display: true
},
tooltips: {
backgroundColor: "rgb(255,255,255)",
bodyFontColor: "#858796",
titleMarginBottom: 10,
titleFontColor: '#6e707e',
titleFontSize: 14,
borderColor: '#dddfeb',
borderWidth: 1,
xPadding: 15,
yPadding: 15,
displayColors: false,
intersect: false,
mode: 'index',
caretPadding: 10,
}
}
});}
Here is an image of the chart.
The line that is popping out of the graph should have a green back ground color like shown in the legend.
![Line chart][1]: https://imgur.com/a/CdvSBPw
EDIT New image with dynamic data. They set everything right except for back ground color again
[Linchart][2]:https://imgur.com/a/6gSLqMp
Based on the current information it sounds like somehow the problem is specific to data coming from the function, although I don't see anything obviously wrong with the function. So instead I would try focusing on the general debugging strategy of simplifying the problem -- in this case simplifying the function to make it closer to the hardcoded data that is working as expected. I suggest something like this, which is about as simple as possible:
function createNewDataset(data, label) {
return {
// change to `label: label` once working:
label: "Test",
lineTension: 0.3,
backgroundColor: "rgba(102,223,56,0.71)",
borderColor: "rgb(114,223,52)",
pointRadius: 3,
pointBackgroundColor: "rgb(91,223,88)",
pointBorderColor: "rgb(93,223,65)",
pointHoverRadius: 3,
pointHoverBackgroundColor: "rgb(89,223,47)",
pointHoverBorderColor: "rgb(125,223,72)",
pointHitRadius: 10,
pointBorderWidth: 2,
// change to `data: data` once working:
data: [0, 10000, 5000, 15000, 100000, 20000, 15000, 25000, 20000, 30000, 25000, 40000]
};
}
I'm new to JS, I want to create a bar chart where the column with the max value has a different color compared to the others. I can create the chart but I don't manage to access the single column properties. I have been looking for answers on the web but none of the solutions I have found so far helped me. The workflow is the following:
I ask the user for a text input,
Once the user press a button the script calls a function in python (I use python flask) that returns me an array of values and labels,
Then a chart appears on the webpage with these values and labels.
Everything works fine, I'm just not able to change the color of a single bar.
Here is the JS:
$(function() {
$('a#process_input').bind('click', function() {
$.getJSON('/background_process', {
smile: $('input[name="text_string"]').val(),
}, function(data) {
$("#result").text(data.output);
var labels = data.labels;
var values = data.values;
Chart.defaults.global.responsive = false;
var chartData = {
labels : labels,
datasets : [{
label: 'data_label',
fill: true,
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 : values,
scaleShowLabels: true,
spanGaps: false
}]
}
// get chart canvas
var ctx = document.getElementById("myCanvas").getContext("2d");
// create the chart using the chart canvas
var myChart = new Chart(ctx, {
type: 'bar',
data: chartData,
options: {
scaleShowValues: true,
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}],
xAxes: [{
ticks: {
autoSkip: false
}
}]
}
}
});
});
});
});
Here is an example of what I mean:
I think the easiest way to do it is by defining backgroundColor for each bars. Then you can find the max index and change the color. Here is a simplified example:
function argMax(array) {
return array.map((x, i) => [x, i]).reduce((r, a) => (a[0] > r[0] ? a : r))[1];
}
// dummy data
var data = [12, 19, 1, 14, 3, 10, 9];
var labels = data.map((x, i) => i.toString());
// other data color
var color = data.map(x => 'rgba(75,192,192,0.4)');
// change max color
color[argMax(data)] = 'red';
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: labels,
datasets: [{
label: 'value',
data: data,
backgroundColor: color,
}]
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.0.0-beta/Chart.js"></script>
<canvas id="myChart" width="600" height="300"></canvas>
backgroundColor: "rgba(75,192,192,0.4)"
instead of giving it a single color, you can add an array:
backgroundColor:["rgba(255, 99, 132, 0.2)","rgba(255, 159, 64, 0.2)","rgba(255, 205, 86, 0.2)"]
Example:
new Chart(document.getElementById("chartjs-1"), {
"type": "bar",
"data": {
"labels": ["First", "Second", "Third", "Fourth"],
"datasets": [{
"label": "Example Dataset",
"data": [65, 59, 80, 31],
"fill": false,
"backgroundColor": ["rgba(255, 99, 132, 0.2)", "rgba(255, 159, 64, 0.2)", "rgba(255, 99, 132, 0.2)", "rgba(255, 99, 132, 0.2)"],
"borderColor": ["rgb(255, 99, 132)", "rgb(255, 159, 64)", "rgb(255, 99, 132)", "rgb(255, 99, 132)"],
"borderWidth": 1
}]
},
"options": {
"scales": {
"yAxes": [{
"ticks": {
"beginAtZero": true
}
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
<canvas id="chartjs-1" class="chartjs">https://stackoverflow.com/posts/51843404/edit#
In the documentation [] denotes which properties accept also arrays (backgroundColor - Color/Color[])
I'm trying to display two datasets in a line graph but animating the second dataset some seconds after the first one.
I'm using the CHART.JS version 2.6.0 and I saw a lot of samples using previous versions (1.xx), but all of them does not function in this new version cause API had changed.
I tried the documentation (see here) but it is really very poor to newbies, since the ANIMATION event doc has only a single basic sample.
WHat I want to do is basically this:
var ctx = document.getElementById("myChart").getContext("2d");
var data = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [{
label: "My First dataset",
fillColor: "rgba(220,220,220,0.2)",
data: [65, 0, 80, 81, 56, 85, 40]
},
{
label: "My Second dataset",
fillColor: "rgba(151,187,205,0.2)",
data: [0, 0, 0, 0, 0, 0, 0]
}
]
};
var data2 = [28, 48, 40, 19, 86, 27, 90];
var done = false;
var myLineChart = new Chart(ctx).Line(data, {
animationEasing: 'linear',
onAnimationComplete: function () {
if (!done) {
myLineChart.datasets[1].points.forEach(function (point, i) {
point.value = data2[i];
});
myLineChart.update();
done = true;
}
}
});
You can see this code functioning here, but this sample does not function in version 2.6, even if adapting it to the new syntax.
So, can you help me to achieve the same effect using the Chart.JS 2.6?
Thanks in advance!
SOLUTION for ChartJS v2.6
var done = false;
var data2 = [28, 48, 40, 19, 86, 27, 90];
var ctx = document.getElementById("myChart").getContext("2d");
var myLineChart = new Chart(ctx, {
type: 'line',
data: {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [{
label: "My First dataset",
backgroundColor: "rgba(220,220,220,0.2)",
borderColor: "rgba(220,220,220,1)",
pointBackgroundColor: "rgba(220,220,220,1)",
pointBorderColor: "#fff",
pointHoverBackgroundColor: "#fff",
pointHoverBorderColor: "rgba(220,220,220,1)",
data: [65, 0, 80, 81, 56, 85, 40]
}, {
label: "My Second dataset",
backgroundColor: "rgba(151,187,205,0.2)",
borderColor: "rgba(151,187,205,1)",
pointBackgroundColor: "rgba(151,187,205,1)",
pointBorderColor: "#fff",
pointHoverBackgroundColor: "#fff",
pointHoverBorderColor: "rgba(151,187,205,1)",
data: [0, 0, 0, 0, 0, 0, 0]
}]
},
options: {
animation: {
easing: 'linear',
onComplete: function(e, i) {
if (!done) {
this.data.datasets[1].data = data2;
/* we need to update chart within setTimeout,
as there seems to be an issue when updating the chart
at first animation onComplete function call */
setTimeout(function() {
this.update();
}.bind(this), 100);
done = true;
}
}
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<canvas id="myChart" height="300" width="800"></canvas>
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.
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>