Limit labels number on Chart.js line chart
I want to reduce the number of label of my line chart "Only" when displaying on the small device.
From the post above, the solution is like this;
xAxes: [{
type: 'time',
ticks: {
autoSkip: true,
maxTicksLimit: 12
}
}]
This is a good solution, but I want to keep all my 24 labels when showing on desktop (lg). I want to hide half of the labels when displaying on phone only (xs) .
This is how my chart on desktop and phone now.
Here is one solution where we check if the the window size is less than 600px and return 12 else the tick limit is 24
xAxes: [{
type: 'time',
ticks: {
autoSkip: true,
maxTicksLimit: getTickLimit()
}
}]
function getTickLimit(){
return window.innerWidth<600? 12:24
}
Related
Image - 1
dates are displayed on the x-axis, values are displayed on the y-axis.
How can I change the interval distance?
You should look at the documentation of chartjs and specifically linear axis:
chartjs documentation
Code Example:
JsFiddle Example
xAxes: [{
type: 'time',
ticks: {
autoSkip: true,
maxTicksLimit: 20
}
}]
Your question is not elaborate enough. Atleast you should have given sample json for the chartjs via which you are plotting. From my understanding this should work :
xAxis: {
ticks: {
maxTicksLimit: 10
}
}
I can't find any documentation on how to change the y axis values from the default ones. The data im plugging into the chart can have any value from 0-150. However, the y-axis starts at 84 and ends at 98. Here's the link to it's npm page. https://www.npmjs.com/package/react-chartjs-2
I would say that what you need is this:
const options = {
scales: {
yAxes: [{
ticks: {
beginAtZero: true,
}
}],
}
}
I use latest Chart.js 2.9.3. I've tried the following code with major ticks:
var ctx = document.getElementById('chart').getContext('2d');
var chart = new Chart(ctx, {
type: 'horizontalBar',
data: {
datasets: [{
barPercentage: 0.2,
borderColor: 'black',
borderWidth: 2,
borderSkipped: false,
backgroundColor: 'transparent',
data: [[0, 8000]]
}]
},
options: {
legend: false,
tooltips: false,
animation: false,
title: {
display: true,
fontSize: '26',
text: 'AT1G24460'
},
scales: {
xAxes: [{
position: 'top',
offset: true,
ticks: {
major: {
enabled: true,
fontColor: 'red'
}
},
gridLines: {
drawOnChartArea: false
}
}],
yAxes: [{
display: false
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js"></script>
<div class="text-center">
<canvas id="chart"></canvas>
</div>
The result is the following (major ticks are not displayed at all). So how to make major tick marks work in chart.js?
P.S. My final goal is to have top axis like this:
What axis styling is possible without direct canvas painting (ticks below axis baseline, first and last ticks are enlarged, two labels for first and last ticks, no labels except fof first and last tick, etc.)
Thank you in advance.
Official answer:
Major ticks are only supported on the time scale in 2.9. In 3.0 they
are also being added to the log scale. They're not in the linear scale
yet. But major ticks are most useful for deciding which ticks not to
skip in the autoSkipper. 3.0 will also add better support for tick
styling via scriptable tick options (#7337), which will allow you to
make ticks that you want bolder, bigger, different colors, etc. and
you don't need major tick support for that. I'd recommend trying 3.0
I've got a working not stacked logarithmic horizontal bar chart .I need a copy of this chart where the X and Y-axis-es are stacked(both at the same time).The problem comes when I change the axises to stacked ,than the bars goes off canvas and the values don't fit the grid.(https://i.imgur.com/LH6YTy0.png) - The picture shows the values and the grid at the bottom shows that the datas not fitting the grid values - Is that a bug or am I overlooking something?
The code is a simple a chart declaration, there are 4 datasets I'm working with right now, each looks like this:
{label: "D_number_data", data: Array(11), fill: false, backgroundColor: "#80B300", borderColor: "#80B300", …}
I think nothing is wrong with the datasets or the way I assign them to the chart,so something must be with the stacked axis-es.
I've tried resizing and changing only one Axis to be stacked,which is also working, but the reason I need both axis to be stacked is that in that way they are not overlapping each other so it's easier to look at it and read the data.
let myChart = new Chart(ctx2, {
type: 'horizontalBar',
data: {
labels: [],
datasets: [],
},
options: {
labels:'50px',
borderWidth:1,
maintainAspectRatio: false,
scales: {
xAxes: [{
stacked:true,
barPercentage: 1,
ticks:{
autoSkip: false,
pointLabelFontSize: '20px'
},
}],
yAxes: [{
stacked: true,
barPercentage: 0.4,
ticks:{
fontColor: 'rgb(0, 0, 0)'},
fontSize:500,
}],
}
}
});
The expected result would be the values fit the values in the grid and the bars stays on canvas.
Found the problem, in my project the data in the dataset object was a string array (something like["1","2","3"]). After parseInt the elements in the data array , the stacked logarythmic bar chart work fine. Funny thing that I created many chart-s with string data arrays using chart.js, and I only encountered this issue in chart-s where the type was set to logarithmic, and both axis set to stacked.
I don't want to rotate the labels of the x axis, so I disabled that behavior by setting maxRotation: 0. Of course, the labels overlap if I scale the chart:
I would like the labels to behave like this:
Is that possible with standard chart.js options? Or is there another way to achieve that?
EDIT: Here is a codepen which shows the behaviour: https://codepen.io/JohnArcher/pen/wmeEMV
Try using autoSkip option on x axes ticks.
xAxes: [{
display: true,
position: 'bottom',
ticks: {
autoSkip: true
}
}]}
https://www.chartjs.org/docs/latest/axes/
A built-in label auto-skip feature detects would-be overlapping ticks and labels and removes every nth label to keep things displaying normally.
If that doesn't resolve your problem try use maxRotation, minRotation.
xAxes: [{
display: true,
position: 'bottom',
ticks: {
autoSkip: false,
maxRotation: 90,
minRotation: 90
}
}]}
https://www.chartjs.org/docs/latest/axes/cartesian/