I am using the MPAndroidChart library in my Android project to plot a line chart where the Y-axis represents timestamps and the X-axis represents values. I want the chart to be drawn vertically, with the line starting from the top and progressing downward (i.e., the chart should be rotated 90 degrees counterclockwise).
Currently, the chart is drawn horizontally from left to right, but I need the following layout:
- The Y-axis on the left should display timestamps (in portrait mode).
- The X-axis at the top should display the corresponding values.
- The line should be drawn from top to bottom, not from left to right.
I’ve tried rotating the chart using the available settings, but I can’t achieve the desired vertical layout where the chart is drawn downward. Also, I swapped the timestamp data to the Y array and values to the X array, but the chart still draws from left to right.
I also tried using the is setInverted but that only inverts the specific axis.
This is a test project I created for testing this:
drawGraphUsingValues(
listOf(
OffsetDateTime.parse("2024-05-02T17:18:10.000+00:00", DateTimeFormatter.ISO_OFFSET_DATE_TIME),
OffsetDateTime.parse("2024-05-02T17:18:12.000+00:00", DateTimeFormatter.ISO_OFFSET_DATE_TIME),
OffsetDateTime.parse("2024-05-02T17:18:13.000+00:00", DateTimeFormatter.ISO_OFFSET_DATE_TIME),
OffsetDateTime.parse("2024-05-02T17:18:15.000+00:00", DateTimeFormatter.ISO_OFFSET_DATE_TIME),
OffsetDateTime.parse("2024-05-02T17:18:16.000+00:00", DateTimeFormatter.ISO_OFFSET_DATE_TIME),
OffsetDateTime.parse("2024-05-02T17:18:17.000+00:00", DateTimeFormatter.ISO_OFFSET_DATE_TIME),
OffsetDateTime.parse("2024-05-02T17:18:18.000+00:00", DateTimeFormatter.ISO_OFFSET_DATE_TIME),
OffsetDateTime.parse("2024-05-02T17:18:19.000+00:00", DateTimeFormatter.ISO_OFFSET_DATE_TIME)
),
listOf(22f, 33f, -11f, 55f, 100f, 200f, 15f, 40f)
)
private fun drawGraphUsingValues(
timeStampAxisList: List<OffsetDateTime>,
valueAxisList: List<Float>,
) {
val minTimestamp = timeStampAxisList.minByOrNull { it.toInstant() }!!.toInstant()
val entries: MutableList<Entry> = ArrayList()
valueAxisList.forEachIndexed { index, value ->
val currentInstant = timeStampAxisList[index].toInstant()
val millisBetween = ChronoUnit.SECONDS.between(minTimestamp, currentInstant).toFloat()
entries.add(Entry(value, millisBetween))
}
Collections.sort(entries, EntryXComparator())
val dataSet2 = LineDataSet(entries, "test chart")
dataSet2.setDrawCircles(true)
dataSet2.lineWidth = 2f
binding.lineChart.description.isEnabled = false
with(binding.lineChart) {
legend.isEnabled = false
isDragEnabled = true
isDoubleTapToZoomEnabled = true
axisLeft.apply {
setDrawLabels(true)
axisMinimum = valueAxisList.min()
valueFormatter = object : ValueFormatter() {
override fun getAxisLabel(value: Float, axis: AxisBase?): String {
val baseDate = minTimestamp
val duration = Duration.ofSeconds(value.toLong())
val date = baseDate.plus(duration)
return date.format(DateTimeFormatter.ofPattern("MMM dd yyyy"))
}
}
}
setPinchZoom(true)
setScaleEnabled(true)
data = LineData(dataSet2)
invalidate()
}
}
This code renders the following:
Actual chart
What I’m trying to achieve is the following:
Desire chart
Is this possible with MPAndroidChart ? if that’s the case could someone provide guidance on how to achieve this orientation using MPAndroidChart? thanks!