I am using chart.js with react-chart-2 in react, but i got double labels below x axis how can i prevent it.
import 'chartjs-adapter-moment';
import moment from 'moment';
import {
Chart as ChartJS,
CategoryScale,
LinearScale,
PointElement,enter image description here
LineElement,
Title,
Tooltip,
Legend,
TimeScale,
} from 'chart.js';
import type { ChartData, ChartOptions } from 'chart.js';
import { Line } from 'react-chartjs-2';
import zoomPlugin from 'chartjs-plugin-zoom';
import { useRef } from 'react';
ChartJS.register(
CategoryScale,
LinearScale,
PointElement,
TimeScale,
LineElement,
Title,
Tooltip,
Legend,
zoomPlugin
);
const dump = [
{
time: 1675056240000,
soc: 62,
},
{
time: 1675056270000,
soc: 62,
},
{
time: 1675056300000,
soc: 62,
},
{
time: 1675056330000,
soc: 62,
},
{
time: 1675056360000,
soc: 62,
},
];
let lables: number[] = [];
let values: number[] = [];
dump.map((x, i) => {
lables.push(x.time);
values.push(x.soc);
});
const data: ChartData<'line'> = {
labels: lables,
datasets: [
{
label: 'Soc',
data: values,
backgroundColor: '#03c782',
borderColor: '#03c782',
borderWidth: 1,
},
],
};
export default function Main() {
const lineGraphRef = useRef<ChartJS<'line', number[], string>>(null);
const options: ChartOptions<'line'> = {
responsive: true,
animation: false,
scales: {
y: {
ticks: {
color: 'white',
},
type: 'linear',
display: true,
position: 'left',
},
xAxis: {
type: 'time',
ticks: {
major: {
enabled: true, // <-- This is the key line
},
maxRotation: 45,
minRotation: 45,
maxTicksLimit: 12,
color: 'white',
},
display: true,
},
},
datasets: {
line: {
pointRadius: 0, // disable for all `'line'` datasets,
showLine: true,
},
},
hover: {
mode: 'x',
// intersect:false,
},
onHover: (e: any) => {
if (lineGraphRef !== null && lineGraphRef.current !== null) {
lineGraphRef.current.clear();
lineGraphRef.current.draw();
const y = e.y;
const topY = lineGraphRef.current.scales.y.top;
const bottomY = lineGraphRef.current.scales.y.bottom;
// console.log(
// moment(
// lineGraphRef.current.scales.xAxis.getValueForPixel(e.x)
// ).format('MMM Do YYYY, h:mm:ss a')
// );
let ctx = e.chart.ctx;
ctx.save();
ctx.beginPath();
ctx.moveTo(e.x, 0);
ctx.lineTo(e.x, bottomY);
ctx.lineWidth = 1;
ctx.strokeStyle = '#FFAB50';
ctx.stroke();
ctx.restore();
}
},
plugins: {
legend: {
labels: {
color: 'white',
boxWidth: 13,
},
},
tooltip: {
enabled: false,
//intersect: false,
external: (context) => {
// console.log("context", context);
},
},
zoom: {
zoom: {
// wheel: {
// enabled: true
// },
drag: {
enabled: true,
threshold: 10,
},
mode: 'x',
},
},
},
};
return (
<Line
options={options}
data={data}
ref={lineGraphRef}
/>
);
}
I have tried the display false in the xAxis but it hide upper labels that i need. I want to remove lower labels. I have tries many things but not able to remove them. Can anyone explain why there are two rows for labels.
Here I am providing code sandbox link for the same
https://codesandbox.io/s/gifted-cache-6i3lqv?file=/src/styles.css
I got the answer, in documentation it says we can use any variable for axis but it start from x for X-axis and from y for Y-axis. But it gives unexpected results when only one parameter chart. If there is single axis chart than we have to use x and only.
scales: {
y: {
ticks: {
color: 'white',
},
type: 'linear',
display: true,
position: 'left',
},
x: { /// change xAxix to only x
type: 'time',
ticks: {
major: {
enabled: true, // <-- This is the key line
},
maxRotation: 45,
minRotation: 45,
maxTicksLimit: 12,
color: 'white',
},
display: true,
},
},
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.