0
265
ViewsHow to scroll in x-axis in react-chartsjs-2
I have implemented a bar chart in react.js and I want to figure out how I can scroll in x-axis when the values are more and more. In below chart I have some search values that user do in a day. Until now I have 100+ days and I think my problem will be bigger until we reach the end of the year when I will have more values in x-axis.
My code for the chart and the options are below.
const options = {
responsive: true,
plugins: {
title: {
display: true,
},
},
};
const dataForSearchBins = {
labels,
datasets: [
{
label: "Number of searches",
data: searchBins?.map((item) => item.value),
backgroundColor: "lightBlue",
},
],
};
<Stack>
<Text style={{ textAlign: "center" }}>{`Number of clicks per ${binSize.toLowerCase()}`}</Text>
<Bar options={options} data={data} />
<Box mb={6} />
</Stack>
·
Juan Pablo Isaza
1 answers
Answer question0
You can use chartjs-plugin-zoom for this.
import zoomPlugin from 'chartjs-plugin-zoom';
import { Chart as ChartJS} from 'chart.js';
ChartJS.register(zoomPlugin);
After registering zoom plugin, modify the options object.
const options = {
responsive: true,
plugins: {
title: {
display: true,
},
zoom: {
pan: {
enabled: true,
mode: 'x'
},
zoom: {
pinch: {
enabled: true // Enable pinch zooming
},
wheel: {
enabled: true // Enable wheel zooming
},
mode: 'x',
}
}
},
};
·
Juan Pablo Isaza
Report
Answer question