Hey :) thanks in advance for helping me out on this issue.
I have a horizontal chart in ChartJs with some dummy info. I currently want to line it up with the statistic above it. In ChartJs the charts get rendered inside a <canvas> tag. I want to remove the spacing in the chart. I'm assuming this is padding but its not on the canvas it's within the chart itself. I've read up on the docs and tried a few of the choices.
Just some extra info, I customized the chart and it now looks like this:
Removed the legend
Flipped the labels
Changed the label colour
Removed the grid lines
HTML:
<canvas id="myChart" width="400" height="150"></canvas>
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'horizontalBar',
data: {
labels: ['1', '2'],
datasets: [{
label: 'Money in',
data: [5, 19],
backgroundColor: [
'rgb(0,51,160)',
'rgb(26,121,191)'
],
borderWidth: 0
}]
},
options: {
scales: {
yAxes: [{
ticks: {
fontColor: 'white',
display: true,
position: top,
mirror: true,
beginAtZero: true,
fontSize: 17,
padding: -9,
z: 1
},
gridLines: {
display: false
}
}],
xAxes: [{
gridLines: {
display: false
},
ticks: {
beginAtZero: true,
display: false
}
}]
},
legend: {
display: false
}
}
});
You can define the layout with negative left padding as follows:
options: {
layout: {
padding: {
left: -10
}
},
...
Please have a look at the following code snippet where the chart canvas is defined with a border in order to emphasize the alignment with the preceding text.
var myChart = new Chart(document.getElementById('myChart'), {
type: 'horizontalBar',
data: {
labels: ['1', '2'],
datasets: [{
label: 'Money in',
data: [5, 19],
backgroundColor: ['rgb(0,51,160)', 'rgb(26,121,191)'],
borderWidth: 0
}]
},
options: {
layout: {
padding: {
left: -10
}
},
scales: {
yAxes: [{
ticks: {
fontColor: 'white',
mirror: true,
beginAtZero: true,
fontSize: 17,
padding: -9,
z: 1
},
gridLines: {
display: false
}
}],
xAxes: [{
gridLines: {
display: false
},
ticks: {
beginAtZero: true,
display: false
}
}]
},
legend: {
display: false
}
}
});
canvas{
max-width: 300px;
border: 1px solid #000;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.js"></script>
<p>Text here</p>
<canvas id="myChart" width="400" height="150"></canvas>
Related
I have a line chart in Chartjs. I want to be able to remove the x-axis and y-axis data from visibilty so it only shows the line.
Below is the codepen that I am working with.
codepen.io
The code I have is the below.
<html>
<style>
body{
background:none;
}
canvas {
background-color: white;
color:black;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>
<body>
<canvas id="myChart" style="width:100%;max-width:600px"></canvas>
<script>
var xValues = [50,60,70,80,90,100,110,120,130,140,150];
var yValues = [7,8,8,9,9,9,10,11,14,14,15];
new Chart("myChart", {
type: "line",
data: {
labels: xValues,
datasets: [{
fill: false,
lineTension: 0,
backgroundColor: "rgba(0,0,255,1.0)",
borderColor: "rgba(0,0,255,0.1)",
data: yValues
}]
},
options: {
legend: {display: false},
scales: {
xAxes: [{
gridLines: {
display: false
},
}],
yAxes: [{
gridLines: {
display: false
}
}]
}
}
});
</script>
</body>
</html>
ticks: { display: false } will take care of that.
scales: {
xAxes: [{
ticks: {
display: false
},
gridLines: {
display: false
},
}],
yAxes: [{
ticks: {
display: false
},
gridLines: {
display: false
}
}],
}
I try to hide the Gridline of Chart.js . But I can not hide it. I want a chart like the one below.
But the result of the charting is not what I expected
I can not hoiden it. Besides, vertical can not bold. Here is the config chart (I am using angular and chart js library)
this.chartDemo = {
title: {
display: false,
},
legend: {
position: 'right',
display: false,
},
scales: {
xAxes: [
{
ticks: {
beginAtZero: true,
max: 100,
min: 0,
},
gridLines: {
drawOnChartArea: false
},
display: false,
},
],
yAxes: [
{
display: this.handleShow(),
gridLines: {
drawOnChartArea: false
}
},
],
},
responsive: false,
plugins: {
grace: {
grace: 2,
hardMax: true,
},
datalabels: {
anchor: 'end',
align: 'end',
rotation: 0,
padding: 12,
clip: false,
labels: {
value: {
color: '#000',
},
},
font: {
size: '12',
weight: 'bold',
},
},
},
};
Please give me the solution
You can set display:false on gridLines attribute, like this:
scales: {
yAxes: [{
stacked: true,
gridLines: {
display: false,
}
}],
xAxes: [{
gridLines: {
display: false
}
}]
}
Here is working snippet:
var data = {
labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul"],
datasets: [{
label: "Dataset #1",
backgroundColor: "rgba(255,99,132,0.2)",
borderColor: "rgba(255,99,132,1)",
borderWidth: 2,
hoverBackgroundColor: "rgba(255,99,132,0.4)",
hoverBorderColor: "rgba(255,99,132,1)",
data: [65, 59, 20, 81, 56, 55, 40],
}]
};
var options = {
maintainAspectRatio: false,
scales: {
yAxes: [{
stacked: true,
gridLines: {
display: false
}
}],
xAxes: [{
gridLines: {
display: false
}
}]
}
};
Chart.Bar('chart', {
options: options,
data: data
});
console.clear();
body {
background: #1D1F20;
padding: 16px;
}
canvas {
border: 1px dotted red;
}
.chart-container {
position: relative;
margin: auto;
height: 80vh;
width: 80vw;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<div class="chart-container">
<canvas id="chart"></canvas>
</div>
in chart.js I'd like to have 2 charts (one under another) with ticks syncronized. Currently it looks so
as you can see dates are not aligned. Setting equal min-max values is impossible here since values are too different.
I think the solution would be to set equal width to both y-axes. The case is complicated by the second y-axes in upper chart, but may be it's possible to place an empty right scale on the bottom chart?
My current options for the top chart are
options: {
tooltips: {
enabled: true,
trigger: 'axis',
intersect: false,
mode : 'index'
},
responsive: true,
maintainAspectRatio: false,
layout: {
padding: {
// left: 500,
right: 0,
top: 0,
bottom: 0,
},
},
scales: {
xAxes: [
{
boundaryGap : false,
gridLines: {
display: false,
},
ticks: {
// Include a dollar sign in the ticks
callback: function(value, index, values) {
return value.split('.').slice(0,2).join('.');
}
},
},
],
yAxes: [
{
id: keys[0],
position: "left",
gridLines: {
drawBorder: false,
zeroLineColor: "rgba(147, 147, 147, 0.2)",
color: "rgba(147, 147, 147, 0.2)",
},
ticks: {
padding: 20,
fontColor: "#2C71C3",
beginAtZero: false,
},
}, {
id: keys[1],
position: "right",
gridLines: {
drawBorder: false,
color: "rgba(147, 147, 147, 0)",
},
ticks: {
padding: 20,
fontColor: "#C6C6C6",
beginAtZero: false,
},
},
],
},
and for the bottom one
options: {
tooltips: {
enabled: true,
trigger: 'axis',
intersect: false,
mode : 'index'
},
responsive: true,
maintainAspectRatio: false,
layout: {
padding: {
// left: 500,
right: 0,
top: 0,
bottom: 0,
},
},
scales: {
yAxes: [
{
ticks: {
reverse: true,
},
},
],
xAxes: [
{
gridLines: {
display: false,
},
ticks: {
// Include a dollar sign in the ticks
callback: function(value, index, values) {
return value.split('.').slice(0,2).join('.');
}
},
},
],
},
I dont know how to or if it is even possible to define a width for a scale, but what you can do is add a second Y axis on the right with the grid dissabled and the callback returning a few spaces for spacing
var options = {
type: 'line',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
borderWidth: 1
},
{
label: '# of Points',
data: [7, 11, 5, 8, 3, 7],
borderWidth: 1
}
]
},
options: {
scales: {
yAxes: [{
position: 'left'
},
{
position: 'right',
gridLines: {
display: false
},
ticks: {
callback: () => (' ')
}
}
]
}
}
}
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/2.9.4/Chart.js"></script>
</body>
Little late to the party, but it is possible to set a fixed width. I updated #LeeLenalee snippet with an example (both y axis have a 100px width in this case). This way, it is possible to align both graphs without any problem. Make sure to set a width that isn't too small for the labels though!
var options = {
type: 'line',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
borderWidth: 1
},
{
label: '# of Points',
data: [7, 11, 5, 8, 3, 7],
borderWidth: 1
}
]
},
options: {
scales: {
yAxes: [{
position: 'left',
afterFit: (scaleInstance) => scaleInstance.width = 100,
},
{
position: 'right',
afterFit: (scaleInstance) => scaleInstance.width = 100,
gridLines: {
display: false
},
ticks: {
callback: () => ''
}
}
]
}
}
}
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/2.9.4/Chart.js"></script>
</body>
I am trying to implement Stacked Horizontal Floating Bars using ChartJS but there is an unusual behaviour that I am facing. Can someone please help why is this happening. The code that I am using is :
<html>
<head>
<title>Floating Bars</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<style>
canvas {
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
}
</style>
</head>
<body>
<div>
<canvas id="canvas" height="100"></canvas>
</div>
<script>
window.onload = function() {
var ctx = document.getElementById('canvas').getContext('2d');
window.myBar = new Chart(ctx, {
type: 'horizontalBar',
data:{
labels:[1],
datasets:[
{
label:'data',
data:[[-3, 5]],
backgroundColor: 'lightblue'
},
{
label:'data',
data:[[6,8]],
backgroundColor: 'lightblue'
},
{
label:'data',
data:[[10, 11]],
backgroundColor: 'lightblue'
}
]
},
options: {
responsive: true,
scales: {
xAxes: [{
stacked : true,
}],
yAxes: [{
stacked : true,
}]
},
legend: {
position: 'top',
},
title: {
display: true,
text: 'Horizontal Floating Bars'
}
}
});
};
</script>
</body>
</html>
The output of the following code is :
Now if we compare the code with the plotted data we see that the first and the second data set i.e. [-3,5] and [6,8] gets plotted correctly, but the third data set instead of getting plotted at [10,11] gets plotted at [16,17] i.e by adding 10 to the previous 6. Can someone please explain the cause for this?
The reason is that you're stacking the values on the xAxis.
Simply define xAxis as follows and you get the result you're expecting.
xAxes: [{
stacked: false,
}]
window.myBar = new Chart(document.getElementById('canvas'), {
type: 'horizontalBar',
data: {
labels: [1],
datasets: [{
label: 'data 1',
data: [[-3, 5], [6, 8], [10, 11]],
backgroundColor: 'lightblue'
},
{
label: 'data 2',
data: [[6, 8]],
backgroundColor: 'lightblue'
},
{
label: 'data 3',
data: [[10, 11]],
backgroundColor: 'lightblue'
}
]
},
options: {
responsive: true,
scales: {
xAxes: [{
stacked: false,
}],
yAxes: [{
stacked: true,
}]
},
legend: {
position: 'top',
},
title: {
display: true,
text: 'Horizontal Floating Bars'
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="canvas" height="80"></canvas>
I am using Chart.js plugin.
I want to reduce the horizontal spacing.
Image 1 : I try
Image 2 : I want
JSFiddle Link Here!
HTML Code Here
<script src="https://cdn.jsdelivr.net/npm/chart.js#2.8.0"></script>
<canvas id="myChart" width="800" height="300"></canvas>
CSS Code Here
canvas {
margin:0 auto;
}
JS Code Here
var ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['April', 'May'],
datasets: [{
label: 'facebook',
borderColor: 'rgba(0,0,0,0)',
backgroundColor: '#3b5998',
data: [179, 201]
}, {
label: 'instagram',
borderColor: 'rgba(255,255,255,0)',
backgroundColor: '#e8361c',
data: [31, 47]
}]
},
options: {
responsive: false,
scales: {
yAxes: [{
display: false,
ticks: {
suggestedMin: 0
},
gridLines: {
display:false
}
}],
xAxes: [{
display:true,
barPercentage: 0.7,
categoryPercentage: 0.3,
gridLines: {
display:false
}
}]
},
legend: {
position:'bottom'
},
animation:false
}
});
I want to reduce the interval between categories. I do not know if there is a corresponding option. Please help me.