Hide or show overlapping labels in the pie chart

Flexmonster Pivot Charts

by Flexmonster Pivot Table

HTML

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

<p>
  Use the
  <a
    href="https://www.flexmonster.com/api/chart-options-object/#showalllabels"
    target="_blank"
  >chart.showAllLabels</a> property to show or hide overlapping labels in the pie chart.
</p>

<div class="switch-container">
  <label class="switch">
    <input type="checkbox" onclick="toggleControls()" />
    <span class="slider round"></span>
  </label>
  <span class="text">Show all labels</span>
</div>

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

CSS

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

JavaScript

let pivot = new Flexmonster({
  container: "pivot-container",
  componentFolder: "https://cdn.flexmonster.com/",
  toolbar: true,
  report: {
    dataSource: {
      filename: "data/data.json",
    },
    slice: {
      columns: [
        {
          uniqueName: "[Measures]",
        },
      ],
      expands: {
        rows: [
          {
            tuple: ["country.[australia]"],
          },
          {
            tuple: ["country.[canada]"],
          },
          {
            tuple: ["country.[united kingdom]"],
          },
          {
            tuple: ["country.[germany]"],
          },
          {
            tuple: ["country.[france]"],
          },
          {
            tuple: ["country.[united states]"],
          },
        ],
      },
      measures: [
        {
          aggregation: "sum",
          uniqueName: "Price",
        },
      ],
      rows: [
        {
          uniqueName: "Country",
        },
        {
          uniqueName: "Category",
        },
      ],
    },
    options: {
      viewType: "charts",
      configuratorButton: false,
      chart: {
        type: "pie",
        showFilter: false,
        showMeasures: false,
        showAllLabels: false,
      },
    },
  },
});

function toggleControls() {
  const options = pivot.getOptions();
  const newValue = options.chart.showAllLabels === true ? false : true;
  options.chart.showAllLabels = newValue;
  pivot.setOptions(options);
  pivot.refresh();
}