How to skew the x axis labels in canvas in Kotlin

19 views Asked by At

I want to skew the x axis labels so that values can be easily visible. It can be 90 degree skew or 45 degree.

override fun onDraw(canvas: Canvas) {
    super.onDraw(canvas)

    // Check if we have enough data points to draw the chart
    if (dataPoints.size < 2) return

    val startX = paddingLeft.toFloat()
    val endX = width - paddingRight.toFloat()
    val startY = height - paddingBottom.toFloat()
    val endY = paddingTop.toFloat()

    val maxYValue = 125 // Maximum y-value

    val dataPointCount = dataPoints.size
    val segmentWidth = (endX - startX) / (dataPointCount - 1)

    // Paint for drawing lines
    val linePaint = Paint().apply {
        color = Color.BLACK
        strokeWidth = 2f
        isAntiAlias = true
    }

    // Draw x-axis
    canvas.drawLine(startX, startY, endX, startY, linePaint)

    // Draw y-axis
    canvas.drawLine(startX, startY, startX, endY, linePaint)

    // Draw labels for x-axis
    val xLabelY = startY + 40
    val rpnPaint = Paint().apply {
        color = Color.BLACK
        textSize = 24f
        textAlign = Paint.Align.LEFT
        typeface = Typeface.DEFAULT_BOLD // Bold typeface for labels
    }
    val textPaintY = Paint().apply {
        color = Color.BLACK
        textSize = 24f
        textAlign = Paint.Align.RIGHT
        typeface = Typeface.DEFAULT_BOLD // Bold typeface for labels
    }
    val textPaintX = Paint().apply {
        color = Color.BLACK
        textSize = 24f
        textAlign = Paint.Align.CENTER
        typeface = Typeface.DEFAULT_BOLD // Bold typeface for labels
    }
    for (index in dataPoints.indices) {
        val x = startX + index * segmentWidth
        val labelText = SimpleDateFormat("dd/MM/yyyy").format(dataPoints[index].first ?: Date())
        canvas.drawText(labelText, x, xLabelY, textPaintX)
    }

    // Draw labels for y-axis
    val yLabels = listOf("0", "25", "50", "75", "100", "125")
    for (label in yLabels) {
        val yValue = label.toFloat() * (startY - endY) / maxYValue
        canvas.drawText(label, startX - 20, startY - yValue, textPaintY)
    }

    // Draw data points and labels
    for (index in dataPoints.indices) {
        val x = startX + index * segmentWidth
        val y = startY - (dataPoints[index].second ?: 0) * (startY - endY) / maxYValue

        // Draw data point
        canvas.drawCircle(x, y, 8f, linePaint)

        // Draw label for RPN value (bold)
        val rpnLabel = dataPoints[index].second.toString()
        canvas.drawText(rpnLabel, x + 12, y - 12, rpnPaint)

        if (index > 0) {
            val prevX = startX + (index - 1) * segmentWidth
            val prevY = startY - (dataPoints[index - 1].second ?: 0) * (startY - endY) / maxYValue

            // Draw line between data points
            canvas.drawLine(prevX, prevY, x, y, linePaint)
        }
    }
}

I was trying to skew the matrix and then reset it but it is causing the graph line to skew. I tried to do it only for the x axis label but it is not working.

Can anyone please help me do that?

0

There are 0 answers