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>
Related
I have the following bar chart. here is the javascript options for it:
public chartOptions = {
responsive: true,
maintainAspectRatio: false,
legend: {
display: true,
labels: {
fontColor: "black",
fontSize: 12,
},
},
scales: {
yAxes: [
{
display: true,
stacked: false,
scaleLabel: {
display: true,
labelString: "Number of Students",
},
ticks: {
stepSize: 5,
min: 0,
max: 30,
fontSize: 12,
fontColor: "black",
},
},
],
xAxes: [
{
display: true,
stacked: false,
ticks: {
fontSize: 12,
fontColor: "black",
precision: 0,
},
},
],
},
};
Here is the html:
<canvas
baseChart
[datasets]="chartData"
[labels]="chartLabels"
[options]="chartOptions"
[colors]="chartColors"
[plugins]="[]"
[legend]="true"
[chartType]="'bar'"
height="300px"
>
</canvas>
Sometimes the data labels appear on the bars (see picture), but i can't figure out how to change the colour to make them white. Does anyone know?
UPDATE:
Here is the chart with new chartOptions, but still doesn't change the colour of the data labels:
chartOptions = {
responsive: true,
maintainAspectRatio: false,
legend: {
display: true,
},
scales: {
yAxes: [
{
display: true,
stacked: false,
scaleLabel: {
display: true,
labelString: "Number of Students",
},
ticks: {
stepSize: 5,
min: 0,
max: 30,
fontSize: 12,
fontColor: "black",
},
},
],
xAxes: [
{
display: true,
stacked: false,
ticks: {
fontSize: 12,
fontColor: "black",
precision: 0,
},
},
],
},
plugins: {
labels: {
fontColor: "white",
fontSize: 12,
},
},
};
I think the issue is because you add the baels plugin config inside the legend configuration.
It should be:
options: {
...
plugins: {
labels: {
fontColor: "black",
fontSize: 12,
},
}
...
}
The problem was due to the 'chartsjs-plugin-data-labels' plugin i had. Fixed it by adding this to the datasets array.
dataLabels: {
colors: ["white"],
},
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
}
}],
}
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 would like to remove the gridLines, but still have a border on my y-axis. Here's what it looks like.
I cannot seem to find a solution.
I tried using drawBorder: true but it's overwritten by drawOnChartArea: false.
My code currently looks like this:
options: {
legend: {
display: false
},
scales: {
yAxes: [{
gridLines: {
drawOnChartArea: false,
// drawBorder: true,
// display: false,
},
}],
xAxes: [{
gridLines: {
drawBorder: true,
display: false,
},
ticks: {
display: false,
min: 20,
max: 70
}
}]
}
}
Set scales.yAxes[0].gridLines.drawTicks to false and and some padding in gridLines.ticks.padding:
{
type: 'horizontalBar',
data: {
labels: [4, 3, 2, 1],
datasets: [{
data: [50, 60, 70, 180]
}]
},
options: {
legend: {
display: false
},
scales: {
yAxes: [{
gridLines: {
drawOnChartArea: false,
drawTicks: false,
},
ticks: {
padding: 10
}
}],
xAxes: [{
gridLines: {
drawBorder: true,
display: false,
},
ticks: {
display: false,
min: 20,
max: 70
}
}]
}
}
}
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>