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'
}
}
Related
I have problem getting dataset 2 (Score) to use the y1 scale, it seems to use scale for first dataset. Where is the error? I thought that using two y-scales should solve the problem with two very different datasets, but i only get the values from the "Completed" dataset, so I assume the data for "score" is there, but way way above the scale. . .
const CHART = document.getElementById("statChart");
let statChart = new Chart(CHART, {
type: 'line',
data: {
labels: ["1", "2", "3", "4", "5", "6", "7"],
datasets: [
{
type: 'line',
label: "Completed",
yAxesID: 'y',
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,
pointHitRadius: 10,
data: [65, 59, 80, 81, 56, 55, 40]
},
{
type: 'line',
label: "Score",
yAxesID: 'y1',
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,
pointHitRadius: 10,
data: [8500, 8900, 8000, 8100, 5600, 5500, 4900]
}
]},
options: {
responsive: true,
interaction: {
mode: 'index',
intersect: false,
},
plugins:{
title: {
display: true,
text: 'Your Result'
},
tooltips: {
mode: 'nearest',
intersect: true,
},},
scales: {
y: {
type: 'linear',
display: true,
position: 'left',
min: 0,
max: 100
},
y1: {
type: 'linear',
display: true,
position: 'right',
min: 0,
max: 10000,
// grid line settings
grid: {
drawOnChartArea: false, // only want the grid lines for one axis to show up
}
}
}
}
});
You have a typo, yAxesID should be yAxisID if you change that it will work fine as you can see in the example below:
const CHART = document.getElementById("statChart");
let statChart = new Chart(CHART, {
type: 'line',
data: {
labels: ["1", "2", "3", "4", "5", "6", "7"],
datasets: [{
type: 'line',
label: "Completed",
yAxisID: 'y',
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,
pointHitRadius: 10,
data: [65, 59, 80, 81, 56, 55, 40]
},
{
type: 'line',
label: "Score",
yAxisID: 'y1',
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,
pointHitRadius: 10,
data: [8500, 8900, 8000, 8100, 5600, 5500, 4900]
}
]
},
options: {
responsive: true,
interaction: {
mode: 'index',
intersect: false,
},
plugins: {
title: {
display: true,
text: 'Your Result'
},
tooltips: {
mode: 'nearest',
intersect: true,
},
},
scales: {
y: {
type: 'linear',
display: true,
position: 'left',
min: 0,
max: 100
},
y1: {
type: 'linear',
display: true,
position: 'right',
min: 0,
max: 10000,
// grid line settings
grid: {
drawOnChartArea: false, // only want the grid lines for one axis to show up
}
}
}
}
});
<body>
<canvas id="statChart" width="600" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.0.2/chart.js" integrity="sha512-n8DscwKN6+Yjr7rI6mL+m9nS4uCEgIrKRFcP0EOkIvzOLUyQgOjWK15hRfoCJQZe0s6XrARyXjpvGFo1w9N3xg==" crossorigin="anonymous"></script>
</body>
I am new to chart.js I want to draw a circle inside bar charts or at baseline like the picture circle in blue color below how can I achieve this
help me thanks in advance
In your existing bar chart configuration, you can define a second dataset of type: 'scatter' as follows:
{
type: 'scatter',
data: [0, 0, 0, 0, 0, 0, 0],
backgroundColor: "rgb(0, 0, 255)",
borderColor: "rgb(255, 255, 255)",
pointRadius: 7,
pointHoverRadius: 7,
borderWidth: 2
}
Please take a look at the runnable code below and see how it works.
new Chart("chart", {
type: "bar",
data: {
labels: ["A", "B", "C", "D", "E", "F", "G"],
datasets: [{
data: [65, 59, 80, 81, 56, 55, 40],
barPercentage: 0.5,
backgroundColor: "rgba(201, 203, 207, 0.2)",
borderColor: "rgb(201, 203, 207)",
borderWidth: 1
},
{
type: 'scatter',
data: [0, 0, 0, 0, 0, 0, 0],
backgroundColor: "rgb(0, 0, 255)",
borderColor: "rgb(255, 255, 255)",
pointRadius: 7,
pointHoverRadius: 7,
borderWidth: 2
}
]
},
options: {
legend: {
display: false
},
tooltips: {
enabled: false
},
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
canvas {
max-width: 300px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
<canvas id="chart" height="200"></canvas>
please help, thank you.
i am now writing datapart of chartjs
var configcount = {type: "line",data: {
labels: ["Apr20", "May20", "Jun20", "Jul20", "Aug20", "Sep20", "Oct20"],
datasets: [{label: "Balance1",
data: [10, 20, 30, 40, 50, 60, 70],
fill: false,pointBorderWidth: ...
,},},],},},};
want to change multiple line that Balance1: 10, 20, 30, 40, 50, 60, 70 & Balance2: 15, 30, 15, 30, 15, 30, 15
You need to define two distinct datasets as follows.
data: {
labels: ["Apr20", "May20", "Jun20", "Jul20", "Aug20", "Sep20", "Oct20"],
datasets: [{
label: "Balance1",
data: [10, 20, 30, 40, 50, 60, 70],
...
}, {
label: "Balance2",
data: [15, 30, 15, 30, 15, 30, 15],
fill: false,
...
}]
}
Please take a loo at below code and see how it works.
new Chart(document.getElementById("chart"), {
type: 'line',
data: {
labels: ["Apr20", "May20", "Jun20", "Jul20", "Aug20", "Sep20", "Oct20"],
datasets: [{
label: "Balance1",
data: [10, 20, 30, 40, 50, 60, 70],
fill: false,
backgroundColor: "rgba(255, 99, 132, 0.2)",
borderColor: "rgb(255, 99, 132)",
pointBorderWidth: 10
}, {
label: "Balance2",
data: [15, 30, 15, 30, 15, 30, 15],
fill: false,
backgroundColor: "rgba(54, 162, 235, 0.2)",
borderColor: "rgb(54, 162, 235)",
pointBorderWidth: 4,
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
<canvas id="chart" height="80"></canvas>
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 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