Bar charts flickering issue in charts js - chart.js

I am getting the flickering issue as well as zoom issue in charts js.that means I have a bar chart in this some levels are so high means some of them are 20k 30k and some of them 0.1 data so when I hover to the nearest less data bar it vanishes all the charts and it shows me only that charts but I don't want this how to disable that thing.
Real Charts :
the zoom or flickering that issue image :
options: {
legend: {
display: true,
position: 'left',
labels: {
boxWidth:12
}
},
title: {
fontSize: 14,
text: output[k],
display: true
},
responsive: true,
maintainAspectRatio: false,
scales: {
yAxes: [{
ticks: {
beginAtZero:true
},
scaleLabel: {
display: true,
labelString: 'No. of People'
}
}],
xAxes: [{
scaleLabel: {
display: true,
labelString: 'Age Group'
}
}],
}
}

add this on your code to disable zooming Y direction
zoom: {
// Boolean to enable zooming
enabled: false,
// Zooming directions. Remove the appropriate direction to disable
// Eg. 'y' would only allow zooming in the y direction
mode: 'y',
}
exaple:
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3]
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}]
},
pan: {
enabled: true,
mode: 'x',
speed: 1
},
zoom: {
enabled: false,
mode: 'y',
}
}
});
Next time please provide your code

Related

How to display axis borders only (no grid lines) in chartjs?

So I only want to show the axes border lines - and hide the grid lines. This is using the latest version of the chart.js package (2.9.3) and I have replicated my issue in a simplified Codepen shown below:
var myChart = new Chart(ctx, {
type: 'scatter',
data: {
labels: [4, 0],
datasets: [{
data: [
{ group_name: "Group A", x: 4, y: 25 },
{ group_name: "Group B", x: 0, y: 0 },
],
}],
},
options: {
legend: { display: false },
scales: {
yAxes: [ {
type: 'logarithmic',
scaleLabel: { display: true, labelString: 'Active %', fontSize: 15 },
position: 'left',
gridLines: { display: false, drawBorder: true },
ticks: {
min: 0,
max: 50,
maxTicksLimit: 4,
padding: 10,
callback: value => `${value.toLocaleString()}%`,
},
} ],
xAxes: [ {
type: 'logarithmic',
position: 'bottom',
scaleLabel: { display: true, labelString: 'User Count', fontSize: 15 },
gridLines: { display: false, drawBorder: true },
ticks: {
min: 0,
maxTicksLimit: 6,
padding: 10,
callback: value => value.toLocaleString(),
},
} ],
},
}
});
Any help or insight is appreciated; the settings I'd expect to work from the docs don't seem to be working.
You can put this options in gridline properties:
xAxes: [{
gridLines: {
display: true,
drawBorder: true,
drawOnChartArea: false
}
}]
Source: https://www.chartjs.org/samples/latest/scales/gridlines-display.html
Solved it (sort of). When I downgrade to chart.js 2.8.0 the chart borders now display as expected. With 2.9.3 the borders were not showing at all, regardless of chart type.
gridLines: { drawBorder: true, lineWidth: 0 }

rotating y-axis to top and x-axis to left within chart.js

I have a chart that's currently displaying like:
But I'd like to rotate it to look more like this:
(not changing the "your rating") orientation.
It should be relatively straightforward to put the x-axis on the left and the y-axis on the top, but I'm struggling.
Here is the relevant code:
var ctx = document.getElementById('canvas').getContext('2d');
window.myHorizontalBar = new Chart(ctx, {
type:'line', // 'horizontalBar',
data: horizontalBarChartData,
options: {
annotation: {
annotations: [{
type: 'line',
mode: 'vertical',
scaleID: 'y-axis-0',
value: 20,
label: {
content: 'Your Rating ',
enabled: true
}
}]
},
scales: {
xAxes: [{
gridLines: {
display:false
}
}],
yAxes: [{
gridLines: {
display:false
}
}]
},
// Elements options apply to all of the options unless overridden in a dataset
// In this case, we are setting the border of each horizontal bar to be 2px wide
responsive: true,
legend: {
display: false
},
title: {
display: false,
text: 'text4'
}
}
});
}

increase the gap between y-axis and first x-axis value chart.js

I want to display points in the line chart of chart.js, however, points one first and the last index at x-axis don't show up completely as shown in the image
How can I increase the gap between the first and last values of x-axis from the y-axis. Here is my code for the chart
var config = {
type: 'line',
data: {
labels: ['1809_1970', '1971_1975', '1976_1980', '1981_1985', '1986_1990', '1991_1995', '1996_2000','2001_2005','2006_2010','2011_2012','2013_2015'],
datasets: [d1,d2,d3]
},
options: {
responsive: true,
title: {
display: true,
text: 'points chart',
},
tooltips: {
callbacks: {
label: function(tooltipItem, data) {
var label = data.datasets[tooltipItem.datasetIndex].cui[tooltipItem.xLabel] || '';
return 'CUI'+' :: '+label ;
},
afterLabel: function(tooltipItem, data) {
var cui_name = data.datasets[tooltipItem.datasetIndex].cui_name[tooltipItem.xLabel] || '';
return ['NAME'+' :: '+cui_name];
}
}
},
hover: {
mode: 'index',
intersect: true
},
pan: {
enabled: true,
mode: 'y'
},
zoom: {
enabled: true,
mode: 'y',
speed: 0.025
},
scales: {
xAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: 'Time Frame'
}
}],
yAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: 'Score'
}
}]
}
}
};
I needed to accomplish the same thing, and I was able to get the desired result bby adding offset: true to the xAxes options.
xAxes: [{
offset: true, // <-- This right here
display: true,
scaleLabel: {
display: true,
labelString: 'Time Frame'
}
}],

ChartJS disable gridlines outside chart area

I'm trying to hide the gridlines drawn outside the chart area, so basically like the option below, but for outside the chart area
gridLines: {
drawOnChartArea: false,
},
Presumably you are looking to disable the tick lines which can be achieved via the drawTicks property:
new Chart(document.getElementById('canvas'), {
type: 'bar',
data: {
labels: ['a', 'b', 'c'],
datasets: [{
label: 'series1',
data: [1, 2, 4]
}]
},
options: {
scales: {
xAxes: [{
gridLines: {
drawTicks: false
},
ticks: {
padding: 10
}
}],
yAxes: [{
gridLines: {
drawTicks: false
},
ticks: {
beginAtZero: true,
padding: 10
}
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script>
<canvas id="canvas">
gridLines:
drawTicks: false;
}
Refer to the documentation for further information.

How do I invert an y-axis using chart.js (v2.0-dev)

I am creating line charts with 2 y-axes. one of those axes has two datasets but both run from the range of 0-100. The higher number being the better one. The second y-axis is usually lower in range (often in the single digits) and the best result is 1.
How can I invert the second y-axis so that 1 is at the top of the chart?
(I will try to find a solution myself, but at 5k+ lines in chart.js, it might take a while )
Thanks ^_^
Dev 2.0 of chart js supports an option to reverse the ticks when setting up the axis so your declaration of the second axis would become
{
type: "invertedLinear", // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance
display: true,
position: "right",
id: "y-axis-2",
ticks: {
reverse: true
},
// grid line settings
gridLines: {
drawOnChartArea: false, // only want the grid lines for one axis to show up
}
}
Here it is in action https://jsfiddle.net/nwc8ys34/15/
Using v 2.7.0, and the following seems to work:
options: {
scales: {
yAxes: [{
ticks: {
reverse: true,
}
}]
}
}
In v3 the scale configs have been changed so the desired behaviour can be accomplished like so:
const options = {
type: 'line',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [40, 80, 100, 70, 60, 80],
borderColor: 'pink'
},
{
label: '# of Points',
data: [7, 11, 5, 8, 3, 7],
borderColor: 'orange',
yAxisID: 'y2'
}
]
},
options: {
scales: {
y: {},
y2: {
position: 'right',
reverse: true
}
}
}
}
const ctx = document.getElementById('chartJSContainer').getContext('2d');
const chart = new Chart(ctx, options);
<body>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.6.0/chart.js"></script>
</body>
Chart.js 4:
datasets: [{
label: "Strength",
yAxisID: "y1",
data: mappedData.sigStrength
}, {
label: "Bars",
yAxisID: "y2",
data: mappedData.sigBars
}]
scales: {
y1: {
type: "linear",
display: true,
position: "left",
reverse: true
},
y2: {
type: "linear",
display: true,
position: "right",
ticks: {
stepSize: 1
}
}
},