[Bug]: Dygraph charts not changing colours when "data-colors" amended.

[loveaj]

Bug description

I'm using netedata charts in React JSX components.

When I change the "data-colors" parameter of the chart to custimise the colours, nothing changes in the displayed chart. Inspecting the HTML of the displayed page shows the amended parameter, it's just not being used. See screenshot.

The colour values specified are blue and green. The graph shows pink and yellow.

Expected behavior

Changing the "data-colors" parameter and deploying another build should show the new chart colours.

Steps to reproduce

1. Embed a netdata chart in a React JSX component and customise the colours using the "data-colors" parameter.
2. Deploy and view the page. The original colours will be displayed.
3. Change the colours in the "data-colors" parameter and rebuild the React app.
4. Deploy and view the page. The original colours will be displayed not the new ones.

Screenshots

Error Logs

No response

Desktop

OS: Linux, MacOS, Windows
Browser Chrome, Edge
Browser Version Chrome version 111.0.5563.64 (Official Build) (64-bit)

Additional context

No response

[hugovalente-pm]

@novykh is this something specific to the netdata/dashboard repo or generic to charts?

[ktsaou]

@loveaj it works like this:

<div data-netdata="apps.cpu"
             data-width="100%"
             data-height="300px"
             data-after="-60"
             data-points="60"
             data-debug="false"
             data-decimal-digits="0"
             data-dt-element-name="time903"
             data-colors="#000000 #111111 #222222 #333333 #444444"
        ></div>

Result:

Without data-colors is like this:

The dashboard appends also the normal pallet to your colors, so that if the chart needs more colors, it will have them.

[loveaj]

@ktsaou That is exactly what I am doing. In your example I initially code the chart as:

<div data-netdata="apps.cpu" data-width="100%" data-height="300px" data-after="-60" data-points="60" data-debug="false" data-decimal-digits="0" data-dt-element-name="time903" data-colors="#000000 #111111 #222222 #333333 #444444" ></div>

   Then at some point I decide I want a different colour palette and so I change the code to:

   `<div data-netdata="apps.cpu"
         data-width="100%"
         data-height="300px"
         data-after="-60"
         data-points="60"
         data-debug="false"
         data-decimal-digits="0"
         data-dt-element-name="time903"
         data-colors="#555555 #666666 #777777 #888888 #999999"
    ></div>`

But when I display the chart the colours remain just as they did before.

[loveaj]

It's only seems to be a problem with the dygraph chart type.
The google chart type works ok but I can't use that because it makes a call out to an external google api which is blocked by our firewall.

[loveaj]

Is anyone able to reproduce this behaviour and investigate?