imaNNeo / imaNNeo/fl_chart

The date X axis not corrected

Open
#1,393 3 comments 0 reactions 0 assignees View on GitHub
Line Chart Needs Reproducible Code
Dominant language
Dart
Stars
7.6k
Forks
2k
Avg merge
9d 1h
Merged PRs (30d)
2

Description

Hi folks,
I've got a small issue here, so the graph not showing properly. Lemme explain the data first. I used the Line chart data with DateTime.

`"data": [{
"dimensions": {
"timestamp": "2023-06-26T00:00:00.000Z"
},
"event": {
"count": 1,
"ontime_percentage": 0,
"order_delayed": 1,
"order_ontime": 0
}
}, {
"dimensions": {
"timestamp": "2023-07-05T00:00:00.000Z"
},
"event": {
"count": 5,
"ontime_percentage": 0.4,
"order_delayed": 3,
"order_ontime": 2
}
}, {
"dimensions": {
"timestamp": "2023-07-07T00:00:00.000Z"
},
"event": {
"count": 21,
"ontime_percentage": 0,
"order_delayed": 21,
"order_ontime": 0
}
}
}],`

But this's the chart data that the app has parsed
[(26.0, 0.0), (5.0, 0.4), (7.0, 1.0)]
the minX in the chart starts from 1, maxX start from 30. Hence, (26.0, 0.0) is put in the end by the library, that's why we have this weird graph.

![Screenshot 2023-07-14 at 19 42 27](https://github.com/imaNNeo/fl_chart/assets/3837998/456079a7-2eed-4f85-b2ae-95c432ddc9b5)

This's our code

`Widget bottomTitleWidgets(double value, TitleMeta meta) {
return SideTitleWidget(
axisSide: meta.axisSide,
space: 4,
child: Text('${value.toInt()}',),
);
}`

`LineChart(LineChartData(
gridData: FlGridData(show: false),
borderData: FlBorderData(show: false),
titlesData: FlTitlesData(
show: true,
rightTitles: AxisTitles(
sideTitles: SideTitles(showTitles: false),
),
topTitles: AxisTitles(
sideTitles: SideTitles(showTitles: false),
),
leftTitles: AxisTitles(
sideTitles: SideTitles(showTitles: false),
),
bottomTitles: AxisTitles(
sideTitles: SideTitles(showTitles: true, reservedSize: 24, getTitlesWidget: bottomTitleWidgets),
),
),
lineBarsData: [
LineChartBarData(
spots: sourceList,
isCurved: true,
gradient: const LinearGradient(
colors: [MexColors.brandGrabGreen, MexColors.brandTropicalGreen],
),
barWidth: 2,
isStrokeCapRound: true,
dotData: FlDotData(
show: true,
),
belowBarData: BarAreaData(
show: true,
gradient: LinearGradient(
begin: FractionalOffset.bottomCenter,
end: FractionalOffset.topCenter,
colors: [MexColors.brandDugongGreen, MexColors.brandGrabGreen].map((color) => color.withOpacity(0.2)).toList(),
),
),
)
],
minX: 1,
maxX: 30));`

Lib version fl_chart: ^0.55.2. Thanks

Contributor guide

Open the contributing guide

Research direction

Reproduce the issue with the DateTime data, sourceList, and LineChartData configuration shown in the report. Start at the LineChart axis handling and inspect how the supplied spots interact with minX and maxX; done means the dated points appear in chronological x-axis order without breaking explicit numeric x values.

Written by the indexing model from the issue text.

Assessment

Tech stack
dart, flutter
Domain
data-visualization
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.