ApexChart.js color is fixed to Blue (I think it's Lumo?)

Flow
1

Apologies for the newbie question.

I cloned the apexchart-flow from https://github.com/appreciated/apexcharts-flow.git, it shows colorful charts.

Then tried it on my web application (without changing the styles or whatsoever), but it remains on the shade of blue. I think it automatically matches my Lumo theme. How do I change that? I want the Lumo theme but make the charts colorful.

Attached is my CSS.
17751979.html (3.05 KB)

2

Hi John,

The demo linked on that page (https://appreciated-collection.herokuapp.com/apexcharts/) is all blue.

You can set the chart colors using --vaadin-charts-color-0, --vaadin-charts-color-1 and so on.

Example

<dom-module id="my-chart" theme-for="vaadin-chart">
  <template>
    <style include="vaadin-chart-default-theme">
      :host {
        --vaadin-charts-color-0: var(--lumo-primary-color);
        --vaadin-charts-color-1: var(--lumo-error-color);
	  }
    </style>
  </template>
</dom-module>
3

You can simply add colors in a pie chart like this:

chart.setColors(“#0040FF”,“#FA58F4”);