Change chart colors at runtime

Flexmonster Pivot Charts

by Flexmonster Pivot Table

HTML

<script src="https://cdn.flexmonster.com/flexmonster.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tinycolor/1.4.1/tinycolor.min.js"></script>

<div>
  <p>
    This example shows how chart colors can be changed at runtime using the
    <a
      href="https://www.flexmonster.com/api/customizechartelement/"
      target="_blank"
    >customizeChartElement</a> API call.
  </p>
  <p>
    Here, each color from a selected palette is assigned to a specific field
    member. This means that if a member is expanded or drilled down, its color
    won't be applied to the nested members — they will have their default
    colors. If you need an example where a custom chart color is applied to
    nested members as well, see
    <a href="https://jsfiddle.net/flexmonster/0t8gv2cp/" target="_blank"
    >Change color for a certain member on charts</a>.
  </p>
</div>

<p><strong>Available palettes</strong></p>
<div class="container">
  <span>Retro:</span>
  <div class="color-square" style="background-color: #bb3e03"></div>
  <div class="color-square" style="background-color: #ca6702"></div>
  <div class="color-square" style="background-color: #ee9b00"></div>
  <div class="color-square" style="background-color: #fcbf49"></div>
  <div class="color-square" style="background-color: #94d2bd"></div>
  <div class="color-square" style="background-color: #0a9396"></div>
  <div class="color-square" style="background-color: #026273"></div>
</div>

<div class="container">
  <span>Fresh:</span>
  <div class="color-square" style="background-color: #24658d"></div>
  <div class="color-square" style="background-color: #429eb0"></div>
  <div class="color-square" style="background-color: #379a86"></div>
  <div class="color-square" style="background-color: #388968"></div>
  <div class="color-square" style="background-color: #8fb140"></div>
  <div class="color-square" style="background-color: #cad849"></div>
  <div class="color-square"...

CSS

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

.container {
  align-items: center;
  display: inline-flex;
  padding: 0 10px;
  column-gap: 7px;
  font-size: 14px;
  margin-top: 5px;
}

.color-square {
  display: inline-block;
  width: 30px;
  height: 30px;
  border: none;
  border-radius: 50%;
}

JavaScript

const pivot = new Flexmonster({
  container: "pivot-container",
  componentFolder: "https://cdn.flexmonster.com/",
  height: 500,
  report: {
    dataSource: {
      filename: "data/data.csv"
    },
    slice: {
      columns: [
        {
          uniqueName: "Country"
        },
        {
          uniqueName: "[Measures]"
        }
      ],
      measures: [
        {
          uniqueName: "Price",
          format: "currency"
        }
      ]
    },
    options: {
      viewType: "charts",
      readOnly: true,
      chart: {
        type: "column"
      }
    },
    formats: [
      {
        name: "currency",
        currencySymbol: "$",
      }
    ]
  }
});

let fmColors = {};

pivot.on("reportcomplete", () => {
  pivot.off("reportcomplete");
  fetchInitialColors();
  pivot.customizeChartElement(customizeFunction);
})

const colorSelect = document.getElementById('colors');
const colors = {
  "retro": [tinycolor('#bb3e03'), tinycolor('#ca6702'), tinycolor('#ee9b00'), tinycolor('#fcbf49'), tinycolor('#94d2bd'), tinycolor('#0a9396'), tinycolor('#026273')],
  "fresh": [tinycolor('#24658d'), tinycolor('#429eb0'), tinycolor('#379a86'), tinycolor('#388968'), tinycolor('#8fb140'), tinycolor('#cad849'), tinycolor('#115a43')]
};
let selectedColors = colors.retro;

colorSelect.addEventListener("change", (event) => {
  selectedColors = colors[event.target.value];
  fetchInitialColors();
  pivot.customizeChartElement(customizeFunction);
});


function customizeFunction(element, data) {
  if (data.type == "legend") {
    element.querySelector(".fm-icon-display").style.backgroundColor = fmColors[data.label];
  } else {
    element.style.fill = fmColors[data.label];
  }
}

function fetchInitialColors() {
  const memberLabels = pivot.getMembers(pivot.getReport().slice.columns[0].uniqueName).map(m => m.caption);
  for (let i in memberLabels) {
    fmColors[memberLabels[i]] = selectedColors[i];
  }
}