The tooltip is showing details of only on data point instead of showing all values which are under the label. I want to show all details in the toolbar, let's say when user hover on the point which has label 1 then it's should show following in the tooltip. here is the jsbin.
1
Prime and Fibonacci: 2
My Second dataset: 2
<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Line Chart Test</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.0.2/Chart.min.js"></script>
<script language="JavaScript"><!--
function displayLineChart() {
var data = {
labels: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
datasets: [
{
label: "Prime and Fibonacci",
fillColor: "rgba(220,220,220,0.2)",
strokeColor: "rgba(220,220,220,1)",
pointColor: "rgba(220,220,220,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(220,220,220,1)",
data: [2, 3, 5, 7, 11, 13, 17, 19, 23, 29]
},
{
label: "My Second dataset",
fillColor: "rgba(151,187,205,0.2)",
strokeColor: "red",
pointColor: "rgba(151,187,205,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(151,187,205,1)",
data: [2, 3, 5, 7, 11, 13, 17, 13, 21, 34]
}
]
};
var holder = document.getElementById('lineChart');
var options = {};
new Chart(holder, {
type: 'line',
data: data,
options: {
responsive: true
}
});
}
--></script>
</head>
<body onload="displayLineChart();">
<div class="box">
<canvas id="lineChart" height="450" width="800"></canvas>
</div>
</body>
</html>
You can use a tooltip call back function, read thread here. I have updated your function below and you are ready to go. Good luck!
function displayLineChart() {
var data = {
labels: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
datasets: [
{
label: "Prime and Fibonacci",
fillColor: "rgba(220,220,220,0.2)",
strokeColor: "rgba(220,220,220,1)",
pointColor: "rgba(220,220,220,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(220,220,220,1)",
data: [2, 3, 5, 7, 11, 13, 17, 19, 23, 29]
},
{
label: "My Second dataset",
fillColor: "rgba(151,187,205,0.2)",
strokeColor: "red",
pointColor: "rgba(151,187,205,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(151,187,205,1)",
data: [2, 3, 5, 7, 11, 13, 17, 13, 21, 34]
}
]
};
var holder = document.getElementById('lineChart');
var options = {};
new Chart(holder, {
type: 'line',
data: data,
options: {
responsive: true,
tooltips: {
callbacks: {
label: function(tooltipItem, data) {
console.log(tooltipItem);
console.log( data.datasets[0])
var value = data.datasets[0].data[tooltipItem.index];
var label = data.labels[tooltipItem.index];
var datah = [];
datah.push(data.datasets[0].label + ' ' + value);
datah.push(data.datasets[1].label + ' ' + value);
return datah;
}
}
}
}
});
}
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 a multi line linear chart made with Chart.js like this:
var ctx = document.getElementById("myChart").getContext("2d");
const colors = {
green: {
fill: '#e0eadf',
stroke: '#5eb84d',
},
lightBlue: {
stroke: '#6fccdd',
},
darkBlue: {
fill: '#92bed2',
stroke: '#3282bf',
},
purple: {
fill: '#8fa8c8',
stroke: '#75539e',
},
};
const loggedIn = [26, 36, 42, 38, 40, 30, 12];
const available = [34, 44, 33, 24, 25, 28, 25];
const availableForExisting = [16, 13, 25, 33, 40, 33, 45];
const unavailable = [5, 9, 10, 9, 18, 19, 20];
const xData = [13, 14, 15, 16, 17, 18, 19];
const myChart = new Chart(ctx, {
type: 'line',
data: {
labels: xData,
datasets: [{
label: "Unavailable",
fill: true,
backgroundColor: colors.purple.fill,
pointBackgroundColor: colors.purple.stroke,
borderColor: colors.purple.stroke,
pointHighlightStroke: colors.purple.stroke,
borderCapStyle: 'butt',
data: unavailable,
}, {
label: "Available for Existing",
fill: true,
backgroundColor: colors.darkBlue.fill,
pointBackgroundColor: colors.darkBlue.stroke,
borderColor: colors.darkBlue.stroke,
pointHighlightStroke: colors.darkBlue.stroke,
borderCapStyle: 'butt',
data: availableForExisting,
}, {
label: "Available",
fill: true,
backgroundColor: colors.green.fill,
pointBackgroundColor: colors.lightBlue.stroke,
borderColor: colors.lightBlue.stroke,
pointHighlightStroke: colors.lightBlue.stroke,
borderCapStyle: 'butt',
data: available,
}, {
label: "Logged In",
fill: true,
backgroundColor: colors.green.fill,
pointBackgroundColor: colors.green.stroke,
borderColor: colors.green.stroke,
pointHighlightStroke: colors.green.stroke,
data: loggedIn,
}]
},
options: {
responsive: false,
// Can't just just `stacked: true` like the docs say
scales: {
yAxes: [{
stacked: true,
}]
},
animation: {
duration: 750,
},
}
});
<script src="https://cdn.jsdelivr.net/npm/chart.js#2.8.0"></script>
<canvas id="myChart" width="400" height="400"></canvas>
My problem is that when I go over a point all points on that column activate.
I want to activate just the single point on the selected line.
So, just to be clear, this is what I have now: Actual Behaviour
And this is what i want: Expected Behaviour
Anyone could help me on this?
You need to set the hover interaction mode option like so:
options: {
hover: {
mode: 'nearest'
}
}
Working example:
var ctx = document.getElementById("myChart").getContext("2d");
const colors = {
green: {
fill: '#e0eadf',
stroke: '#5eb84d',
},
lightBlue: {
stroke: '#6fccdd',
},
darkBlue: {
fill: '#92bed2',
stroke: '#3282bf',
},
purple: {
fill: '#8fa8c8',
stroke: '#75539e',
},
};
const loggedIn = [26, 36, 42, 38, 40, 30, 12];
const available = [34, 44, 33, 24, 25, 28, 25];
const availableForExisting = [16, 13, 25, 33, 40, 33, 45];
const unavailable = [5, 9, 10, 9, 18, 19, 20];
const xData = [13, 14, 15, 16, 17, 18, 19];
const myChart = new Chart(ctx, {
type: 'line',
data: {
labels: xData,
datasets: [{
label: "Unavailable",
fill: true,
backgroundColor: colors.purple.fill,
pointBackgroundColor: colors.purple.stroke,
borderColor: colors.purple.stroke,
pointHighlightStroke: colors.purple.stroke,
borderCapStyle: 'butt',
data: unavailable,
}, {
label: "Available for Existing",
fill: true,
backgroundColor: colors.darkBlue.fill,
pointBackgroundColor: colors.darkBlue.stroke,
borderColor: colors.darkBlue.stroke,
pointHighlightStroke: colors.darkBlue.stroke,
borderCapStyle: 'butt',
data: availableForExisting,
}, {
label: "Available",
fill: true,
backgroundColor: colors.green.fill,
pointBackgroundColor: colors.lightBlue.stroke,
borderColor: colors.lightBlue.stroke,
pointHighlightStroke: colors.lightBlue.stroke,
borderCapStyle: 'butt',
data: available,
}, {
label: "Logged In",
fill: true,
backgroundColor: colors.green.fill,
pointBackgroundColor: colors.green.stroke,
borderColor: colors.green.stroke,
pointHighlightStroke: colors.green.stroke,
data: loggedIn,
}]
},
options: {
responsive: false,
// Can't just just `stacked: true` like the docs say
scales: {
yAxes: [{
stacked: true,
}]
},
animation: {
duration: 750,
},
hover: {
mode: 'nearest'
},
}
});
<script src="https://cdn.jsdelivr.net/npm/chart.js#2.8.0"></script>
<canvas id="myChart" width="400" height="400"></canvas>
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 am using Chart JS for the first time and I wanted to show multiple data points for the same label. Can I do this without creating multiple datasets each time. Also, I will know the number of datasets only on run time.
Use case: For each point on x-axis(label) plot multiple points on y-axis
Right now I am doing something like this
var ctx = $(element);
var myChart = new Chart(ctx, {
type: graphType,
data: {
labels: labels,
datasets: [
{
label: labelTeacher,
fill: false,
lineTension: 0.1,
backgroundColor: "rgba(100,149,237,0.5)",
borderColor: "rgba(100,149,237,1)",
borderCapStyle: 'butt',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderColor: "rgba(58,95,205,1)",
pointBackgroundColor: "#fff",
pointBorderWidth: 1,
pointHoverRadius: 5,
pointHoverBackgroundColor: "rgba(100,149,237,1)",
pointHoverBorderColor: "rgba(220,220,220,1)",
pointHoverBorderWidth: 2,
pointRadius: 1,
pointHitRadius: 10,
data: [65, 59, 90, 81, 56, 55, 40]
},
{
label: labelVedantu,
fill: false,
lineTension: 0.1,
backgroundColor: "rgba(255,165,0,0.5)",
borderColor: "rgba(255,165,0,1)",
borderCapStyle: 'butt',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderColor: "rgba(255,165,0,1)",
pointBackgroundColor: "rgba(255,255,255,1)",
pointBorderWidth: 1,
pointHoverRadius: 5,
pointHoverBackgroundColor: "rgba(255,165,0,1)",
pointHoverBorderColor: "rgba(250,228,196,1)",
pointHoverBorderWidth: 2,
pointRadius: 1,
pointHitRadius: 10,
data: [28, 48, 40, 19, 96, 27, 100]
}
]
},
Let us say I have multiple data arrays for the same label set, is there a way to do it without adding a new dataset each time
When you say 'show', are you referring to in how the chart renders, or in the "tooltips" that appear when you hover over the chart?
If the latter, check out the mode:'index' setting for options/tooltips, as described here:
http://www.chartjs.org/docs/latest/general/interactions/modes.html#interaction-modes
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.