Set different color palettes for multiple chart instances

Flexmonster Pivot Charts

by Flexmonster Pivot Table

HTML

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

<div>
  <h2>How to set different color palettes for multiple chart instances</h2>
  <p>
    To set different colors for multiple chart instances, use the
    <code>#your-pivot-container-id .fm-charts-color-n</code> selector, where
    <code>n</code> is a chart sector's sequence number. Such a selector
    specifies for which Flexmonster instance you would like to change colors.
  </p>
  <p>
    You can define as many colors as you need. To repeat your colors, specify
    one more <code>#your-pivot-container-id .fm-charts-color-n</code> selector
    with the <code>fill: none</code> property.
  </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 class="row">
  <div class="title">Sales Trend</div>
  <div id="pivot-container-1"></div>
</div>
<div class="row">
  <div class="col">
    <div class="title">Sales by Category</div>
    <div id="pivot-container-2"></div>
  </div>
  <div class="col" style="float:right">
    <div class="title">Sales by Region</div>
    <div id="pivot-container-3"></div>
  </div>
</div>
<div class="row">
  <div class="title">Sales Data</div>
  <div id="pivot-container-4"></div>
</div>

CSS

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

.title {
  text-align: center;
  padding-top: 10px;
  padding-bottom: 5px;
  font-size: 15px;
}

.col {
  width: 49%;
  display: inline-block;
}

/* The color scheme for the first chart instance */

#pivot-container-1 .fm-charts-color-1 {
    fill: #ffafcc !important;
}

#pivot-container-1 .fm-charts-color-2 {
    fill: #ffc8dd !important;
}

#pivot-container-1 .fm-charts-color-3 {
    fill: #cdb4db !important;
}

#pivot-container-1 .fm-charts-color-4 {
    fill: none !important;
}

#fm-pivot-view .fm-chart .fm-circle {
  r: 8;
}

/* The color scheme for the second chart instance */

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

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

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

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

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

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

#pivot-container-2 .fm-charts-color-7 {
  fill: none !important;
}

/* The color scheme for the third chart instance */

#pivot-container-3 .fm-charts-color-1 {
  fill: rgb(255, 99, 132) !important;
}

#pivot-container-3 .fm-charts-color-2 {
  fill: rgb(255, 159, 64) !important;
}

#pivot-container-3 .fm-charts-color-3 {
  fill: rgb(255, 205, 86) !important;
}

#pivot-container-3 .fm-charts-color-4 {
  fill: rgb(75, 192, 192) !important;
}

#pivot-container-3 .fm-charts-color-5 {
  fill: rgb(54, 162, 235) !important;
}

#pivot-container-3 .fm-charts-color-6 {
  fill: rgb(153, 102, 255) !important;
}

#pivot-container-3 .fm-charts-color-7 {
  fill: rgb(201, 203, 207) !important;
}

#fm-pivot-view .fm-bar,
#fm-pivot-view .fm-charts-view...

JavaScript

new Flexmonster({
  container: "#pivot-container-1",
  componentFolder: "https://cdn.flexmonster.com/",
  licenseFilePath: "https://cdn.flexmonster.com/jsfiddle.charts.key",
  report: {
    dataSource: {
      filename: "data/region-data.json",
    	mapping: {
      	"Date": {
        	type: "date"
        },
        "Price": {
        	type: "number"
        }
      }
    },
    slice: {
      rows: [{
        uniqueName: "Date.Year"
      }],
      columns: [{
        uniqueName: "[Measures]"
      }],
      measures: [{
        uniqueName: "Price"
      }],
    },
    options: {
      viewType: "charts",
      configuratorButton: false,
      chart: {
        type: "line",
        showMeasures: false,
        showFilter: false,
      }
    }
  },
  height: 220,
});

new Flexmonster({
  container: "#pivot-container-2",
  componentFolder: "https://cdn.flexmonster.com/",
  licenseFilePath: "https://cdn.flexmonster.com/jsfiddle.charts.key",
  report: {
    dataSource: {
      filename: "data/region-data.json"
    },
    slice: {
      rows: [{
        uniqueName: "[Measures]"
      }],
      columns: [{
        uniqueName: "Category",
        filter: {
        	exclude: [ "category.[clothing]" ]
        }
      }],
      measures: [{
        uniqueName: "Price"
      }],
    },
    options: {
      viewType: "charts",
      configuratorButton: false,
      chart: {
        type: "column",
        showMeasures: false,
        showFilter: false,
      }
    }
  },
  height: 220,
});

new Flexmonster({
  container: "#pivot-container-3",
  componentFolder: "https://cdn.flexmonster.com/",
  licenseFilePath: "https://cdn.flexmonster.com/jsfiddle.charts.key",
  report: {
    dataSource: {
      filename: "data/region-data.json"
    },
    slice: {
      rows: [{
        uniqueName: "[Measures]"
      }],
      columns: [{
        uniqueName: "Region",
        filter: {
       ...