Related
while filling the color between 2 line series the fill color overlaps the point.
https://codesandbox.io/s/react-chartjs-2-line-chart-example-forked-5ruj86
I having this issue in version 3.6.0.
Just add order property to the first dataset. Documentation
const data = {
labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"],
datasets: [
{
data: [1000000, 900000, 800000, 750000, 700000, 650000, 600000],
color: "#008484",
backgroundColor: "#A5E1D2",
pointBorderColor: "#007B5E",
pointBackgroundColor: "#ffffff",
borderColor: "#008484",
fill: 1,
borderWidth: 3,
pointRadius: 5,
pointHoverRadius: 5,
pointBorderRadius: 5,
order: 1
},
{
data: [800000, 700000, 600000, 550000, 500000, 450000, 400000],
color: "#002E2E",
backgroundColor: "#A5E1D2",
pointBorderColor: "#002E2E",
pointBackgroundColor: "#ffffff",
borderColor: "#002E2E",
fill: 1,
borderWidth: 3,
pointRadius: 5,
pointHoverRadius: 5,
pointBorderRadius: 5
}
]
};
Checkout the codesandbox
I have 2 charts with different data, stacked on top of each other. How do I make those 2 charts share the same scale of 1 y-axis?
I configured the y-Axis as follow:
yAxes: [{
display: true,
stacked: true,
type: "linear",
scaleLabel: {
display: true,
labelString: "Amount in USD"
},
ticks: {
beginAtZero: true,
max: 150000,
callback: function(label, index, labels) {
return label / 1000 + "k";
}
}
}]
And the data set as follow:
labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
backgroundColor: "#FFE0B2",
datasets: [{
label: "Amount of Sales - YTD",
data: [0, 0, 0, 0, 0, 0, 0, 104920, 87461, 22700, 0, 0],
backgroundColor: [
"#FFE0B2"
],
borderColor: [
"#FF9800"
],
borderWidth: 1,
pointBackgroundColor: "#FFE0B2",
pointBorderColor: "#FF9800",
pointBorderWidth: 2
}, {
label: "Amount of Commission - YTD",
data: [0, 0, 0, 0, 0, 0, 0, 1896, 4373, 1135, 0, 0],
backgroundColor: [
"#F8BBD0"
],
borderColor: [
"#E91E63"
],
borderWidth: 1,
pointBackgroundColor: "#F8BBD0",
pointBorderColor: "#E91E63",
pointBorderWidth: 2
}]
Please have a look at: https://jsfiddle.net/pyzaq4j3/
As you can see, in August, the point (orange) is set at ~100k, which is correct.
However, the point (pink) has the value of only ~1.8k, and the point is almost at ~100k, according to the graph.
Question: How do I set it so that the pink graph shares the same y-axis as the orange graph?
The problem is with this line in the y-axis:
stacked: true,
If you'll remove it, it won't stack the values together.
However, since you specified backgroundColor on your datasets, and the first dataset is "Amount of Sales - YTD" which has higher values, it will block the visual of your second dataset.
I have a simple line chart and I have problem when two or more points are too closer. The problem is: The tooltip show one point and the click function is for other point.
In this exemple you can see that when I click on the first point on the red line (value 2) the click event is for the black line (value 0)
Exemple:
https://codepen.io/ataufo/pen/NexppY
var canvas = document.getElementById("lineChart");
var ctx = canvas.getContext('2d');
var data = {
labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
datasets: [{
label: "Stock A",
fill: false,
lineTension: 0.1,
backgroundColor: "rgba(225,0,0,0.4)",
borderColor: "red",
borderCapStyle: 'square',
pointBorderWidth: 0.1,
pointHoverRadius: 6,
pointHoverBorderWidth: 2,
pointRadius: 1,
data: [2, 59, 80, 81, 56],
spanGaps: false,
datalabels: {
enabled: true,
allowOverlap: true,
display: true,
listeners: {
click: function(context) {
alert(context.dataIndex + " Red line");
}
}
}
}, {
label: "Stock B",
fill: false,
lineTension: 0.1,
backgroundColor: "black",
borderColor: "black",
borderCapStyle: 'square',
pointBorderWidth: 0.1,
pointHoverRadius: 6,
pointHoverBorderWidth: 2,
pointRadius: 1,
data: [0, 20, 60, 95, 64],
spanGaps: false,
datalabels: {
enabled: true,
allowOverlap: true,
display: true,
listeners: {
click: function(context) {
alert(context.dataIndex + " Black Line");
}
}
}
}
]
};
// Chart declaration:
var myBarChart = new Chart(ctx, {
showTooltips: false,
type: 'line',
data: data
});
Does anyone have one idea to solve that?
You explicitly reference dataset 0. You need to pass the dataset index like so:
canvas.onclick = function(evt) {
var activePoints = myLineChart.getElementAtEvent(evt);
//console.log(activePoints);
if (activePoints[0]) {
var chartData = activePoints[0]['_chart'].config.data;
var idx = activePoints[0]['_index'];
var label = chartData.labels[idx];
// change the following line...
//var value = chartData.datasets[0].data[idx];
// to this:
var value = chartData.datasets[activePoints[0]._chart.tooltip._active[0]._datasetIndex].data[idx];
var url = "Mês:" + label + " Valor: " + value;
alert(url);
}
};
Edit: Fully working example.
var canvas = document.getElementById("lineChart");
var ctx = canvas.getContext('2d');
canvas.onclick = function(evt) {
var activePoints = myLineChart.getElementAtEvent(evt);
console.log(activePoints);
if (activePoints[0]) {
var chartData = activePoints[0]['_chart'].config.data;
var idx = activePoints[0]['_index'];
var label = chartData.labels[idx];
//var value = chartData.datasets[0].data[idx];
var value = chartData.datasets[activePoints[0]._chart.tooltip._active[0]._datasetIndex].data[idx];
var url = "Mês:" + label + " Valor: " + value;
alert(url);
}
};
var data = {
labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
datasets: [{
label: "Stock A",
fill: false,
lineTension: 0.1,
backgroundColor: "rgba(225,0,0,0.4)",
borderColor: "red",
borderCapStyle: 'square',
pointBorderWidth: 0.1,
pointHoverRadius: 6,
pointHoverBorderWidth: 2,
pointRadius: 1,
data: [2, 59, 80, 81, 56],
spanGaps: false
}, {
label: "Stock B",
fill: false,
lineTension: 0.1,
backgroundColor: "black",
borderColor: "black",
borderCapStyle: 'square',
pointBorderWidth: 0.1,
pointHoverRadius: 6,
pointHoverBorderWidth: 2,
pointRadius: 1,
data: [0, 20, 60, 95, 64],
spanGaps: false
}
]
};
// Chart declaration:
var myLineChart = new Chart(ctx, {
type: 'line',
data: data,
options: {
tooltips: {
enabled: true
}
}
});
body{
background-color: #666;
}
#lineChart{
background-color: wheat;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script>
<div class="container">
<br />
<div class="row">
<div class="col-md-1"></div>
<div class="col-md-10">
<!-- Chart.js Canvas Tag -->
<canvas id="lineChart"></canvas>
</div>
<div class="col-md-1"></div>
</div>
</div>
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 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.