Change default chart colors

Flexmonster Pivot Charts

by Flexmonster Pivot Table

HTML

<script src="https://cdn.flexmonster.com/flexmonster.js"></script>

<div>
  <h2>How to change default chart colors</h2>
  <p>This example demonstrates how you can set custom colors for charts.</p>
  <p>
    To change the chart sector's color, use the
    <code>.fm-charts-color-n</code> selector, where <code>n</code> is a sector's
    sequence number. In this example, we've specified colors for six sectors.
  </p>
  <p>
    Notice the <code>fill: none</code> property in the
    <code>.fm-charts-color-7</code> selector. This property was defined in order
    to repeat our colors if there are more than six chart sectors.
  </p>
  <p>
    <a
      href="https://www.flexmonster.com/doc/customizing-pivot-charts/"
      target="_blank"
    >Visit our docs to learn more about customizing the charts</a>.
  </p>
</div>

<div id="pivot-container"></div>

CSS

@import url(https://cdn.flexmonster.com/assets/jsfiddle-styles.css);

.fm-charts-color-1 {
  fill: rgb(0, 164, 90) !important;
}

.fm-charts-color-2 {
  fill: rgb(223, 56, 0) !important;
}

.fm-charts-color-3 {
  fill: rgb(255, 184, 0) !important;
}

.fm-charts-color-4 {
  fill: rgb(109, 59, 216) !important;
}

.fm-charts-color-5 {
  fill: rgb(0, 117, 255) !important;
}

.fm-charts-color-6 {
  fill: rgb(206, 151, 230) !important;
}

.fm-charts-color-7 {
  fill: none !important;
}

#fm-pivot-view .fm-bar,
#fm-pivot-view .fm-charts-view .fm-chart-legend ul li .fm-icon-display,
#fm-pivot-view .fm-line,
#fm-pivot-view .fm-arc path,
#fm-pivot-view .fm-bar-stack,
#fm-pivot-view .fm-scatter-point {
  opacity: 70% !important;
}

JavaScript

let pivot = new Flexmonster({
  container: "#pivot-container",
  componentFolder: "https://cdn.flexmonster.com/",
  toolbar: true,
  report: {
    dataSource: {
      filename: "data/data.csv"
    },
    slice: {
      columns: [{
        uniqueName: "[Measures]"
      }],
      rows: [{
        uniqueName: "Country"
      }],
      measures: [{
        uniqueName: "Price",
        format: "currency"
      }]
    },
    options: {
      viewType: "charts",
      chart: {
        type: "pie"
      }
    }
  }
});