I am trying to create a react-chartjs-2 Bar graph.
I want to keep the x axis always 0% to 100%.
Now the graph displays only the maximum % in x axis (if 80% is the x value then x axis max is set as 80)
scales: {
x: {
ticks: {
color: "white",
beginAtZero: true,
max: 100%,
},
grid: {
display: false, // Hide x grid
},
},
y: {
ticks: {
color: "white",
},
grid: {
display: false, // Hide y grid
},
},
},
Looking at the docs for the Chart component options they point to the Chart.js docs where the max scale is set under a scale attribute, you have it inside the ticks property, try:
...
x: {
ticks: {
color: "white",
beginAtZero: true,
},
grid: {
display: false, // Hide x grid
},
max: 100,
},
...
Related
I have a React HorizontalBar component being used like so:
<div>
<HorizontalBar data={myData} options={myOptions} height={80} />
</div>
The options supplied are:
{
title: {
display: true,
text: 'My Title',
},
tooltips: { enabled: false },
hover: { mode: null },
legend: { display: false },
responsive: true,
maintainAspectRatio: false,
layout: {
padding: {
left: 10,
right: 10,
top: 0,
bottom: 0,
},
},
animation: {
duration: 0,
},
scales: {
xAxes: [
{
position: 'top',
gridLines: {
display: false,
},
ticks: {
beginAtZero: false,
min: 0,
max: 100,
sampleSize: 2,
callback: function (value: number, index: any, values: any) {
if (value == 0 || value == 100) {
return value;
}
return '';
},
},
stacked: true,
},
],
yAxes: [{ stacked: true }],
},
};
Currently, this is what it looks like. I've added a background color on the canvas to show you what is going on:
Several things are wrong here that I would like some help on:
I cannot figure out why there is some mysterious padding on the left side of my canvas.
I would like to compress the distance between the gradient bar and the title but nothing I've tried in regards to adding padding options to the title attribute seem to work.
Finally, there is actually supposed to be a data label that is clipped because the size of the canvas. If I adjust the height attribute of the HorizontalBar to 140, it reveals:
Basically, what I want is that data label to be shown without everything so vertically stretched out (and without the y-axis line that has appeared in the second photo).
I want it to look something like this:
How do I achieve that?
Edit: I figured out the y-axis line display issue. I just have to add gridLines: { display: false } to my yAxes option and that removes it.
Title has its own padding, defaulting to 10.
yAxis can be hidden totally to remove the space (display: false).
tickMarkLength can be set to a negative number for xAxis grid lines to move those labels closer.
You should add padding to the bottom for the data label.
I am making a line graph in React.js using react-chartjs-2. I am using a zoom and pan option. I imported zoom from react-chartjs-2 and used it later in my code. Note: If I remove this import line, the zoom function in the graph stop working:
import * as zoom from 'chartjs-plugin-zoom';
<Line
data={data}
options={{
title: {
display: true,
text: `${data.title}`,
fontSize: 20
},
legend: {
display: true,
position: 'right'
},
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
},
pan: {
enabled: true,
mode: 'x',
rangeMin: {
x: 20,
y: 20
},
rangeMax: {
x: 40,
y: 40
},
speed: 0.5
},
zoom: {
enabled: true,
mode: 'x',
rangeMin: {
x: 15,
y: 10
},
rangeMax: {
x: 20,
y: 20
},
speed: 0.5
}
}}
/>
But still getting this error:
./src/components/LineGraph.jsx
Line 3:13: 'zoom' is defined but never used no-unused-vars
Your code doesn't use the imported zoom. You have an object with a key named zoom, but nowhere do you use the imported zoom variable.
Try import 'chartjs-plugin-zoom'; instead of import * as zoom from 'chartjs-plugin-zoom'; because you just want to load the module, not reference it.
I'm creating a line chart using Chart.js. The chart has two datasets. The x-axis is date, and y-axis is the value. When I hover the first data in dataset 1, the first data in dataset 2 is also active(zoom). That isn't I expected. Is there any way to active only the hovered data. And is there any way to active all data by their y value, not by index.
I've tried edit the tooltips mode but the result is not I expected. It shows the tooltips in difference dataset with same index.
https://www.chartjs.org/docs/latest/general/interactions/modes.html
var ctx = document.getElementById("myChart");
var barChart = new Chart(ctx, {
type: 'line',
data: {
datasets: [{
label: 'Dataset 1',
data: [{
x: '2019-01-15',
y: 100
}, {
x: '2019-02-03',
y: 300
}],
backgroundColor: 'rgba(0, 0, 0, 0)',
borderColor: 'rgba(255, 0, 0, 1)',
borderWidth: 1
}, {
label: 'Dataset 2',
data: [{
x: '2019-01-03',
y: 150
}, {
x: '2019-01-15',
y: 200
}, {
x: '2019-02-06',
y: 250
}],
backgroundColor: 'rgba(0, 0, 0, 0)',
borderColor: 'rgba(0, 255, 255, 1)',
borderWidth: 1
}],
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true,
}
}],
xAxes: [{
type: 'time',
position: 'bottom',
time: {
min: "2019-1-1",
max: "2019-2-28",
unit: "month",
displayFormats: {
"month": "YYYY-MM",
}
}
}]
}
}
});
https://jsfiddle.net/t1gmrujo/2/
I've tried edit the tooltips mode but the result is not I expected. It shows the tooltips in difference dataset with same index.
The tooltip configuration controls display of the tooltip popup, not the dataset points. Points are controlled by the hover configuration. This is mentioned on the page you linked (emphasis mine):
When configuring interaction with the graph via hover or tooltips, a number of different modes are available.
If you only want the single point you are hovering over to be highlighted, use:
options: {
hover: {
mode: 'point'
}
}
If you want the whole dataset highlighted when hovering any single dataset point, use:
options: {
hover: {
mode: 'dataset'
}
}
If you want to highlight the dataset and see all dataset values in the tooltip, use:
options: {
hover: {
mode: 'dataset'
},
tooltips: {
mode: 'dataset'
}
}
I´m using a Linechart from google-chart-react.
The problem is that I can´t change the legend position to the bottom, stays on the right.
I´ve tried:
width={'70%'}
height={'200'}
chartType="Line"
data={dats}
options={{
legend:'bottom',
colors:['#95a0be','#90d6db'],
width: 800,
height: 300,
series: {
// Gives each series an axis name that matches the Y-axis below.
0: { axis: 'Temps' },
},....
if you use react-google-charts,
set chartType = "LineChart" and legend: { position: 'bottom' }
<Chart
...
chartType="LineChart"
options={{
...,
legend: { position: 'bottom' },
}}/>
I'm using react-chartjs2 in react application. I want to remove extra space as follow in this image.
Here are my chart configuration options
// chart options
const options = {
legend: {
display: false
},
scales: {
xAxes: [{
gridLines: {
color: ChartConfig.chartGridColor,
display: false
},
ticks: {
fontColor: ChartConfig.axesColor,
beginAtZero:true,
min: 0
}
}],
yAxes: [{
ticks: {
beginAtZero:true,
min: 0,
padding: 0,
display: false
},
gridLines: {
drawTicks: false,
drawBorder: false
}
}]
}
};