Flexmonster Software License Agreement (“Agreement”) has been revised and is effective as of February 18, 2025.
The following modifications were made:
Downloading, installing, and/or continuing to use Flexmonster Software after February 18, 2026, constitutes Licensee’s acceptance of the terms and conditions of the modified version of Agreement. If Licensee does not agree to any of these terms and conditions, they must cease using Flexmonster Software and must not download, install, use, access, or continue to access Flexmonster Software. By continuing to use Flexmonster Software or renewing the license or maintenance after the effective date of these modifications to Agreement, Licensee accepts and agrees to be bound by the terms and conditions of the modified Agreement.
Flexmonster Pivot Charts is one more option to visualize aggregated data and highlight a particular subset of it.
Play with the demo on a larger screen: save this link for later or watch the video review now.
<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.
Can't find your answer here?
Visit the FAQ page
Flexmonster Pivot Table & Charts is a JavaScript pivot table component for adding interactive reporting and data analysis to web applications. Users can summarize, filter, sort, and explore data in pivot tables and charts, drill into results, and export reports.
Flexmonster works in plain JavaScript and TypeScript projects. It also integrates with React, Next.js, Angular, Vue, Blazor, and other technologies. See all integration options.
Flexmonster supports JSON and CSV files, SQL databases, MongoDB, Elasticsearch, and Microsoft Analysis Services (SSAS). You can also connect other data sources through your own backend. See supported data sources.
Flexmonster offers licenses for internal corporate use, SaaS products, and OEM distribution. Pricing varies by license and plan. SaaS projects can also use the free SaaS Entry license during development. Learn more on the pricing page.
Yes. Flexmonster offers a 30-day free trial that lets you evaluate all its features. No credit card is required. The trial version has a watermark.
To get started with Flexmonster, follow our integration guide.