wuxudong
commented
1 year ago Using unix time with milli seconds may not be a good idea in Android. check https://github.com/wuxudong/react-native-charts-wrapper/issues/759.
and following config may help to control you x labels.
axisMaximum: PropTypes.number,
axisMinimum: PropTypes.number,
granularity: PropTypes.number,
granularityEnabled: PropTypes.bool,
labelCount: PropTypes.number,
labelCountForce: PropTypes.bool,
*Do read files under `lib/` before reporting issues, you can find all the config there, all of them are straightforward.**
Expected Behavior
I have a problem where I want to show constant values in the xaxis label such as the first minute of 24 hours such as "12:00 AM", "01:00 AM", "02:00 AM" etc.
Actual Behavior
But with with my data it always picks up a default set of times such as "01:43 AM", "04:30 AM", "07:17 AM" etc.
Screenshots
Data and config
My data looks like below
const data=[{"x": 1676592886396, "y": 373}, {"x": 1676592946396, "y": 307}, {"x": 1676593006396, "y": 427}, {"x": 1676593066396, "y": 274}, {"x": 1676593126396, "y": 489}, {"x": 1676593186396, "y": 312}, {"x": 1676593246396, "y": 377}, {"x": 1676593306396, "y": 267}, {"x": 1676593366396, "y": 289}, {"x": 1676593426396, "y": 370}, {"x": 1676615754106, "y": 464}, {"x": 1676615814106, "y": 390}, {"x": 1676615874106, "y": 253}, {"x": 1676615934106, "y": 407}, {"x": 1676615994106, "y": 271}, {"x": 1676616054106, "y": 386}, {"x": 1676616114106, "y": 378}, {"x": 1676616174106, "y": 310}, {"x": 1676616234106, "y": 210}, {"x": 1676616294106, "y": 293}, {"x": 1676617233263, "y": 265}, {"x": 1676617293263, "y": 214}, {"x": 1676617353263, "y": 401}, {"x": 1676617413263, "y": 318}, {"x": 1676617473263, "y": 419}, {"x": 1676617533263, "y": 214}, {"x": 1676617593263, "y": 393}, {"x": 1676617653263, "y": 279}, {"x": 1676617713263, "y": 318}, {"x": 1676617773263, "y": 412}]
const wakeHoursStart = new Date().setHours(0); const wakeHoursEnd = new Date().setHours(24);
<LineChart style={styles.chart} drawGridBackground={false} drawBorders={true} chartDescription={{ text: '' }} data={{ dataSets: [ { values: data, config: { drawValues: false, drawCircles: false }, }, ], }} legend={{ enabled: false, }} xAxis={{ drawGridLines: false, valueFormatter: 'date', valueFormatterPattern:
hh:mm a, timeUnit: 'MILLISECONDS', position: 'BOTTOM', axisMinimum: wakeHoursStart, axisMaximum: wakeHoursEnd, labelRotationAngle: 90, labelCount: 12, }} yAxis={{ left: { drawGridLines: false, }, right: { drawGridLines: false, enabled: false, }, }} />Steps to Reproduce the Problem
Setup the above data and LineChart
Specifications