☝️Small business or a startup? See if you qualify for our special offer.
+
List of all demos

Flexmonster Pivot Charts for Vue

Flexmonster Pivot Charts is one more option to visualize aggregated data and highlight a particular subset of it.

Domain mismatchFlexmonster is used on the domain prod-flexmonster-container-service.tbvgv2m9krico.us-east-1.cs.amazonlightsail.com, which does not match the domain your license key was issued for (flexmonster.com)

Contact our team to request a key for the domain prod-flexmonster-container-service.tbvgv2m9krico.us-east-1.cs.amazonlightsail.com

You are using the following key:
Z707-XCI209-0Q203E-3I5M00-28254L-0B2Z2S-0L0T3F-1H3W3A-421F46

Current version: 2.9.109 (build 08/04/2025)

  • .vue
  • .css
<template>
  <button v-on:click="showGrid">Grid</button>
  <button v-on:click="showColumnChart">Column</button>
  <button v-on:click="showBarChart">Bar</button>
  <button v-on:click="showLineChart">Line</button>
  <button v-on:click="showScatterChart">Scatter</button>
  <button v-on:click="showPieChart">Pie</button>
  <button v-on:click="showColumnLineChart">Combo</button>
  <button v-on:click="showStackedColumn">Stacked</button>

  <Pivot
    ref="pivot"
    componentFolder="https://cdn.flexmonster.com/"
    height="500"
    v-bind:report="report"
  />
</template>

<script>
import Pivot from "vue-flexmonster/vue3";
import "flexmonster/flexmonster.css";

export default {
  name: "PivotComponent",
  components: {
    Pivot,
  },
  data() {
    return {
      report: {
        dataSource: {
          type: "json",
          filename: "https://cdn.flexmonster.com/data/demos/pivot-charts-demo-data.json",
        },
        options: {
          viewType: "charts",
          chart: {
            type: "column",
          },
        },
        slice: {
          rows: [
            {
              uniqueName: "Order Date.Month",
            },
          ],
          columns: [
            {
              uniqueName: "City",
              filter: {
                measure: {
                  uniqueName: "Orders",
                  aggregation: "sum",
                },
                query: {
                  top: 5,
                },
              },
            },
            {
              uniqueName: "[Measures]",
            },
          ],
          measures: [
            {
              uniqueName: "Orders",
              aggregation: "sum",
            },
          ],
        },
        formats: [
          {
            name: "",
            thousandsSeparator: ",",
            decimalSeparator: ".",
            decimalPlaces: 0,
          },
          {
            name: "currency",
            currencySymbol: "$",
            decimalPlaces: 2,
          },
        ],
      },
    };
  },
  methods: {
    showGrid() {
      let pivotReport = this.$refs.pivot.flexmonster.getReport();
      pivotReport.slice = {
        reportFilters: [
          {
            uniqueName: "Order Date.Year",
          },
          {
            uniqueName: "Order Date.Month",
          },
          {
            uniqueName: "Order Date.Day",
          },
        ],
        rows: [
          {
            uniqueName: "Payment Type",
          },
        ],
        columns: [
          {
            uniqueName: "[Measures]",
          },
          {
            uniqueName: "Referring Site",
          },
        ],
        measures: [
          {
            uniqueName: "Revenue",
            formula: 'sum("Amount") * sum("Price")',
            individual: true,
            caption: "Revenue",
            format: "currency",
          },
        ],
      };
      pivotReport.conditions = [
        {
          formula: "#value < 45000",
          measure: "Revenue",
          format: {
            backgroundColor: "#df3800",
            color: "#fff",
            fontFamily: "Arial",
            fontSize: "12px",
          },
        },
        {
          formula: "#value > 400000",
          measure: "Revenue",
          format: {
            backgroundColor: "#00a45a",
            color: "#fff",
            fontFamily: "Arial",
            fontSize: "12px",
          },
        },
      ];
      pivotReport.options = {
        viewType: "grid",
      };
      pivotReport.formats = [
        {
          name: "",
          thousandsSeparator: ",",
          decimalSeparator: ".",
          decimalPlaces: 0,
        },
        {
          name: "currency",
          currencySymbol: "$",
          decimalPlaces: 2,
        },
      ];
      this.$refs.pivot.flexmonster.setReport(pivotReport);
    },
    showColumnChart() {
      let pivotReport = this.$refs.pivot.flexmonster.getReport();
      pivotReport.slice = {
        rows: [
          {
            uniqueName: "Order Date.Month",
          },
        ],
        columns: [
          {
            uniqueName: "City",
            filter: {
              measure: {
                uniqueName: "Orders",
                aggregation: "sum",
              },
              query: {
                top: 5,
              },
            },
          },
          {
            uniqueName: "[Measures]",
          },
        ],
        measures: [
          {
            uniqueName: "Orders",
            aggregation: "sum",
          },
        ],
      };
      pivotReport.options = {
        viewType: "charts",
        chart: {
          type: "column",
        },
      };
      this.$refs.pivot.flexmonster.setReport(pivotReport);
    },
    showLineChart() {
      let pivotReport = this.$refs.pivot.flexmonster.getReport();
      pivotReport.slice = {
        rows: [
          {
            uniqueName: "Order Date.Year",
          },
        ],
        columns: [
          {
            uniqueName: "[Measures]",
          },
          {
            uniqueName: "Referring Site",
            filter: {
              measure: {
                uniqueName: "Orders",
                aggregation: "sum",
              },
              query: {
                top: 2,
              },
            },
          },
        ],
        measures: [
          {
            uniqueName: "Orders",
            aggregation: "sum",
          },
        ],
        sorting: {
          row: {
            type: "desc",
            tuple: [],
            measure: {
              uniqueName: "Orders",
              aggregation: "sum",
            },
          },
        },
      };
      pivotReport.options = {
        viewType: "charts",
        chart: {
          type: "line",
        },
      };
      this.$refs.pivot.flexmonster.setReport(pivotReport);
    },
    showStackedColumn() {
      let pivotReport = this.$refs.pivot.flexmonster.getReport();
      pivotReport.slice = {
        rows: [
          {
            uniqueName: "Payment Type",
            filter: {
              measure: {
                uniqueName: "Orders",
              },
              query: {
                top: 3,
              },
            },
          },
        ],
        columns: [
          {
            uniqueName: "Referring Site",
            filter: {
              measure: {
                uniqueName: "Orders",
              },
              query: {
                top: 3,
              },
            },
          },
          {
            uniqueName: "[Measures]",
          },
        ],
        measures: [
          {
            uniqueName: "Orders",
            aggregation: "sum",
          },
        ],
        sorting: {
          column: {
            type: "desc",
            tuple: [],
            measure: {
              uniqueName: "Orders",
              aggregation: "sum",
            },
          },
        },
      };
      pivotReport.options = {
        viewType: "charts",
        chart: {
          type: "stacked_column",
        },
      };
      this.$refs.pivot.flexmonster.setReport(pivotReport);
    },
    showBarChart() {
      let pivotReport = this.$refs.pivot.flexmonster.getReport();
      pivotReport.slice = {
        rows: [
          {
            uniqueName: "Referring Site",
            filter: {
              measure: {
                uniqueName: "Orders",
                aggregation: "sum",
              },
              query: {
                top: 6,
              },
            },
          },
        ],
        columns: [
          {
            uniqueName: "[Measures]",
          },
          {
            uniqueName: "Payment Type",
            filter: {
              members: ["payment type.[debit card]", "payment type.[invoice]"],
            },
          },
        ],
        measures: [
          {
            uniqueName: "Orders",
            aggregation: "sum",
          },
        ],
      };
      pivotReport.options = {
        viewType: "charts",
        chart: {
          type: "bar_h",
        },
      };
      this.$refs.pivot.flexmonster.setReport(pivotReport);
    },
    showPieChart() {
      let pivotReport = this.$refs.pivot.flexmonster.getReport();
      pivotReport.slice = {
        rows: [
          {
            uniqueName: "City",
            filter: {
              measure: {
                uniqueName: "Revenue",
              },
              query: {
                top: 5,
              },
            },
          },
        ],
        columns: [
          {
            uniqueName: "[Measures]",
          },
        ],
        measures: [
          {
            uniqueName: "Revenue",
            formula: 'sum("Amount") * sum("Price")',
            individual: true,
            format: "currency",
            caption: "Revenue",
          },
        ],
      };
      pivotReport.options = {
        viewType: "charts",
        chart: {
          type: "pie",
        },
      };
      this.$refs.pivot.flexmonster.setReport(pivotReport);
    },
    showScatterChart() {
      let pivotReport = this.$refs.pivot.flexmonster.getReport();
      pivotReport.slice = {
        rows: [
          {
            uniqueName: "Order Date.Year",
          },
        ],
        columns: [
          {
            uniqueName: "City",
            filter: {
              measure: {
                uniqueName: "Orders",
                aggregation: "sum",
              },
              query: {
                top: 3,
              },
            },
          },
          {
            uniqueName: "[Measures]",
          },
        ],
        measures: [
          {
            uniqueName: "Orders",
            aggregation: "sum",
          },
        ],
      };
      pivotReport.options = {
        viewType: "charts",
        chart: {
          type: "scatter",
        },
      };
      this.$refs.pivot.flexmonster.setReport(pivotReport);
    },
    showColumnLineChart() {
      let pivotReport = this.$refs.pivot.flexmonster.getReport();
      pivotReport.slice = {
        rows: [
          {
            uniqueName: "Order Date.Year",
          },
        ],
        columns: [
          {
            uniqueName: "[Measures]",
          },
        ],
        measures: [
          {
            uniqueName: "Orders",
            aggregation: "sum",
          },
          {
            uniqueName: "Revenue",
            formula: 'sum("Amount") * sum("Price")',
            individual: true,
            caption: "Revenue",
            format: "currency",
          },
        ],
      };
      pivotReport.options = {
        viewType: "charts",
        chart: {
          type: "column_line",
        },
      };
      pivotReport.formats = [
        {
          name: "",
          thousandsSeparator: ",",
          decimalSeparator: ".",
          decimalPlaces: 0,
        },
        {
          name: "currency",
          currencySymbol: "$",
          decimalPlaces: 2,
        },
      ];
      this.$refs.pivot.flexmonster.setReport(pivotReport);
    },
  },
};
</script>
#fm-pivot-view .fm-chart .fm-circle {
  r: 8;
}

/* Chart 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-yAxis-label,
#fm-xAxis > text,
#fm-yAxis > text {
  display: none;
}

After you add our web component to your Vue project, you can filter, expand, collapse, drill up, and drill down the data hierarchies, drill through the chart segments, and control the legend elements.

Use pivot charts to show the data in graphical form with the following chart types: column chart, bar chart, line chart, scatter chart, pie chart, stacked column chart, and combined column chart.

Our drillable pivot charts are built-in, so you can change your report dynamically, switching between grid and chart views via UI or using API calls.