My current graphs on the webpage are powered by Chart.js v2.5.3. Charts that were configured a while ago works perfectly fine. Here is the code:
var ctw = document.getElementById("chart-budget");
var myChart = new Chart(ctw, {
type: 'bar',
data: {
labels: ["budget", "costs"],
datasets: [{
label: "Amount",
data: [520980, 23397.81],
backgroundColor: [
'rgba(143, 211, 91, 0.2)',
'rgba(255, 99, 132, 0.2)',
],
borderColor: [
'rgba(143, 211, 91,1)',
'rgba(255, 99, 132, 1)',
],
borderWidth: 1
}]
},
options: {
legend: {
display: false
},
responsive: true,
scales: {
yAxes: [{
ticks: {
beginAtZero: true
},
gridLines: {
drawBorder: false,
}
}],
xAxes: [{
gridLines: {
display: false,
}
}]
}
}
});
As v3 is now available I was thinking to switch to it. A quick test revealed some issues I will need to overcome. One of the issue I'm struggling with is unability to hide dataset legend. In V2.5 it was done by options.legend.display set to false but not any longer.
In the documentation I did not come across anything that could help me.
Is there anyone who can advice on how to hide a legend in Chart.js V3?
/Kuba
Configuring option like below would solve the problem in V3 version.
options: { plugins: { legend: { display: false }, } }
In Chart.js V3 you can add a filter function to options.plugins.legend.labels and evaluate either the labels or their datasetIndex values to suppress specific legends rather than ALL of them.
options: {
plugins: {
legend: {
labels: {
filter: function(legendItem, data) {
let label = data.datasets[legendItem.datasetIndex].label || '';
if (typeof(label) !== 'undefined') {
if (legendItem.datasetIndex >= 3){
return false;
}
}
return label;
}
}
}
}
}
Related
I am working with Chart.js. I want to display every third tick and label on the chart.
With the code below, I am able to skip every third label not the interval/tick also.
I want to skip/remove the interval. Is it possible to skip the tick and interval without modifying the input data ?
I'll for thank full for any kind of inputs/help?
options: {
scales: {
xAxes: [{
autoSkip: false,
ticks: {
callback: function(tick, index, array) {
return (index % 3) ? "" : tick;
}
}
}],
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
You can define the scriptable option options.scales.x.grid.tickColor as follows. This generates an array that specifies a color for every 3rd tick line only.
grid: {
tickColor: labels.map((l, i) => i % 3 ? null : 'lightgray')
}
For further information, consult Grid Line Configuration from the Chart.js documentation.
Please take a look at the runnable code below and see how it works.
const labels = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];
const data = [65, 59, 80, 81, 56, 55, 40];
new Chart('myChart', {
type: 'line',
data: {
labels: labels,
datasets: [{
label: 'My Dataset',
data: data,
fill: false,
borderColor: 'rgb(75, 192, 192)',
tension: 0.1
}]
},
options: {
scales: {
x: {
autoSkip: false,
grid: {
tickColor: labels.map((l, i) => i % 3 ? null : 'lightgray')
},
ticks: {
callback: (t, i) => i % 3 ? '' : labels[i]
},
},
y: {
beginAtZero: true
}
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.js"></script>
<canvas id="myChart" height="80"></canvas>
I'm working on a project that could display sensing data on local web pages in real time with Django and I made this stream live data chart. But I don't need to this realtime x-axis ticks. I want to make the x-axis starting at zero and increasing 1 step by one second.
I think "xAxes type realtime" is the key, but I'm new to this and it's hard for me to solve alone, so I need your help.
enter image description here
<script>
var chartColors = {
red: 'rgb(255, 99, 132)',
orange: 'rgb(255, 159, 64)',
yellow: 'rgb(255, 205, 86)',
green: 'rgb(75, 192, 192)',
blue: 'rgb(54, 162, 235)',
purple: 'rgb(153, 102, 255)',
grey: 'rgb(201, 203, 207)'
};
function onRefresh(chart) {
var now = Date.now();
chart.data.datasets.forEach(function(dataset) {
dataset.data.push({
x: now,
y: GetData()
});
});
}
var color = Chart.helpers.color;
var config = {
type: 'line',
data: {
datasets: [{
backgroundColor: [
'rgba(100, 200, 200, 0)'
],
borderColor: chartColors.blue,
fill: false,
lineTension: 0,
borderDash: [8, 0],
data: [],
borderWidth:3,
pointRadius:0,
}]
},
options: {
legend:{
display:false
},
title: {
display: true,
text: 'Some Chart',
fontSize:20,
fontFamily:"Tahoma"
},
scales: {
xAxes: [{
ticks:{
beginAtZero: true
},
gridLines:{
display:true
},
type: 'realtime',
display:true,
position:'bottom',
realtime: {
duration: 20000,
refresh: 1000,
delay: 0,
onRefresh: onRefresh
}
}],
yAxes: [{
gridLines:{
display:true
},
scaleLabel: {
display: true,
labelString: 'value'
}
}]
},
}
};
window.onload = function() {
var ctx = document.getElementById('myChart').getContext('2d');
window.myChart = new Chart(ctx, config);
};
</script>
Is there any other way to make streaming live graph with Django, please let me know.
I solved this myself. The key was about 'xAxes ticks callback'. thank you.
I have some values passed to Chart.js but I found neither / nor - is supported. If the labels are harded coded as UK-aaa or N/A, it works fine. If it is passed as a varible which the project requires, UK or N (letters before the special characters will not recognized and no chart shows. Is there a workround on Javascript other than removing special characters in labels? Thanks.
var C3 = document.getElementById(canv3.getAttribute('id'));
if (C3.getContext) {
if (C3.getContext) {
new Chart(document.getElementById(canv3.getAttribute('id')), {
type: 'bar',
data: {
labels: [{{res.21}},{{res.22}},{{res.23}}], //this is not supported if same value as below passed.
//labels: ['UK-aaa','N/A','N/A'], //this is supported
datasets: [
{
backgroundColor: "rgba(35, 35, 0.5)",
borderColor : "rgba(149, 62, 205, 1)",
pointBackgroundColor: "rgba(62, 149, 205, 1)",
data: [{{res.18}},{{res.19}},{{res.20}}] //numeric value
},
]
},
options: {
responsive: false,
maintainAspectRatio: false,
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}]
}
}
});
}}
I have a graph with multiple data points / lines. Currently, if you hover near a data point, it will display the label/value for that point.
What I'd like is the following: when you hover anywhere on the chart, it will display the labels + values for all data points at that x-value simultaneously in a single label.
For example, let's take the given datasets:
Date (x-labels): ['Jan 01','Jan 02','Jan 03']
Apples Sold: [3,5,1]
Oranges Sold: [0,10,2]
Gallons of Milk Sold: [5,7,4]
When you hover over the middle of the graph, above the 'Jan 02' vertical space, the label should display:
Jan 02
-----------------------
Apples Sold: 5
Oranges Sold: 10
Gallons of Milk Sold: 7
Is there a simple way to accomplish this?
Thanks.
Is there a simple way to accomplish this?
YES !! There is a quite straightforward way to accomplish this. If you would have read the documentation, you could have found that pretty easily.
Anyway, basically you need to set the tooltips mode to index in your chart options, in order to accomplish the behavior you want.
...
options: {
tooltips: {
mode: 'index'
}
}
...
Additionally, you probably want to set the following:
...
options: {
tooltips: {
mode: 'index',
intersect: false
},
hover: {
mode: 'index',
intersect: false
}
}
...
This will make it so all of the expected hover/label interactions will occur when hovering anywhere on the graph at the nearest x-value.
From the Documentation :
# index
Finds item at the same index. If the intersect setting is true, the
first intersecting item is used to determine the index in the data. If
intersect false the nearest item, in the x direction, is used to
determine the index.
Here is a working example :
var ctx = document.getElementById('canvas').getContext('2d');
var chart = new Chart(ctx, {
type: 'line',
data: {
labels: ['Jan 01', 'Jan 02', 'Jan 03'],
datasets: [{
label: 'Apples Sold',
data: [3, 5, 1],
borderColor: 'rgba(255, 99, 132, 0.8)',
fill: false
}, {
label: 'Oranges Sold',
data: [0, 10, 2],
borderColor: 'rgba(255, 206, 86, 0.8)',
fill: false
}, {
label: 'Gallons of Milk Sold',
data: [5, 7, 4],
borderColor: 'rgba(54, 162, 235, 0.8)',
fill: false
}]
},
options: {
tooltips: {
mode: 'index',
intersect: false
},
hover: {
mode: 'index',
intersect: false
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
<canvas id="canvas"></canvas>
For Chart.js 3.3.2, you can use #baburao's approach with a few changes. You can check the documentation. Put tooltip in plugins. Example:
...
options: {
plugins: {
tooltip: {
mode: 'nearest',
intersect: false
}
}
}
...
I know this is an old post, but in a time I needed to divide a bar on multiple datasets, but the labels to be keeped as original values:
eg:
dataset 1: Totals: 10 15 10
dataset 2: Red: 4 5 9
dataset 3: Blue: 4 2 1
In my chart I want to show the "Totals" bar and to collor a part of it in red/blue or "the rest" (which is Totals color). I'll don't write the code to modify the datasets, but I'll complete #busterroni answer for chartjs v3+
plugins: {
tooltip: {
mode: 'index',
intersect: false,
callbacks: {
label: (item) => item.dataset.label + ': ' +
this.originalValues[item.datasetIndex].data[item.dataIndex]
}
}
}
You can achieve this after plotting the data like this:
Html
<div class="container">
<h2>Chart.js — Line Chart Demo</h2>
<div>
<canvas id="myChart"></canvas>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.4/Chart.min.js">
</script>
CSS
.container {
width: 80%;
margin: 15px auto;
}
Javascript
var ctx = document.getElementById('myChart').getContext('2d');
function convert(str) {
var date = new Date(str),
mnth = ("0" + (date.getMonth() + 1)).slice(-2),
day = ("0" + date.getDate()).slice(-2);
return [date.getFullYear(), mnth, day].join("-");
}
var date = ["Tue Jun 25 2019 00:00:00 GMT+0530 (India Standard Time)"];
var y1 = [12];
var y2 = [32];
var y3 = [7];
var dataPoints1 = [], dataPoints2 = [], dataPoints3 = [], datep=[];
console.log(date.length)
if(date.length=="1"){
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: ["",convert(date[0]),""],
datasets: [{
label:"Tweets",
backgroundColor: "rgba(153,255,51,0.4)",
fill:false,
borderColor:"rgba(153,255,51,0.4)",
data: [null,y1[0],null]
}, {
label:"Retweets",
backgroundColor: "rgba(255,153,0,0.4)",
fill:false,
borderColor:"rgba(255,153,0,0.4)",
data: [null,y2[0],null]
},{
label:"Favourites",
backgroundColor: "rgba(197, 239, 247, 1)",
fill:false,
borderColor:"rgba(197, 239, 247, 1)",
data:[null,y3[0],null]
}
]
},
options: {
scales: {
xAxes: [{
gridLines: {
display: false
}
}],
yAxes: [{
ticks: {
display: true
},
gridLines: {
display: false,
// drawBorder: false //maybe set this as well
}
}]
},
}
});}
else{
for (var i = 0; i < date.length; i++) {
datep.push(convert(date[i]))
dataPoints1.push(y1[i]);
dataPoints2.push(y2[i]);
dataPoints3.push(y3[i]);
}
console.log(datep)
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: datep,
datasets: [{
label:"Tweets",
backgroundColor: "rgba(153,255,51,0.4)",
fill:false,
borderColor:"rgba(153,255,51,0.4)",
data: dataPoints1
}, {
label:"Retweets",
backgroundColor: "rgba(255,153,0,0.4)",
fill:false,
borderColor:"rgba(255,153,0,0.4)",
data: dataPoints2
},{
label:"Favourites",
backgroundColor: "rgba(197, 239, 247, 1)",
fill:false,
borderColor:"rgba(197, 239, 247, 1)",
data:dataPoints3
}
]
},
options: {
scales: {
xAxes: [{
gridLines: {
display: false
}
}],
yAxes: [{
ticks: {
display: true
},
gridLines: {
display: false,
// drawBorder: false //maybe set this as well
}
}]
},
}
});
}
or chk this fiddle https://jsfiddle.net/gqozfb4L/
You could try using JavaScript to track the users mouse and based on the position, return the data at that vertice.
document.querySelector('.button').onmousemove = (e) => {
const x = e.pageX - e.target.offsetLeft
const y = e.pageY - e.target.offsetTop
e.target.style.setProperty('--x', `${ x }px`)
e.target.style.setProperty('--y', `${ y }px`)
}
for example, when i load the page, i would like to visually appear slowly, instead of just popups already loaded
For example, when i load this bar graph, everything appears slowly with the nice visualization onto the screen, i think it adds a nice affect
this is my script
<script>
var department = {{department|safe}};
var incomplete = {{incomplete|safe}};
var complete = {{complete|safe}};
// Return with commas in between
var numberWithCommas = function (x) {
return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
};
// Chart.defaults.global.elements.rectangle.backgroundColor = '#FF0000';
var bar_ctx = document.getElementById('bar-chart');
var bar_chart = new Chart(bar_ctx, {
type: 'bar',
data: {
labels: department,
datasets: [
{
label: 'incomplete',
data: incomplete,
backgroundColor: "rgba(55, 160, 225, 0.7)",
hoverBackgroundColor: "rgba(55, 160, 225, 0.7)",
hoverBorderWidth: 2,
hoverBorderColor: 'lightgrey'
},
{
label: 'complete',
data: complete,
backgroundColor: "rgba(225, 58, 55, 0.7)",
hoverBackgroundColor: "rgba(225, 58, 55, 0.7)",
hoverBorderWidth: 2,
hoverBorderColor: 'lightgrey'
},
]
},
options: {
animation: {
duration: 10,
},
tooltips: {
mode: 'label',
callbacks: {
label: function (tooltipItem, data) {
return data.datasets[tooltipItem.datasetIndex].label + ": " + numberWithCommas(tooltipItem.yLabel);
}
}
},
scales: {
xAxes: [{
stacked: true,
gridLines: { display: false },
}],
yAxes: [{
stacked: true,
ticks: {
callback: function (value) { return numberWithCommas(value); },
},
}],
}, // scales
legend: { display: true }
} // options
}
);
</script>
In the options object, there is an animation parameter:
animation: {
duration: 10,
},
I believe this is what you want.