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<LineParameters> = 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 ) } } `