CODEWITHSUNDEEP
apexcharts
alex spencer
alex spencer

Reputation: 177

How to change the color of pie charts and series? Apexcharts

I need to add more colors to the pie chart because I have more than 5 series and the colors start to repeat, which I don't need. I have tried to change colors and I can do it, but the colors of the series don't change as well.

This is the code that I put:

    var clientTypeDataL = <?php echo json_encode($clientTypeLost) ?>;
    var optionsL = {
        series: clientTypeDataL.data,
        chart: {
          width: 480,
          type: 'pie',
        },
        labels: clientTypeDataL.name,
        responsive: [{
          breakpoint: 400,
          options: {
            chart: {
              width: 200,
            },
            legend: {
              position: 'left',
              horizontalAlign: 'right',
            }
          }
        }],
        fill: {
            colors:["#1abc9c", "#2ecc71", "#3498db", "#9b59b6", "#34495e", "#16a085", "#27ae60", "#2980b9", "#8e44ad", "#2c3e50", "#f1c40f", "#e67e22", "#e74c3c", "#ecf0f1", "#95a5a6", "#f39c12", "#d35400", "#c0392b", "#bdc3c7", "#7f8c8d"]
        }
    };

    var chartx = new ApexCharts(document.querySelector("#chart-client-type-lost"), optionsL);
    chartx.render();

Image pie chart

Upvotes: 0

Views: 4194

Answers (1)

ajmirani
ajmirani

Reputation: 512

I want same changes and I have found this solution.

In .ts file

Move colors array out side of fill and in side optionsL.

var optionsL = {
            series: clientTypeDataL.data,
            chart: {
              width: 480,
              type: 'pie',
            },
            labels: clientTypeDataL.name,
            responsive: [{
              breakpoint: 400,
              options: {
                chart: {
                  width: 200,
                },
                legend: {
                  position: 'left',
                  horizontalAlign: 'right',
                }
              }
            }],
            colors:["#1abc9c", "#2ecc71", "#3498db", "#9b59b6", "#34495e", "#16a085", "#27ae60", "#2980b9", "#8e44ad", "#2c3e50", "#f1c40f", "#e67e22", "#e74c3c", "#ecf0f1", "#95a5a6", "#f39c12", "#d35400", "#c0392b", "#bdc3c7", "#7f8c8d"]
            
        };

and in .html file, we have to pass

<apx-chart
    [series]="chartOptions.series"
    [chart]="chartOptions.chart"
    [labels]="chartOptions.labels"
    [responsive]="chartOptions.responsive"
    [colors]="chartOptions.colors" <!-- This is important-->
  ></apx-chart>

For more details please visit here

Upvotes: 3

Related Questions