Related
Good evening,
There's any way to alternate the chart's backgroud color for each dataSet of a result?
That's how I wish it.
enter image description here
Alternate background may be created with the use of chartjs-plugin-annotation.
Please have a look at the code snippet below that has been derived from the example code provided by the contributors of chartjs-plugin-annotation.
This code works with Chart.js 2.6.0 and it still produces a script error that may be ignored. Unfortunately I couldn't make it work with the newest version of Chart.js (currently 2.9.3) yet and I don't have time now to further investigate.
const labels = ["January", "February", "March", "April", "May", "June", "July"];
const annotations = [];
for (let i = 0; i < labels.length; i++) {
if (i % 2 == 0) {
annotations.push({
drawTime: "beforeDatasetsDraw",
type: "box",
xScaleID: "x-axis-0",
yScaleID: "y-axis-0",
xMin: labels[i],
xMax: labels[i + 1],
backgroundColor: "rgba(128, 128, 128, 0.5)",
borderColor: "rgb(128, 128, 128)",
borderWidth: 1
});
}
};
new Chart('chart', {
type: "bar",
data: {
labels: labels,
datasets: [{
label: "Dataset 1",
backgroundColor: 'red',
data: [95, 70, 55, -88, -64, 34, -55],
categoryPercentage: 1,
barPercentage: 0.8
},
{
label: "Dataset 2",
backgroundColor: 'green',
data: [81, 58, 30, -91, -74, 20, -40],
categoryPercentage: 1,
barPercentage: 0.9
}
]
},
options: {
responsive: true,
tooltips: {
mode: "index",
intersect: true
},
annotation: {
annotations: annotations
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-annotation/0.5.7/chartjs-plugin-annotation.js"></script>
<canvas id="chart" height="90"></canvas>
we can use annotation plugin to do this
import annotationPlugin from "chartjs-plugin-annotation";
import {Chart} from 'chart.js';
Chart.register(annotationPlugin);
this code will add a box to our chart
{
type: 'box', #type of draw
drawTime: 'beforeDraw', #this will decide background or foreground
yMin: 5, #value min on y axis
yMax: 10, #value max on y axis
borderColor: 'rgb(242, 244, 248, 0.9)', #border color of the box
borderWidth: 1, #boarder width for box
backgroundColor: '#F2F4F8', #colour of the box
}
Out of this code
refer to this post here on how to do this: https://medium.com/#omi10859/alternative-background-lines-in-chartjs-a626ce4d3bcb
I am using ChartJS 2.4 and I want to predefine lots of settings in the datasets already. But use an empty data array and an undefined label. Now I want to stop ChartJS from rendering the legend which is then shown as "null" or "undefined". Later I am setting a proper label and start to push data to the dataSet and finally call update() on the chart which works fine.
Here is a basic fiddle with this code:
var data = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [
{
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: 5,
pointHitRadius: 10,
data: [],
}
]
};
var myLineChart = new Chart("myChart", {
type: "line",
data: data
});
setTimeout(function(){
data.datasets[0].label = "The Label"
data.datasets[0].data.push(10, 20)
myLineChart.update()
}, 2000)
I have tried to overwrite generateLabels but I had no luck with that. And the setting dateaset.hidden only strikes through the legend if true but not really "hides".
EDIT 1: On the other hand setting options.legend.display to false hides all the legends and for ever, this is also not what I need.
Let us create a plugin that, at the start of every update, decides whether to display the legend or not based on whether the label of the first dataset is (respectively) defined or not. The autoDisplayLegend chart option enables the plugin, if set to true.
A working fiddle is here. The code is also available below.
var autoDisplayLegendPlugin = {
// Called at start of update.
beforeUpdate: function(chartInstance) {
if (chartInstance.options.autoDisplayLegend) {
// The first (and, assuming, only) dataset.
var dataset = chartInstance.data.datasets[0];
if (dataset.label)
chartInstance.options.legend.display = true;
else
chartInstance.options.legend.display = false;
}
}
};
Chart.pluginService.register(autoDisplayLegendPlugin);
var data = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [{
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: 5,
pointHitRadius: 10,
data: [],
}]
};
var myLineChart = new Chart("myChart", {
type: "line",
data: data,
options: {
// Option to auto display the legend.
autoDisplayLegend: true
}
});
setTimeout(function() {
data.datasets[0].label = "The Label"
data.datasets[0].data.push(10, 20)
myLineChart.update()
}, 2000)
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.bundle.js"></script>
<canvas id="myChart" width="400" height="250"></canvas>
if you want, you can delete the dataset so the legend will not display:
var autoDisplayLegendPlugin = {
beforeUpdate: function(chartInstance) {
if (chartInstance.canvas.id == 'chart6') {
// The first (and, assuming, only) dataset.
var dataset = chartInstance.data.datasets[2];
if (dataset.data.length != 0){ // delete only if there is no data in dataset
console.log(chartInstance);
chartInstance.options.legend.display = true;
}
else{
chartInstance.options.legend.display = true;
chartInstance.data.datasets.pop(); // if is the last datasets you don't want the legend to appear
}
}
}};
You can filter the labels and use that to remove a falsy text
const data = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [{
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: 5,
pointHitRadius: 10,
data: [],
}]
};
const myLineChart = new Chart("myChart", {
type: "line",
data: data,
options: {
plugins: {
legend: {
labels: {
filter: (legendItem) => (!!legendItem.text)
}
}
}
}
});
setTimeout(function() {
data.datasets[0].label = "The Label"
data.datasets[0].data.push(10, 20)
myLineChart.update()
}, 2000)
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.js"></script>
<canvas id="myChart" width="400" height="250"></canvas>
The main reason is ,it's showing
undefined
because you haven't defined the label property for your datasets.
datasets: [{
data: [1,2,6,3,8,9,5],
label:'your label',
borderColor: "red",
fill: false
}]
i want to create multi line chart using ChartJS. multi line chart is working fine. but tool-tip only i am getting problem. please check below code and image.
var ctx = document.getElementById("myChart").getContext("2d");
var data = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
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: [65, 59, 80, 81, 56, 55, 40],
spanGaps: false,
},
{
label: "My Second dataset",
fill: false,
lineTension: 0.1,
backgroundColor: "rgba(255, 99, 132, 1)",
borderColor: "rgba(255, 99, 132, 1)",
borderCapStyle: 'butt',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderColor: "rgba(255, 99, 132, 1)",
pointBackgroundColor: "#fff",
pointBorderWidth: 1,
pointHoverRadius: 5,
pointHoverBackgroundColor: "rgba(255, 99, 132, 1)",
pointHoverBorderColor: "rgba(255, 99, 132, 1)",
pointHoverBorderWidth: 2,
pointRadius: 1,
pointHitRadius: 10,
data: [40, 59, 80, 100, 56, 80, 70],
spanGaps: false,
}
]
};
var myLineChart = new Chart(ctx, {
type: 'line',
data: data
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>
<canvas id="myChart" width="400" height="400"></canvas>
January month i have two data ["My first dataset":65, "My Second Dataset": 40] so tool-tip showing correctly but in march month i have two data ["My first dataset":80, "My Second Dataset": 80] but tool-tip showing only "My First dataset" value only so i m not able to find "My Second Dataset" value.
I tried like this. now its working fine
options: {
tooltips: {
mode: 'label'
}
}
I would like to change font size and border colors for this chart. Hence I don't know how to do it, I tried to put these options at different places but nothing seems to work. I can't get the logic of the binding between angular-chart options and Chart.js options, is there a common way to manipulate them?
Here's the directive:
<canvas class="chart chart-line" chart-y-axes="axes" chart-data="data" chart-labels="labels"
chart-series="series" chart-options="options" chart-legend="true" chart-colours="colours"></canvas>
Here are the scope definitions:
$scope.labels = ["January", "February", "March", "April", "May", "June", "July"];
$scope.series = ['Series A', 'Series B'];
$scope.axes = ["y-axis-1", "y-axis-2"];
$scope.data = [
[65, 59, 80, 81, 56, 55, 40],
[28, 48, 40, 19, 86, 27, 90]
];
$scope.colours = [{
fillColor: 'rgba(151,187,205,0.2)',
strokeColor: 'rgba(151,187,205,1)',
pointColor: 'rgba(151,187,205,1)',
pointStrokeColor: '#fff',
pointHighlightFill: '#fff',
pointHighlightStroke: 'rgba(151,187,205,0.8)'
}]
$scope.options = {
datasetFill: false,
showLines: true,
elements:
{
line:
{
fill: false,
tension: 0.0001
},
point:
{
radius: 0
}
},
scales:
{
yAxes: [
{
type:"linear",
id:$scope.axes[0],
gridLines:
{
display: false
}
},
{
type:"linear",
id:$scope.axes[1],
position: "right",
gridLines:
{
display: false
},
scaleLabel:
{
display: true
}
}]
},
};
Changing the colors through chart-colors just doesn't work.
Since you have 2 series, make sure you have 2 entries in $scope.colours i.e.
...
$scope.colours = [{
fillColor: 'rgba(151,187,205,0.2)',
strokeColor: 'red',
pointColor: 'rgba(151,187,205,1)',
pointStrokeColor: '#fff',
pointHighlightFill: '#fff',
pointHighlightStroke: 'rgba(151,187,205,0.8)'
}, {
fillColor: 'rgba(151,187,205,0.2)',
strokeColor: 'blue',
pointColor: 'rgba(151,187,205,1)',
pointStrokeColor: '#fff',
pointHighlightFill: '#fff',
pointHighlightStroke: 'rgba(151,187,205,0.8)'
}]
...
Fiddle - http://jsfiddle.net/cpdh1g19/ (the color for the first line will change after 2 seconds)
By the look of the options, you're using chart.js 2.0, you need to use the latest angular-chart.js.
Note the attribute is now chart-colors and the color properties have changed in chart.js 2.0.
Using chart.js 2.0.0-beta2.
Using this syntax to instantiate a bar chart, taken from the documentation, works great:
var ctx = document.getElementById('barChart').getContext('2d');
var myBarChart = new Chart(ctx).Bar(barChartData);
Am trying instead the following since I want eventually to use logarithmic axes (and a lot of other options), which seems to require this style:
var ctx = document.getElementById('barChart').getContext('2d');
var myBarChart = new Chart(ctx, {
type: 'Bar',
data: barChartData
});
That doesn't seem to work, no chart drawn, no JS error in the console.
Thanks for any help. Also thanks to the people working on chart.js.
What is in barChartData?
It should look something like this (from the documentation):
var data = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [
{
label: "My Second dataset",
backgroundColor: "rgba(220,220,220,0.2)",
borderColor: "rgba(220,220,220,1)",
borderWidth: 1,
hoverBackgroundColor: "rgba(220,220,220,0.2)",
hoverBorderColor: "rgba(220,220,220,1)",
data: [28, 48, 40, 19, 86, 27, 90]
},
// Additional data sets go here.
],
};
http://nnnick.github.io/Chart.js/docs-v2/#bar-chart-example-usage
Edit -
Change
type: 'Bar',
to
type: 'bar',
Edit #2 -
You can confirm your using the correct version of Chart.JS by pulling 2.0 beta 2 from here:
https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.0.0-beta2/Chart.min.js