We Keep Coding

How to make a 30days chart responsive on mobile using chart.js?

I made a chart that included 30 days of absent data and I made it using the react-chartjs-2 library but the results are not responsive how to make it responsive?
this is what it looks like on a laptop:
chart on laptop
and this if it looks on mobile:
chart on mobile
this is my code:
this.state = {
loadFirst: true,
loadData: false,
filterYear: moment().format('YYYY'),
filterMonth: moment().format('MM'),
filtered: {
year: moment().format('YYYY'),
month: moment().format('MM')
},
data: {},
options: {
scales: {
yAxes: [
{
stacked: true,
ticks: {
beginAtZero: true
}
}
],
xAxes: [
{
stacked: true
}
]
}
}
}
and this:
<Bar data={data} options={options} />}
how to fix it?

There are limitations to how small you can go because chart.js still needs to draw it, you can disable the legend while on mobile to give the chart a bit more space to work with since its taking up most of the canvas or you can increase the size of the canvas

How to use major tick marks in chart.js 2.9.3?

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

Last y-axis tick gridline not showing with chart title displayed

I'm making a stacked bar graph using Chart.js, with (total stacked) values ranging from 0 to 1 (displayed as 0-100%). I'd like to have a tick/gridline displayed every 0.20/20%, from 0 to and including 1/100%.
Right now, my chart will display the last gridline at 1/100% if I don't include a graph title, but will hide the gridline (but still have the tick label) if I display the title.
Any tips to get the gridline to show?
JS fiddle here: https://jsfiddle.net/amyzlc/n99xac76/, and relevant graph code below.
Link to image of graph with title and without top gridline here.
var stackedBar = new Chart(ctx, {
type: 'bar',
data: dataChart,
options: {
title: {
display: true, //top gridline displays if false, not if true
text: 'Month-wise Adherence'
},
legend: {
position: 'bottom'
},
scales: {
xAxes: [{
stacked: true,
gridLines: {display: false}
}],
yAxes: [{
stacked: true,
gridLines: {drawBorder: false, tickMarkLength: 3},
ticks: {
min: 0,
max: 1, //not showing with title
padding: 6,
stepSize: 0.2,
callback: function(value) {
return Math.round(value*100).toString() + "%";
}
}
}]
}
}
});
Thanks!

How to make bar shape like bell curve in angular-chart?

I am using angular-chart to draw charts in my web application. I Want to make UI for the Bars in the chart as shown in image. I have tried a lot to achieve this UI but not able to make it. Also I searched other librearies for the same UI. We can draw a single bell curve on the graph but I want to make each bar look like a bell curve.
Here is the JsFiddle for angular-chart.
Here is the code I am trying to do.
https://jsfiddle.net/quekid/untd28yq/
$scope.datasetOverride = [{ yAxisID: 'y-axis-1' }, { yAxisID: 'y-axis-2' }];
$scope.options = {
scales: {
yAxes: [
{
id: 'y-axis-1',
type: 'linear',
display: true,
position: 'left',
ticks: {
beginAtZero:true,
suggestedMin: 0
}
},
{
id: 'y-axis-2',
type: 'linear',
display: false,
position: 'right'
}
]
}
};

Please try with
$scope.colors= [{
fill: true,
backgroundColor: "#cb2431"
}];
This will be fill the area under the graph its work for me. Just try it out
jsfiddle

Chart.js remove the first vertical line

Is there a way to remove the initial vertical line from the chart without removing the values?
here is how my options look like:
scales: {
yAxes: [{
ticks: {
beginAtZero: true,
maxTicksLimit: 5,
suggestedMax: maxValue
}
}],
xAxes : [{
categoryPercentage: 1.0,
display : false, // set this to false to hide the labels under the bars
gridLines: {
display: false
}
}]
},

What you want to remove is probably the border of the chart. In Chart.js v2 I was able to remove this first vertical border by setting drawBorder to false for the grid line configuration:
options: {
scales: {
yAxes: [{
gridLines: {
drawBorder: false
}
}]
}
}
In Chart.js docs it is explained in https://www.chartjs.org/docs/latest/axes/styling.html#grid-line-configuration.

Try using the chart option, scaleLineColor, and setting the color to have 0 opacity:
new Chart(ctx).Bar(data, {
scaleLineColor: 'rgba(0, 0, 0, 0)',
});
http://jsfiddle.net/wb3kcunt/33/
If you are using chartjs v2, then the showBorder option in scales.gridLines should do the trick:
options: {
scales: {
gridLines: {
showBorder: false,
}
}
}
See docs: http://www.chartjs.org/docs/#scales