Not sure if this should be in another channel, fee...

# compose

[Nicolai]

Not sure if this should be in another channel, feel free to correct me.

I've made a demo app for creating a LineChart that when scrubbing highlights the current scrub index. The other part of the chart is suppose to be dimmed down to make the highlight pop more.
The issue I have is when I dim down the line I can see the points. Is there a way to dim them down too?
I'm using a Box with a Modifier.drawBehind

Appreciate any help 🙏

[Priyanka Fulwari]

In Jetpack Compose, instead of Modifier.drawBehind, you can use below code
Modifier.drawWithContent {
drawContent()
drawRect(
color = Color.Black.copy(alpha = 0.5f),
blendMode = BlendMode.SrcOver
)
}

let me know if this helps

[Nicolai]

Thanks for replying! How would you use that to draw a Line chart?

[Priyanka Fulwari]

Can you provide me the block of code where you are getting the issue

[Michael Paus]

You seem to be drawing the graph by drawing individual lines between the points. As these lines have a width they overlap at the points. Because the line color has some alpha the points appear as being painted twice and the color gets more intensive at these overlaps. You can only avoid that if you draw the whole graph as a single Path so that there are no overlaps.

[romainguy]

blendMode = BlendMode.SrcOver this is unnecessary, SrcOver is the default

[Jobby]

Maybe you can draw the chart fully white as a single path, like @Michael Paus suggested and then dimm the less important parts down like in the 'flashlight keyhole' example here:
https://developer.android.com/develop/ui/compose/graphics/draw/modifiers
Just don't dim it to total black, but to let's say to 70% or so and use the position of your index instead of a drag?
Just an idea...