fix: color array support in charts

[edgant]

Fix broken support for color arrays introduced in

• feat: css vars support in charts (feat: css vars support in charts #945) (36f7dd3)

[lukasvinclav]

Do we have an issue where I can read more about this issue? On the demo site, I can change chart colors without any issues.

[edgant]

This is useful to to continue supporting when colors are passed as an array of strings instead of string to a chart component:

def dashboard_callback(request, context):
    context.update(
        {
            "kpis": {
                "credits": {
                    "chart": json.dumps(
                        {
                            "labels": [
                                "A", "B", "C"
                            ],
                            "datasets": [
                                {
                                    "data": [1, 2, 3],
                                    "backgroundColor": ["#0EA5E9", "#F43F5E", "#CBD5E1"],
                                },
                            ],
                        },
                    ),
                },
            },
        }
    )
    return context

In the template this way:

{% component "components/chart/bar.html" with data=kpis.credits.chart options=kpis.credits.options %}{% endcomponent %}

This is especially helpful in doughnut charts (although not officially supported yet) as each dougnut section needs to have different colors:
components/chart/doughnut.html

<div class="relative w-full{% if class %} {{ class }}{% endif %}">
  <canvas class="chart" {% if options %}data-options="{{ options }}"{% endif %} data-type="doughnut" data-value="{{ data }}" {% if width %}width="{{ width }}"{% endif %} {% if height %}height="{{ height }}"{% endif %}></canvas>
</div>