Dotted LineCartesianLayer

[ivaylopenevmg]

Question

Hello, is it possible to have a dotted line for a LineCartesianLayer?

In the example above I already have LineCartesianLayer, however I need it to be dotted, and also start from the same level as the beginning of the column.

I use the following code for the line:

rememberLineCartesianLayer( lineProvider = LineCartesianLayer.LineProvider.series( LineCartesianLayer.rememberLine( fill = remember { LineCartesianLayer.LineFill.single(fill(alwaysOnColor)) }, cap = StrokeCap.Square, thickness = 1.dp ) ), ),

Vico version(s)

No response

UI framework(s)

Jetpack Compose

[Tyler-Lopez]

Hi, I might recommend looking into implementing your own LineCartesianLayer.Line by creating your own equivalent of LineCartesianLayer.rememberLine. When you look at the override functions available to you this may become clear for how to achieve it.

[ivaylopenevmg]

Hello, thank you for the reply. Creating an equivalent for LineCartesianLayer.rememberLine sees like an overkill just for having a dash effect. I'm trying with a custom LineCartesianLayer.LineFill but the line doesn't change to dashed. Any idea why?

class SMPGraphDottedLineCartesianLayer(val fill: Fill): LineCartesianLayer.LineFill {
    private val paint =
        Paint(Paint.ANTI_ALIAS_FLAG).apply {
            color = fill.color
            xfermode = PorterDuffXfermode(PorterDuff.Mode.SRC_IN)
            // Set up the dotted line using DashPathEffect
            pathEffect = DashPathEffect(floatArrayOf(10f, 20f), 0f) // Adjust values for dot and gap size
            style = Paint.Style.STROKE
        }

    override fun draw(
        context: CartesianDrawingContext,
        halfLineThickness: Float,
        verticalAxisPosition: Axis.Position.Vertical?,
    ) {
        with(context) {
            paint.shader =
                fill.shader?.provideShader(
                    this,
                    layerBounds.left,
                    layerBounds.top,
                    layerBounds.right,
                    layerBounds.bottom,
                )
            canvas.drawPaint(paint)
        }
    }
}

[Tyler-Lopez]

I suspect the challenge here, and I could be wrong - there could be a more simple way to do this, is that LineFill already draws a black line even if you comment out the body of override fun draw. In draw, you also don't have access to the path itself. So, to my understanding, draw just exists to plonk a color or gradient atop the line that is already drawn. I think to do dashes correctly, you would need the path.

I'm sure doing this more simply is an intended feature, I also saw a PR some time ago for it; perhaps that had merged?

In my case in the past, I set LineFill to Transparent, used PointConnector to get the path of the line that would be drawn, and then drew the line with the path in what I believe was one of the line override functions, such as drawInternal.

[Gowsky]

Hello, is it possible to have a dotted line for a LineCartesianLayer?

Dashed/dotted lines aren't supported out of the box at the moment, but as mentioned under #469, we plan on adding such functionality. We want to look into it soon. In the meantime, you can implement this yourself via subclassing.

I might recommend looking into implementing your own LineCartesianLayer.Line by creating your own equivalent of LineCartesianLayer.rememberLine

You don't necessarily need a Line.rememberLine equivalent. All you have to do is create a Line subclass and apply DashPathEffect to Line.linePaint. You can instantiate the subclass normally and use remember directly.

LineFill already draws a black line even if you comment out the body of override fun draw

Yes, a line mask is drawn regardless of what LineFill.draw does. However, it's not LineFill that's responsible for this. As the name suggests, LineFill draws only the fill. The mask is drawn by Line.draw, using Line.linePaint.

So, to my understanding, draw just exists to plonk a color or gradient atop the line that is already drawn.

That's right.

I think to do dashes correctly, you would need the path.

You need just the Paint used to draw the line. That's Line.linePaint, which I mentioned above. However, the Path is also available in Line.draw — see the path argument.

perhaps that had merged

The PR was closed due to inactivity, but as mentioned above, we'll be adding this feature ourselves.

and also start from the same level as the beginning of the column.

Could you be more specific? Which edge of which column are you referring to? Do you need the start of the line to be where the left edge of the first column stack is?

[ivaylopenevmg]

Thank you! The solution for the dotted line worked, regarding the other question is no longer relevent.

[spencerhowell]

Hi @Gowsky,

Regarding this statement:

You don't necessarily need a Line.rememberLine equivalent. All you have to do is create a Line subclass and apply DashPathEffect to Line.linePaint. You can instantiate the subclass normally and use remember directly.

Unless I am missing something obvious, within the Line class linePaint is protected, and the draw function is final, making this subclassing solution impossible at the moment.

Is there an easy way around this limitation? Or do you have any recommendations?

@ivaylopenevmg How were you able to modify linePaint in your solution?

[Gowsky]

Hello, @spencerhowell. protected means the property is accessible in subclasses. Therefore, you can mutate the linePaint in e.g. init block. Consequently, it is possible.

[spencerhowell]

@Gowsky You're absolutely correct, I completely forgot about using an init block in this context. Thank you very much for the speedy response!

[ivaylopenevmg]

Here is my solution just in case:

@Composable
fun rememberDottedLine(): DottedLine {
    val lineFill =
        LineCartesianLayer.LineFill.single(fill(colorResource(R.color.energyTypeAlwaysOnPrimary)))
    return remember { DottedLine(lineFill) }
}

class DottedLine(fill: LineCartesianLayer.LineFill) : LineCartesianLayer.Line(fill) {
    init {
        linePaint.apply {
            strokeWidth = 2f
            pathEffect = android.graphics.DashPathEffect(floatArrayOf(10f, 10f), 0f)
        }
    }
}