ChartJS disable gridlines outside chart area - chart.js

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.

Related

Chart.js space issue

I am creating charts using chartjs library. Everything works fine but there is no space between title and bar. I am using below code, rest is fine but there is no gap.
below is my code
I am creating charts using chartjs library. Everything works fine but there is no space between title and bar. I am using below code, rest is fine but there is no gap.
document.addEventListener("DOMContentLoaded", function() {
var patternSize = 20;
new Chart(document.getElementById("chart-3"), {
type: "bar",
data: {
labels: ["3.2.2","3.3.3b","3.5.3"],
datasets: [{
label: "3.2.2",
backgroundColor: [
pattern.draw('line', "#F1C40F ", undefined, patternSize)
],
data: [0,50,0],
}
]
},
options: {
indexAxis: 'y',
maintainAspectRatio: false,
scales: {
yAxes: [{
gridLines: {
display: true
},
stacked: false,
ticks: {
stepSize: 10,
callback: function(value, index, ticks) {
return value + '%';
}
},
scaleLabel: {
display: false,
labelString: 'Progress'
}
}],
xAxes: [{
stacked: false,
scaleLabel: {
display: false,
labelString: 'Tasks',
}
}]
},
}
});
});

Chart.js move x axis labels to the right

I'm using the latest chart.js to draw a simple histogram.
The histogram is fine but I actually need the x labels to be between the borders of every bar like this histogram_right_labels, are there any methods to approach this?
I've tried offsetGridLines: true and offsetGridLines: false, but what they actually did is moving the grid lines and not the labels, unlike what I read about their actual behaviors, I think it might be a conflict in my option settings but I don't know which, any help would be appreciated.
options: {
maintainAspectRatio: false,
layout: {
padding: {
left: 10,
right: 25,
top: 25,
bottom: 0
}
},
scales: {
xAxes: [{
gridLines: {
//display: false,
drawBorder: false,
padding: 20,
offsetGridLines: true
},
ticks: {
beginAtZero: true,
}
}],
yAxes: [{
ticks: {
padding: 10,
},
gridLines: {
color: "rgb(234, 236, 244)",
zeroLineColor: "rgb(234, 236, 244)",
drawBorder: false,
borderDash: [2],
zeroLineBorderDash: [2]
}
}],
},
legend: {
labels: {
boxWidth: 20
},
display: false
},
tooltips: {
backgroundColor: "rgb(255,255,255)",
bodyFontColor: "#858796",
titleMarginBottom: 10,
titleFontColor: '#6e707e',
titleFontSize: 14,
borderColor: '#dddfeb',
borderWidth: 1,
xPadding: 15,
yPadding: 15,
displayColors: false,
intersect: false,
mode: 'index',
caretPadding: 10,
},
}
You can add a second x-axis of type: 'linear' as follows.
{
type: 'linear',
ticks: {
min: 0,
max: labels.length,
stepSize: 1,
callback: (v, i) => i == 0 ? '' : labels[i - 1]
}
}
Note that I use a ticks callback method in order to provide the desired tick label at given index.
Then you should also hide the grid lines and ticks of the default x-axis.
{
gridLines: {
display: false
},
ticks: {
display: false
}
}
Please take a look at below runnable sample code and see how it works.
const labels = ['4.80', '9.60', '14.40', '19.20', '24.00', '28.80'];
new Chart(document.getElementById('myChart'), {
type: 'bar',
data: {
labels: labels,
datasets: [{
label: "My Dataset",
data: [4, 8, 5, 7, 2, 4],
backgroundColor: 'orange',
categoryPercentage: 1,
barPercentage: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}],
xAxes: [{
gridLines: {
display: false
},
ticks: {
display: false
}
},
{
type: 'linear',
ticks: {
min: 0,
max: labels.length,
stepSize: 1,
callback: (v, i) => i == 0 ? '' : labels[i - 1]
}
}
]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>
<canvas id="myChart" height="90"></canvas>
you can use this to put the tooltips to the right. Possibilities are top, left, right and bottom
options: {
title: {
display: true,
position: 'right'
}
}

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 }

Bar charts flickering issue in charts 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

chartjs 2.7 how to add labels in center of horizontal bar graph

I have a graph that look like the following with tooltips enables as these are required.
I am wanting to put labels on the 0 for the middle value between the min and max values.
The result I'm looking for is.
I've look through the documentation but cannot find anything that seems relevant.
Thanks in advance.
fiddle example
horizonalBarChart = new Chart(ctx, {
type: 'horizontalBar',
data: {
datasets: [
{
backgroundColor: "rgba(255,255,250,0)",
data: ["3.77", "4.89", "3.91", "3.34", "3.82", "3.85", "3.94", "3.83", "3.73", "3.33", "2.6", "3.86", "2.95", "3.12", "3.18", "3.05", "2.9"],
label: null
},
{
backgroundColor: ["#003f5c", "#003f5c", "#2f4b7c", "#2f4b7c", "#665191", "#665191", "#665191", "#665191", "#665191", "#a05195", "#a05195", "#d45087", "#d45087", "#d45087", "#d45087", "#d45087", "#d45087", "#f95d6a", "#f95d6a"],
data: ["1.78", "1.84", "1.61", "1.58", "1.6", "1.6", "1.6", "1.67", "1.73", "1.64", "1.86", "1.69", "1.77", "1.76", "1.74", "1.77", "1.79"],
label: null
}
]
},
options: {
responsive: true,
legend: {
display: false
},
scales: {
xAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: ''
},
ticks: {
steps: 8,
stepSize: 1,
max: 8,
min: 0,
callback: function (value, index, values) {
return value - 4;
}
},
stacked: true
}],
yAxes: [
{
barPercentage: 0.6,
display: true,
position: 'left',
type: 'category',
labels: ["-9.72", "-7.16", "11.51", "13.39", "-4.41", "-3.31", "-9", "-41.33", "-16.88", "-3.63", "17.2", "-20.62", "-6.9", "-5.4", "-7.6", "-5.44", "-3.58"],
weight: 1,
stacked: true
},
{
offset: true,
display: true,
position: 'right',
type: 'category',
labels: ["10.92", "8.76", "-11.91", "-4.99", "64.41", "101.91", "149.4", "169.73", "45.08", "7.23", "-22", "109.62", "12.7", "6.2", "8.4", "6.84", "4.18"],
gridLines: {
display: false
}
}
]
}
}
});
I'm not sure you can put the label under the bar.
What you can do, is to place the label inside the bar as explained in the documentation, using the property "mirror"
Displaying the labels inside the chart instead of outside
You can find a good example of this configuration here