I have tried to set the legend option to display: false, but no matter what I do the legend does not go away.
I have triple checked my syntax, and scoured this site, but I cannot figure out why this label will not disappear.
See codepen:
https://codepen.io/peidj/pen/dyNrJqP
var config_overdue = {
type: 'bar',
data: {
labels: [
'90 Days Overdue',
'180 Days Overdue',
'365 Days Overdue'
],
datasets: [{
label: 'HOW DO I DELETE THIS??',
data: [100,500,1000],
backgroundColor: [
'rgba(255, 205, 86, 0.2)',
'rgba(255, 159, 64, 0.2)',
'rgba(255, 99, 132, 0.2)'
],
borderColor: [
'rgb(255, 205, 86)',
'rgb(255, 159, 64)',
'rgb(255, 99, 132)'
],
borderWidth: 1
}]
},
options: {
legend: {
display: false
},
indexAxis: 'y',
plugins: {
title: {
display: true,
text: 'Overdue Trainings'
}
},
scales: {
y: {
beginAtZero: true
},
},
tooltips: {
callbacks: {
label: function (tooltipItem) {
console.log(tooltipItem)
return tooltipItem.yLabel;
}
}
}
}
};
var chart_all_uwf_overdue = document.getElementById('chart_all_uwf_overdue').getContext('2d');
new Chart(chart_all_uwf_overdue, config_overdue);
div {
max-width: 500px;
}
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/chart.js#3.2.0/dist/chart.min.js"></script>
</head>
<body>
<div>
<canvas id="chart_all_uwf_overdue" width="600" height="400"></canvas>
</div>
</body>
</html>
In version 3 the legend has moved to the plugin section in the options so if you put it like this it will hide the legend:
options: {
plugins: {
legend: {
display: false
}
}
}
Related
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.
//radar-chart
const data = {
labels: [
'Stick Slip',
'Whirl',
'Bit Balling',
'Bit Bounce',
'test'
],
datasets: [{
label: 'My First Dataset',
data: [0.2, 0.5, 0, 0, 1],
fill: true,
backgroundColor: 'rgba(255, 99, 132, 0.2)',
borderColor: 'rgb(255, 99, 132)',
pointBackgroundColor: 'rgb(255, 99, 132)',
pointBorderColor: '#fff',
pointHoverBackgroundColor: '#fff',
pointHoverBorderColor: 'rgb(255, 99, 132)'
},]
};
const config = {
maintainAspectRatio: false,
elements: {
line: {
borderWidth: 3,
}
},
scales: {
r: {
suggestedMin: 0,
suggestedMax: 1,
angleLines: {
color: 'red'
}
},
},
}
var ctx = document.getElementById('radar-chart-dysfunctions');
var myRadarChart = new Chart(ctx, {
type: 'radar',
data: data,
options: config,
});
How can I change the grey gridlines to another color?
This is my code: https://codepen.io/bahrikutlu/pen/QWdaEMp
I have found various solutions on Stack Overflow such as following but it does not work with version 3.0
With Chartjs Radar - how to modify the gray gridlines?
Thanks
You will have to edit the color of the grid in the scale option like the example below
var options = {
type: 'radar',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
borderWidth: 1
}]
},
options: {
scales: {
r: {
grid: {
color: 'red'
}
}
}
}
}
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/3.0.2/chart.js" integrity="sha512-n8DscwKN6+Yjr7rI6mL+m9nS4uCEgIrKRFcP0EOkIvzOLUyQgOjWK15hRfoCJQZe0s6XrARyXjpvGFo1w9N3xg==" crossorigin="anonymous"></script>
</body>
Can I offset the bars in the chart.js stacked bar chart like so:
Based on this answer, I created a runnable code snippet that illustrates how it could be done. I'm not using stacked bars because the use case is not clear to me and the image from the question rather looks like a bar with shadows.
const dataset = [40, 80, 50, 60, 70];
const offset = 8;
Chart.pluginService.register({
afterUpdate: function(chart) {
var dataset = chart.config.data.datasets[1];
for (var i = 0; i < dataset._meta[0].data.length; i++) {
var model = dataset._meta[0].data[i]._model;
model.x += offset;
model.controlPointNextX += offset;
model.controlPointPreviousX += offset;
}
}
});
var data = {
labels: ["A", "B", "C", "D", "E"],
datasets: [{
backgroundColor: [
'rgba(255, 99, 132)',
'rgba(255, 206, 86)',
'rgba(54, 162, 235)',
'rgba(75, 192, 192)',
'rgba(153, 102, 255)'
],
borderWidth: 1,
data: dataset,
xAxisID: "bar-x-axis1",
categoryPercentage: 0.5,
barPercentage: 0.5,
},
{
backgroundColor: 'rgba(0, 0, 0, 0.2)',
data: dataset.map(v => v + offset),
xAxisID: "bar-x-axis2",
categoryPercentage: 0.5,
barPercentage: 0.5
}
]
};
var options = {
legend: {
display: false
},
tooltips: {
enabled: false
},
scales: {
xAxes: [
{
id: "bar-x-axis2"
},
{
id: "bar-x-axis1",
offset: true,
ticks: {
display: false
}
}
],
yAxes: [{
id: "bar-y-axis1",
ticks: {
beginAtZero: true,
stepSize: 50
}
}]
}
};
var ctx = document.getElementById("myChart").getContext("2d");
var myBarChart = new Chart(ctx, {
type: 'bar',
data: data,
options: options
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="myChart" height="60"></canvas>
For Chart.js v3, you can use a different approach.
In the beforeDatasetsDraw, you save the define the shadow properties on the canvas through CanvasRenderingContext2D. Make sure to first save the state of the rendering context by invoking ctx.save().
In the afterDatasetsDraw hook, you need to restore the state of the rendering context by invoking ctx.restore().
Convert the bars into floating bars through data: data.map(v => [-20, v]) to makes sure, the shadows appear from the base of the bars.
Define a tooltip.callbacks.label function that provides the initial values in the tooltips.
Please take a look at below runnable code and see how it works.
const data = [40, 80, 50, 60, 70];
const offset = 10;
new Chart('myChart', {
type: 'bar',
plugins: [{
beforeDatasetsDraw: chart => {
const ctx = chart.ctx;
ctx.save();
ctx.shadowOffsetX = offset;
ctx.shadowOffsetY = -offset;
ctx.shadowBlur = 5;
ctx.shadowColor = 'rgb(220, 220, 220)';
},
afterDatasetsDraw: chart => chart.ctx.restore()
}],
data: {
labels: ["A", "B", "C", "D", "E"],
datasets: [{
label: 'My Data',
data: data.map(v => [-20, v]),
backgroundColor: [
'rgba(255, 99, 132)',
'rgba(255, 206, 86)',
'rgba(54, 162, 235)',
'rgba(75, 192, 192)',
'rgba(153, 102, 255)'
],
categoryPercentage: 0.8
}]
},
options: {
plugins: {
tooltip: {
callbacks: {
label: ctx => data[ctx.dataIndex]
}
}
},
scales: {
y: {
min: 0,
max: Math.max(...data) + offset
}
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.min.js"></script>
<canvas id="myChart" height="100"></canvas>
chartjs-plugin-datalabels supports displaying of inforamtion related to the value, data, context of the graph content. Need to display image along with the text label on each graph based on the values . Refer attached snapshot
Tried custom option for toopltip but basically need to try rendering of html in the plugin data label so as image can also be added
plugins: {
datalabels: {
anchor: 'end',
align: 'start',
font: {
size: 20,
}
}
}
Display image on the bar
Expected Result :
This can be achieved by combining chartjs-plugin-datalabels with chartjs-plugin-labels as follows:
new Chart(document.getElementById('myChart'), {
type: 'bar',
data: {
labels: ['2009', '2010', '2011', '2012'],
datasets: [{
label: 'My First Dataset',
data: [25, 59, 80, 76],
fill: false,
backgroundColor: ['rgba(255, 99, 132, 0.2)', 'rgba(255, 159, 64, 0.2)', 'rgba(255, 205, 86, 0.2)', 'rgba(75, 192, 192, 0.2)'],
borderColor: ['rgb(255, 99, 132)', 'rgb(255, 159, 64)', 'rgb(255, 205, 86)', 'rgb(75, 192, 192)', 'rgb(54, 162, 235)'],
borderWidth: 1
}]
},
options: {
plugins: {
datalabels: {
anchor: 'end',
align : 'start'
},
labels: {
render: 'image',
textMargin: -60,
images: [
null,
null,
{
src: 'https://i.stack.imgur.com/9EMtU.png',
width: 20,
height: 20
},
null
]
}
},
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
canvas {
max-width: 300px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels"></script>
<script src="https://cdn.jsdelivr.net/gh/emn178/chartjs-plugin-labels/src/chartjs-plugin-labels.js"></script>
<canvas id="myChart" width="10" height="5"></canvas>
As soon as I give the chartJS div flexible values such as width=100%, the graph is not animated anymore.
I tried to use things such as width=45vh but this doesn't fit my need as the chart should always fill 100% of the width of the div above it.
I also tried to add the flexible width to the div id="1" (outer div). The chart is then animating but the width is totally screwed.
In Codepen it's working with exactly the same code:
https://codepen.io/anon/pen/ebjvMm
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ["Standard", "Premium"],
datasets: [{
label: 'Noahs Box',
data: [139, 189],
backgroundColor: [
'rgba(30, 56, 79, 1)',
'rgba(30, 56, 79, 1)',
],
borderColor: [
'rgba(30, 56, 79, 1)',
'rgba(30, 56, 79, 1)',
],
borderWidth: 1
},
{
label: 'Amazon',
data: [192.30, 440.55],
backgroundColor: [
'rgba(255, 153, 0, 1)',
'rgba(255, 153, 0, 1)'
],
borderColor: [
'rgba(255, 153, 0, 1)',
'rgba(255, 153, 0, 1)'
],
borderWidth: 1
}],
},
options: {
responsive: true,
maintainAspectRatio: false,
legend: {
display: true
},
animation: {
duration: 7500,
},
title: {
display: true,
text: 'Comparison: Noahs Box vs. Amazon'
},
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}]
}
}
});
<div style="height:450px">
<div style="position: relative;
margin: auto;
height: 100%;
width: 100%;">
<canvas id="myChart"></canvas></div></div>
This is the page where I have the problem: https://noahsbox.com/pages/price-comparison
As you can see I I have two graphs. The second one is working as it has a fix width.
The chart should be responsive and always take 100% of the width of the 'div id="1" class="grid__item large--one-half medium-down--one-whole right-image statistic-tile' (right side of the tile/section).
AND it should animate when loading the page and not just show up without any animation.
Helpful links:
https://github.com/chartjs/Chart.js/issues/2958
https://www.chartjs.org/docs/latest/general/responsive.html#configuration-options