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
Related
I have a project where I show the movements of the robot, I want to make this map so that the x and y scales are proportional to each other.
These data are real-time data, which, as I mentioned, shows the movement of a robot.
Can anyone help me with this?
This is the figure:
myChart = new Chart(ctx, {
type: 'scatter',
data: {
datasets: [{
label: '',
backgroundColor: "blue",
fill: false,
data: [],
}]
},
options: {
scales: {
xAxes: [{
ticks:{
suggestedMax:15,
}
}]
yAxes: [{
ticks:{
suggestedMax:15,
}
}]
}
}
});
You can define the desired dimension of your canvas through the width or height property.
<canvas id="chartContainer" width="400"></canvas>
...or using CSS.
canvas {
width: 400px;
}
Further you should also define responsive: false and aspectRatio: 1 within the chart options, latter represents a square canvas.
options: {
responsive: false,
aspectRatio: 1,
See Configuration Options at the Chart.js documentation
my ideia is simple: I need a a chartjs and instead only one color I need to draw different colors to the same bar like:
I am not sure if you can apply three colors to the same "bar" (which is a relative term here). But I do know you have the ability to create stacked charts like in this example here:
https://www.chartjs.org/samples/latest/charts/bar/stacked.html
The key is to pass the stacked property as true when setting your chart options. Example:
...
options: {
title: {
display: true,
text: 'Chart.js Bar Chart - Stacked'
},
tooltips: {
mode: 'index',
intersect: false
},
responsive: true,
scales: {
xAxes: [{
// MAGIC HERE
stacked: true,
}],
yAxes: [{
// AND HERE
stacked: true
}]
}
}
I hope this can help you.
I'm using Chartkick and Chart.js to visualize a data set of two lines, however, only the first tick on the x-axis displays
I've tried passing options to the dataset as per the chart.js docs, indicating that I would not like the ticks to auto skip.
<%= line_chart [
{ name: "Successes", data: #successful_requests },
{ name: "Errors", data: #error_requests }
],
dataset:{
scaleShowValues: true,
scales: {
xAxes: [{
ticks: {
autoSkip: false
}
}]
}
},
legend: "bottom",
messages: { empty: "Awaiting your first request!" }
%>
I expect the chart to show a dataset an x-axis that is labeled at all points on the x-axis.
From the docs:
autoSkip
If true, automatically calculates how many labels can be shown and hides labels accordingly.
maxTicksLimit
Maximum number of ticks and gridlines to show.
The autoSkip option controls whether some of the labels on the axes ticks are automatically skipped when the label texts would otherwise overlap. To control the number of ticks being displayed, what you're looking for is maxTicksLimit and related options. For your use case, you should probably set maxTicksLimit depending on the size of your data sets.
Also, these options can't be set on the datasets directly. Instead, you need to pass them through Chartkick to Chart.js by using the library option. So, something like this should achieve what you're trying to do:
<%= line_chart [
{ name: "Successes", data: #successful_requests },
{ name: "Errors", data: #error_requests }
],
library: {
scales: {
xAxes: [{
ticks: {
maxTicksLimit: #successful_requests.size
}
}]
}
},
legend: "bottom",
messages: { empty: "Awaiting your first request!" }
%>
Note that I'm assuming both your data sets are always of the same length.
As you can see from the picture below, the chart cannot use 100% of the antd row's width. I tried setting the width to 100% and window.innerWidth but none of those worked.
The chart is drawn using react-chartjs-2 which is a thin wrapper of chart.js, and I have not found any useful information from their documentations yet.
I also found this Chart.js responsive option - Chart not filling container, but my packages are the latest versions when checked (react-chartjs-2#2.7.6 and chart.js#2.8.0).
I have been banging my head over this for a while now, and I am not sure where to look for clues next. If you know something about this please inform me, thank you very much!
Here is the options I used for the bar chart:
var options = {
scales: {
yAxes: [{
ticks: {
beginAtZero: true,
min: 0,
maxTicksLimit: 5
},
gridLines: {
display: true
}
}],
xAxes: [{
barPercentage: 0.7,
gridLines: {
display: false
},
offset: true,
type: "time",
time: {
unit: "day",
stepSize: 1
}
}]
},
maintainAspectRatio: true
};
Its render method (I am using React):
render() {
return (
<Bar
data={this.state.chartData}
width={this.state.appWindow.width}
height={this.state.appWindow.width*0.5}
options={this.changeDateOptions(options)}
legend={legend}
/>
)
//}
}
The style used for ant-row:
const rowStyle = {
width: '100%',
display: 'flex',
flexFlow: 'row wrap',
};
And the picture showing how the chart does not fill 100% of the width:
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