Hide or show the measures dropdown on the chart

Flexmonster Pivot Charts

by Flexmonster Pivot Table

HTML

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

<p>
  When the
  <a
    href="https://www.flexmonster.com/api/chart-options-object/#showonemeasureselection"
    target="_blank"
  >chart.showOneMeasureSelection</a> is set to <code>true</code>, the measures dropdown
  is always visible, regardless of the number of measures in it.
</p>

<div class="switch-container compact">
  <label class="switch">
    <input type="checkbox" onclick="toggleControl()" checked />
    <span class="slider round"></span>
  </label>
  <span class="text">Show dropdown with one measure</span>
</div>

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

CSS

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

/* Charts Style  */
.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-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;
}

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

JavaScript

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

function toggleControl() {
  let options = pivot.getOptions();
  let value = options.chart.showOneMeasureSelection
  value == true ? options.chart.showOneMeasureSelection = false : options.chart.showOneMeasureSelection = true;
  pivot.setOptions(options);
  pivot.refresh();
}