Changing chart lines to personalized colors with CSS

[Ana_Gutierrez]

Hello,
I am new to using CSS and I wanted to change the color lines of my chart. My chart consists of 2 lines and I know that I have to create the CSS code and paste it on the Settings- Appearance- Custom CSS, and then add the CSS class to my specific chart. I have the following code:

.graph-line-primary {
stroke: #FF5733; /* Orange color */
}

.graph-line-secondary {
stroke: #3498DB; /* Blue color */
}

My question is, do I need to change something inside the inspection code? Where do I paste that code? What would be my CSS class to paste on the chart?

[ThinhDinh]

First, set a custom class name here so it only affects that specific chart. I’m assuming you don’t want this in all charts.

Then this.

svg[class*="recharts-surface"] :nth-child(3) path {
stroke: #FF5733;
}

svg[class*="recharts-surface"] :nth-child(4) path {
stroke: #3498DB;
}

[Ana_Gutierrez]

Thanks!! Do I need to mention the class name somewhere in the custom CSS? I tried it as the screenshots, but it does not change the color.

[ThinhDinh]

Can you show me what you have set up?

[Ana_Gutierrez]

This is what I have, the graph I want to modify is the line chart on the left, in which i added the CSS class of chart-custom-color

[ThinhDinh]

I’ll take a look tomorrow my time, thanks for the screenshots.

[Ana_Gutierrez]

Ok Thanks!

[ThinhDinh]

I don’t think you need the custom CSS class. This is what I have and it looks like it’s working.

Just to confirm, do you have just 2 lines on your chart?

[Eduardo]

That kinda works, but when you hover the mouse through the graph the relation of colors (nth-child) change. Also, it doesn’t change the colors in the legend, neither the static legend nor the hovering legend. I’ve been trying to find a workaround for that, but my knowledge of css is shallow.

[ThinhDinh]

I agree. If there’s too much stuff to change I would rather just use Quickcharts or Chart.js to not rely on CSS.