How can you disable tooltips on one of the plots on my multi plot graph, but keep the others.
I have tried to set 'showToolTip' to false on the plot I dont want tooltips for but this does not work.
let ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, {
type: 'scatter',
data :{
labels : cLabels,
datasets : [{
label: 'Points',
backgroundColor: 'rgb(255, 99, 132)',
borderColor: 'rgb(255, 99, 132)',
pointStyle: 'circle',
pointRadius: 10,
data : cData,
showTooltips: false, //<- THis line does not work, and there is a global property to remove all tooltips
order: 2,
},{
label: '',
backgroundColor: 'rgb(255, 255, 255)',
borderColor: 'rgb(255, 255, 255)',
pointStyle: 'circle',
pointRadius: 5,
data : cData,
order: 1,
},{
You can use a tooltip filter callback function. It returns true if a tooltip should be displayed, false otherwise. The following example specifies that tooltips should be displayed for the first dataset only.
options: {
...
tooltips: {
filter: tooltipItem => tooltipItem.datasetIndex == 0
}
Please have a look at the runnable code sample that follows.
const data = [
{
series: [
{date: '2020-01', value: 5 },
{date: '2020-02', value: 20 },
{date: '2020-03', value: 10 },
{date: '2020-04', value: 15 }
]
},
{
series: [
{date: '2020-01', value: 10 },
{date: '2020-02', value: 8 },
{date: '2020-03', value: 16 },
{date: '2020-04', value: 12 }
]
}
];
new Chart(document.getElementById('canvas'), {
type: 'line',
data: {
datasets: [{
label: data[0].name,
fill: false,
backgroundColor: 'red',
borderColor: 'red',
data: data[0].series.map(x => ({ x: new Date(x.date), y: x.value }))
}, {
label: data[1].name,
fill: false,
backgroundColor: 'blue',
borderColor: 'blue',
data: data[1].series.map(x => ({ x: new Date(x.date), y: x.value }))
}]
},
options: {
responsive: true,
title: {
display: false
},
legend: {
display: false
},
tooltips: {
filter: tooltipItem => tooltipItem.datasetIndex == 0
},
scales: {
xAxes: [{
type: 'time',
time: {
unit: 'month',
displayFormats: {
'month': 'MMM YYYY',
},
tooltipFormat: 'MMM YYYY'
}
}],
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js"></script>
<canvas id="canvas" height="90"></canvas>
Related
I have a graph that displays data of the last 2h, 8h, 24h, or 48h. This can be changed via buttons on the webpage. When the timespan includes midnight, I would like to display vertical lines with little labels (maybe at hover) at midnight displaying the date (or day of the week) of the upcoming day.
I have not found any resources on how to do that in Chartjs 3. How would I do such a task?
This is how I create the graph. "time" is an array of epoch times:
chart = new Chart(
document.getElementById('Chart'),
{
type: 'line',
data:
{
labels: time,
datasets: [
{
label: dataObjects[start].label,
backgroundColor: dataObjects[start].backgroundColor,
borderColor: dataObjects[start].borderColor,
fill: dataObjects[start].fill,
data: dataObjects[start].data,
yAxisID: 'A',
}]
},
options: {
elements: {point: {radius: 0.5, borderWidth: 1},
line: {borderWidth: 3}},
maintainAspectRatio: false,
scales: {
x:
{
//max: last_time,
type: "time",
grid: {borderColor: color.time},
ticks: {color: color.time},
time: {
unit: 'hour',
tooltipFormat: 'dd.MM. HH:mm',
displayFormats: {
second: "HH:mm",
minute: "HH:mm",
hour: "HH:mm",
day: "d.MM.",
week: "d.MM."
},
}
},
A:
{
type: 'linear',
grid: {borderColor: color.time},
position: 'left',
ticks: {color: color.time},
suggestedMin: dataObjects[start].suggestedMin,
suggestedMax: dataObjects[start].suggestedMax,
title: {text: dataObjects[start].text,
display: true,
color: color.time}
}
},
plugins: {
legend: {display: false}
}
}
});
You could use the annotation plugin. In your case you will need to change the string I used to determine the correct x axis placement to the timestamp of the midnight you want and then you have a line there:
const options = {
type: 'line',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
borderColor: 'pink'
}]
},
options: {
plugins: {
annotation: {
annotations: {
line1: {
type: 'line',
xMin: 'Green',
xMax: 'Green',
label: {
enabled: true,
content: 'end value'
}
},
line2: {
type: 'line',
xMin: 'Blue',
xMax: 'Blue',
label: {
enabled: true,
content: 'begin value'
}
}
}
}
}
}
}
const ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
<body>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.0/chart.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-annotation/1.3.1/chartjs-plugin-annotation.min.js"></script>
</body>
You can use a mixed chart to create this graph mixing a line chart and a bar chart.
Here you can view one example:
https://codepen.io/alyf-mendonca/pen/dyZZoeB
HTML:
<div>
<canvas id="myChart"></canvas>
</div>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
JS:
const labels = [
'January',
'February',
'March',
'April',
'May',
'June',
];
const data = {
labels: [
'20:00',
'21:00',
'22:00',
'23:00',
'00:00',
'01:00',
'02:00'
],
datasets: [{
type: 'line',
label: 'Bar Dataset',
data: [20, 21, 23, 22, 21, 20, 23],
borderColor: 'rgb(255, 99, 132)',
backgroundColor: 'rgba(255, 99, 132, 0.2)'
}, {
type: 'bar',
label: 'Line Dataset',
data: [0, 0, 0, 0, 50, 0, 0],
fill: false,
borderColor: 'rgb(54, 162, 235)'
}]
};
const config = {
type: 'bar',
data: data,
options: {
scales: {
x: {
stacked: true
}
}
},
};
const myChart = new Chart(
document.getElementById('myChart'),
config
);
I've been trying to implement area chart which has different datasets and we are following the configuration of timeseries chart by providing the options a min & max value to generate labels automatically. Here is my code :
var feronisData = [398, 445];
var formattedDates = ["Feb 01", "Mar 20"];
var colors = ['#5ba2df', '#e2ac00', '#59b110'];
var data = {
/* labels: formattedDates, */
datasets: [{
type: 'line',
fill: 1,
spanGaps: true,
pointStyle: 'circle',
label: 'Feronis',
data: [{x: moment('2021-02-10 00:00:00.000').format('MMM DD'), y: 250}, {x: moment('2021-02-28 00:00:00.000').format('MMM DD'), y: 350}],
borderColor: '#5ba2df',
labels: [],
borderWidth: 3,
backgroundColor: 'rgba(0, 0, 0,0)',
}, {
type: 'line',
fill: true,
borderColor: '#2187f3',
backgroundColor: '#219634',
borderWidth: 1,
spanGaps: false,
pointStyle: 'circle',
label: 'Others',
data: [{x: moment('2021-01-24 00:00:00.000').format('MMM DD'), y: 150},{x: moment('2021-02-04 00:00:00.000').format('MMM DD'), y: 300}, {x: moment('2021-03-24 00:00:00.000').format('MMM DD'), y: 450}],
borderColor: '#e2ac00',
labels:[],
borderWidth: 3,
backgroundColor: 'rgba(0, 0, 0,0)',
}]
};
var options = {
showLines: true,
layout: {
padding: {
left: 0,
right: 0,
top: 0,
bottom: 80
}
},
elements: {
point: {
radius: 1,
hoverRadius: 5,
}
},
hover: {
mode: 'index',
intersect: false
},
responsive: true,
tooltips: {
enabled: true,
mode: 'index',
intersect: false,
yAlign: 'right',
},
scales: {
x : {
type: 'time',
min: 'Jan 01',
max: 'Jul 01',
time: {
unit: 'day',
displayFormats: {
day: 'MMM DD'
}
}
/* xAxes: [{
type: 'time',
time: {
unit: 'day',
unitStepSize: 10,
format: 'MMM DD',
displayFormats: {
'day': 'dddd',
'week': 'MMM DD',
'month': 'MMM DD'
},
min: 'JAN 01',
max: 'JUL 01'
},
display: true,
interval: 5,
intervalType: "month",
gridLines: {
drawOnChartArea: false,
}
}], */
},
y: {
stacked: true,
}
}}
this.chart = new Chart('canvas', {
responsive: true,
data: data,
options: options
});
The same is available on fiddle here : https://jsfiddle.net/erdfs37h/
Configuaration is Backend is not going to provide me any set of labels as labels array shown in each dataset. Instead we are depending directly on the data array which provides values in this format [{x: 'xItem', y: 'someValueToPlot'}]
Note : actually I'm going to render this with React.js where my common component generates chart based on these configuration, but it is almost similar to what I've shown on fiddle link.
Since we are also using the timeseries configuration, can you point out any specific thing that I'm missing here?
Currently, I think the solution can be achieved by adding these key-fields for each dataset
type: 'line',
fill: {
target: 'origin',
above: 'rgb(123, 43, 54)', // Area will be reddish above the origin
below: 'rgb(65, 47, 231)' // And blue below the origin
},
Your issue is that you provided duplicate keys for the backgroundColor and in your duplicate you set it to a fully transparent color so thats why its not showing also the labels array in your dataset config is redundent since you are using object notation
Example:
var feronisData = [398, 445];
var formattedDates = ["Feb 01", "Mar 20"];
var colors = ['#5ba2df', '#e2ac00', '#59b110'];
var data = {
/* labels: formattedDates, */
datasets: [{
type: 'line',
fill: 1,
spanGaps: true,
pointStyle: 'circle',
label: 'Feronis',
data: [{
x: moment('2021-02-10 00:00:00.000').format('MMM DD'),
y: 250
}, {
x: moment('2021-02-28 00:00:00.000').format('MMM DD'),
y: 350
}],
borderColor: '#5ba2df',
borderWidth: 3,
}, {
type: 'line',
fill: true,
borderColor: '#2187f3',
backgroundColor: '#219634',
borderWidth: 1,
spanGaps: false,
pointStyle: 'circle',
label: 'Others',
data: [{
x: moment('2021-01-24 00:00:00.000').format('MMM DD'),
y: 150
}, {
x: moment('2021-02-04 00:00:00.000').format('MMM DD'),
y: 300
}, {
x: moment('2021-03-24 00:00:00.000').format('MMM DD'),
y: 450
}],
}]
};
var options = {
showLines: true,
layout: {
padding: {
left: 0,
right: 0,
top: 0,
bottom: 80
}
},
elements: {
point: {
radius: 1,
hoverRadius: 5,
}
},
hover: {
mode: 'index',
intersect: false
},
responsive: true,
plugins: {
tooltip: {
enabled: true,
mode: 'index',
intersect: false,
yAlign: 'right',
},
},
scales: {
x: {
type: 'time',
min: 'Jan 01',
max: 'Jul 01',
time: {
unit: 'day',
displayFormats: {
day: 'MMM DD'
}
}
},
y: {
stacked: true,
}
}
}
this.chart = new Chart('canvas', {
responsive: true,
data: data,
options: options
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.4.1/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/moment#2.27.0"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-adapter-moment/1.0.0/chartjs-adapter-moment.min.js"></script>
<canvas style="height: 400px;" id='canvas' />
You might also want to check the migration guide out since as I can see fast your tooltip is also wrongly configured:https://www.chartjs.org/docs/master/getting-started/v3-migration.html
I have a chartjs line chart requirement where the client is asking to show labels on x axis only if it has a data point. please find his mockup below.
the x-axis is time and here is what I am getting.
how can I achieve this?
here is my config.
options={{
scales: {
xAxes: [
{
distribution: 'linear',
type: "time",
time: {
min: range_min.toDateString(),
max: range_max.toDateString(),
unit: "day",
stepSize: "1",
},
id: 'xAxis',
ticks: {
autoSkip: true,
callback: function (value, index, values) {
return formatDate(new Date(value))
},
}
},
],
},
pan: {
enabled: true,
mode: "x",
speed: 1,
threshold: 1,
},
zoom: {
enabled: true,
drag: true,
sensitivity: 0.5,
mode: "x",
},
annotation: {
annotations: [{
type: 'line',
mode: 'vertical',
scaleID: 'xAxis',
value: 1582229218219,
endValue: 1582229218219,
borderColor: 'rgb(75, 0, 0)',
borderWidth: 4
}]
},
onClick: (event, item) => {
console.log(item)
}
}}
yes this is possible, you can achieve this by using the tick callback like so:
const data = [{
x: 'Red',
y: 10
}, {
x: 'Yellow',
y: 5
}, {
x: 'Orange',
y: 3
}]
var options = {
type: 'line',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data,
borderWidth: 1,
backgroundColor: 'red',
borderColor: 'red',
fill: false
}]
},
options: {
scales: {
xAxes: [{
ticks: {
callback: (val, y, z, t) => (
data.map(el => el.x).indexOf(val) >= 0 ? val : null
)
}
}]
}
}
}
var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
<body>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js" integrity="sha512-hZf9Qhp3rlDJBvAKvmiG+goaaKRZA6LKUO35oK6EsM0/kjPK32Yw7URqrq3Q+Nvbbt8Usss+IekL7CRn83dYmw==" crossorigin="anonymous"></script>
</body>
I'm trying to create a percentile chart, ie a chart with some lines corresponding to each percentile. Given a user input, I want to show their mark in the chart with a dot.
So basically, my question is: Is it possible to place a dot in a multiple line chart? If so, how do I do it?
var lineChart = new Chart(myChart2, {
type: 'line',
data: {
labels: ['6', '7', '8', '9', '10', '11'],
datasets: [ {
label: "50th",
data: [20, 22, 28, 26, 25, 26],
borderColor: '#166ab5',
fill: false
}, {
label: "90th",
data: [72, 74, 68, 75, 74, 78],
borderColor: '#00FF00',
fill: false
}, {
label: "10th",
data: [2, 2, 5, 4, 6, 5],
borderColor: '#FF0000',
fill: false
}]
},
options: {
title: {
text: "Percentile",
display: true
},
legend: {
},
scales: {
xAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: ''
}
}],
yAxes: [{
display: true,
ticks: {
beginAtZero: true
}
}]
},
annotation: {
annotations: [{
type: 'line',
mode: 'horizontal',
scaleID: 'y-axis-0',
value: '26',
borderColor: 'tomato',
borderWidth: 1
}],
drawTime: "afterDraw" // (default)
}
}
});
This was working when it was a line chart, but I am trying to convert it to a bar chart. The X-axis displays properly with all of the separate date spans and it changes when I select a dataset. However, none of the data is being displayed on the Y-axis. What is the issue?
var ctx = document.getElementById('activityChart');
var timeFormat = 'YYYY-MM-DD';
var StMarySchool = [{x: 1583422868000,y:1.5},{x: 1583510166000,y:1.5},{x: 1583516698000,y:0.75},{x: 1583516698000,y:0.75},{x: 1583568876000,y:3.75},{x: 1583575074000,y:0.75},{x: 1583581331000,y:1.875},{x: 1583585883000,y:1.875},{x: 1583664583000,y:0.375},{x: 1583664583000,y:0.375},{x: 1583693978000,y:1.875},{x: 1583749868000,y:0.75},{x: 1583756595000,y:0.75},{x: 1583789510000,y:0.75},{x: 1583837107000,y:1.125},{x: 1583852507000,y:0.75},{x: 1583852988000,y:0.75},{x: 1583872458000,y:1.875},{x: 1584121049000,y:1.5},{x: 1584172626000,y:3.75},{x: 1584445225000,y:0.75},{x: 1584533992000,y:3.75},{x: 1584538374000,y:1.125},{x: 1584538374000,y:1.125},{x: 1584565055000,y:1.125},{x: 1584783939000,y:1.875},{x: 1585034842000,y:1.875},{x: 1585073536000,y:1.875},{x: 1587468291000,y:0.75},{x: 1588780685000,y:1.875},{x: 1589222744000,y:0.75},{x: 1589560042000,y:1.125},{x: 1592056137000,y:1.875},{x: 1592144769000,y:0.75},{x: 1592299139000,y:0.75},{x: 1592816935000,y:0.75},{x: 1592900043000,y:0.75},{x: 1592909141000,y:7.5},{x: 1593162077000,y:1.125},{x: 1593961268000,y:1.875},{x: 1593961312000,y:1.875},{x: 1594487280000,y:1.875},{x: 1595336470000,y:0.75},{x: 1596191887000,y:0.75},{x: 1596785796000,y:3.75},{x: 1596989721000,y:1.5},{x: 1596989721000,y:1.5},{x: 1596989721000,y:1.5},{x: 1597007626000,y:0.75},{x: 1597139159000,y:0.75},{x: 1597184422000,y:0.75},{x: 1597322300000,y:0.75},{x: 1597341478000,y:1.125},{x: 1597431163000,y:1.5},{x: 1597666257000,y:0.75},{x: 1597857382000,y:1.875},{x: 1598288284000,y:0.75},{x: 1598462641000,y:0.75}];var BagelUniversity = [{x: 1596095822000,y:0.75},{x: 1596966501000,y:0.75},{x: 1597564562000,y:0.75},{x: 1597564562000,y:0.75},{x: 1597765250000,y:0.75},{x: 1598288284000,y:0.75}];var MerighisSavoyInn = [{x: 1597406165000,y:1.875},{x: 1597428169000,y:1.875},{x: 1597681599000,y:1.875}];
var config = {
type: 'bar',
data: {
datasets: [
{label:'Bagel University', data: BagelUniversity, fill: true, backgroundColor: ['rgba(239, 248, 251, .70)'],borderColor: ['rgb(42, 159, 216)']},{label:'Merighis Savoy Inn', data: MerighisSavoyInn, fill: true, backgroundColor: ['rgba(239, 248, 251, .70)'],borderColor: ['rgb(42, 159, 216)']},{label:'St. Mary School', data: StMarySchool, fill: true, backgroundColor: ['rgba(239, 248, 251, .70)'],borderColor: ['rgb(42, 159, 216)']}
]
},
options: {
responsive: true,
title: {
display: false
},
scales: {
xAxes: [{
offset: true,
type: "time",
/*time: {
unit: 'month',
format: timeFormat,
tooltipFormat: 'll',
max:"05/03/2020" ,
min:"26/08/2020",
},*/
time: {
unit: 'day',
round: 'day',
displayFormats: {
day: 'MMM D'
}
},
scaleLabel: {
display: true,
labelString: 'Date'
},
}],
yAxes: [{
scaleLabel: {
display: true,
labelString: '$'
},
ticks: {
beginAtZero: true
}
}]
},
}
};
var myChart = new Chart(ctx, config);
I found that every date has to be in the data, regardless if it contains a datapoint.