Apply conditional formatting based on another field’s value

Conditional formatting

by Flexmonster Pivot Table

HTML

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

<div>
  <h2>Apply conditional formatting based on another field's value</h2>
  <p>
    This example shows how to apply conditional formatting based on another
    field's value. It can be done by specifying the field's
    <a
      href="https://www.flexmonster.com/api/measure-object/#aggregation"
      target="_blank"
    >aggregation</a> and
    <a
      href="https://www.flexmonster.com/api/measure-object/#uniquename"
      target="_blank"
    >uniqueName</a> in the <code>formula</code> property.
  </p>
  <p>
    We are formatting the <code>"Price"</code> measure based on the value of the
    <code>"Quantity"</code> measure. Check out how the the
    <code>formula</code> property is specified (line 29 in the JavaScript box).
    Note that the formatting feature will work even if the
    <code>"Quantity"</code> is not included in the slice.
  </p>
  <p>
    Learn more about
    <a
      href="https://www.flexmonster.com/doc/conditional-formatting/"
      target="_blank"
    >conditional formatting</a> in Flexmonster.
  </p>
</div>

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

CSS

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

JavaScript

const pivot = new Flexmonster({
  container: "pivot-container",
  componentFolder: "https://cdn.flexmonster.com/",
  height: 430,
  toolbar: true,
  report: {
    dataSource: {
      filename: "data/data.csv"
    },
    slice: {
      rows: [
        {
          uniqueName: "Category"
        }
      ],
      measures: [
        {
          uniqueName: "Price"
        },
        {
          uniqueName: "Quantity",
          aggregation: "min"
        }
      ]
    },
    conditions: [
      {
        measure: "Price",
        formula: "min('Quantity') >= 100",
        format: {
        	fontSize: "14px",
          fontWeight: "bold",
          backgroundColor: "#FF79CD", // Pink
          color: "#FFFFFF"
        }
      }
    ]
  }
});