Line graph doesnot fill maxwidth of the screen

[Felix-Kariuki]

What
The line graph seems to occupy only a 3rd of the screen when i have a line with 10 items

How to replicate

Use these sample values to draw the line graph
val previewLineChart = listOf( 0.0, 300.0, 0.0, 117.0, 120.0, 19.0, 21.0, 4.0, 4510.0, 0.0, )

You'll notice that the line chart only occupies a 3rd of the screen yet if i use a list of points with lesser values the chart seems to occupy full width. example using this values

val previewLineChart = listOf(0.0, 300.0, 0.0, 117.0, 120.0,19.0)

• How does the size of the list of points affect the width of the line chart?
• Also i noticed that even if i explicitly do not want to display the xaxis I still have to provide the data for x Axis of the graph will break (Won't be drawn)

[KneeNinetySeven]

@Felix-Kariuki Did you notice that the chart shrinks in size also, when you add more and more data points?
I tested on iOS 17.5 and Android API 35 with 50 to 100 data points. The more I added, the smaller the chart space gets (horizontally)

[AndrewAboalhana]

Thanks for help us to know what is the problems that face you. We will make sure to solve this in the next versions ♥️

[Felix-Kariuki]

@KneeNinetySeven That's the same issue I experienced

[maqsats]

@KneeNinetySeven @Felix-Kariuki @AndrewAboalhana
You can fetch this library and make a fix in one place inside ChartContent:
val xRegionWidth = (size.width.toDp() / (xAxisData.size - 1).toDp()).toDp() - (textLayoutResult.toDp() / 2)
into
val xRegionWidth = (size.width.toDp() / xAxisData.size.toDp()).toDp()

[gulabsagevadiya]

@KneeNinetySeven @Felix-Kariuki @AndrewAboalhana You can fetch this library and make a fix in one place inside ChartContent: val xRegionWidth = (size.width.toDp() / (xAxisData.size - 1).toDp()).toDp() - (textLayoutResult.toDp() / 2) into val xRegionWidth = (size.width.toDp() / xAxisData.size.toDp()).toDp()

this worked as charm brother but there is one more problem when we add more then 6 items data in line chart

here is preview

here is code
`
@composable
fun LineChartSample() {

val testLineParameters: List = listOf(
LineParameters(
label = "Collected Fees",
data = listOf(70.0, 00.0, 50.33, 40.0, 100.500, 50.0, 70.0, 00.0, 50.33, 40.0, 100.500, 50.0,70.0, 00.0, 50.33, 40.0, 100.500, 50.0),
lineColor = TufeeAppTheme.colors.attendanceStatusPresent,
lineType = LineType.CURVED_LINE,
lineShadow = true,
),
LineParameters(
label = "Earnings",
data = listOf(60.0, 80.6, 40.33, 86.232, 88.0, 90.0, 60.0, 80.6, 40.33, 86.232, 88.0, 90.0,60.0, 80.6, 40.33, 86.232, 88.0, 90.0),
lineColor = TufeeAppTheme.colors.attendanceStatusHoliday,
lineType = LineType.CURVED_LINE,
lineShadow = true
),
LineParameters(
label = "Expenses",
data = listOf(1.0, 40.0, 11.33, 55.23, 1.0, 100.0, 1.0, 40.0, 11.33, 55.23, 1.0, 100.0,1.0, 40.0, 11.33, 55.23, 1.0, 100.0,),
lineColor = TufeeAppTheme.colors.attendanceStatusAbsent,
lineType = LineType.CURVED_LINE,
lineShadow = false,
)
)

Box(Modifier) {
LineChart(
modifier = Modifier.fillMaxSize(),
linesParameters = testLineParameters,
isGrid = true,
gridColor = TufeeAppTheme.colors.outline,
xAxisData = listOf("2015", "2016", "2017", "2018", "2019", "2020", "2015", "2016", "2017", "2018", "2019", "2020","2015", "2016", "2017", "2018", "2019", "2020"),
animateChart = true,
showGridWithSpacer = false,
yAxisStyle = TextStyle(
fontSize = 14.sp,
color = Color.Gray,
),
xAxisStyle = TextStyle(
fontSize = 14.sp,
color = Color.Gray,
fontWeight = FontWeight.W400
),
yAxisRange = 14,
oneLineChart = false,
legendPosition = LegendPosition.BOTTOM,
gridOrientation = GridOrientation.GRID
)
}
}
`