Flexmonster Pivot Table & Charts integrates with Highcharts — a rock-solid and flexible charting library — in a few steps.
Play with the demo on a larger screen: save this link for later or watch the video review now.
Smart business analytics has never been as engaging and straightforward as reporting with the Flexmonster pivot grid for React and Highcharts. Add a data dashboard to your report and see how an essential tool for monitoring business objectives and performance will boost your analytics.
All the vital metrics and KPIs can be seen at a glance when displayed on a dashboard. To have another view of your data, slice and dice the data on the grid and reveal the insights via the charts.
import { useRef } from "react";
import * as FlexmonsterReact from "react-flexmonster";
import "flexmonster/flexmonster.css";
import "flexmonster/lib/flexmonster.highcharts.js";
import Highcharts from "highcharts";
function PivotTableDemo() {
const pivotRef = useRef(null);
const report = {
dataSource: {
type: "json",
filename: "https://cdn.flexmonster.com/data/demos/highcharts-demo-data.json"
},
slice: {
rows: [
{
uniqueName: "Date.Month"
}
],
columns: [
{
uniqueName: "[Measures]"
}
],
measures: [
{
uniqueName: "Requests",
aggregation: "sum"
},
{
uniqueName: "Answered Calls",
aggregation: "sum"
},
{
uniqueName: "Revenue",
aggregation: "sum",
format: "currency",
active: false
}
],
sorting: {
column: {
type: "desc",
tuple: [],
measure: {
uniqueName: "Answered Calls",
aggregation: "sum"
}
}
}
},
formats: [
{
name: "",
thousandsSeparator: ","
},
{
name: "currency",
decimalSeparator: ".",
decimalPlaces: 2,
currencySymbol: "$"
}
],
options: {
showHeaders: false
}
};
const reportComplete = () => {
pivotRef.current.flexmonster.off("reportcomplete");
setGlobalChartsOptions();
createLineChart();
createColumnChart();
createPieChart();
};
const setGlobalChartsOptions = () => {
Highcharts.setOptions({
colors: [
"#4cbf8b",
"#e8734c",
"#ffcd4c",
"#9875e3",
"#4c9eff",
"#8acfc3",
"#cd97e6",
"#f1d34c",
"#65d2e7"
],
lang: {
thousandsSep: ","
},
chart: {
plotBackgroundColor: "#fafafa",
backgroundColor: "#fafafa",
style: {
fontFamily: "Serif Typeface"
}
}
});
};
const createLineChart = () => {
pivotRef.current.flexmonster.highcharts.getData(
{
type: "line"
},
drawLineChart,
updateLineChart
);
};
const drawLineChart = (chartData) => {
chartData.xAxis.title.enabled = false;
chartData.xAxis.type = "datetime";
Highcharts.chart("highcharts-container", chartData);
};
const updateLineChart = (chartData) => {
drawLineChart(chartData);
};
const createColumnChart = () => {
pivotRef.current.flexmonster.highcharts.getData(
{
type: "column",
slice: {
rows: [
{
uniqueName: "Date.Month"
}
],
columns: [
{
uniqueName: "[Measures]"
}
],
measures: [
{
uniqueName: "Revenue",
aggregation: "sum"
},
{
uniqueName: "Support Cost",
aggregation: "sum"
}
]
}
},
drawColumnChart,
updateColumnChart
);
};
const drawColumnChart = (chartData, rawData) => {
const currencyFormat = rawData.meta.formats.find((format) => format.name == "currency");
chartData.xAxis.title.enabled = false;
chartData.legend = {
enabled: false
};
if (chartData.yAxis == undefined) {
chartData.yAxis = {};
}
for (let i = 0; i < chartData.yAxis.length; i++) {
chartData.yAxis[i].labels = {
format: pivotRef.current.flexmonster.highcharts.getAxisFormat(currencyFormat)
};
}
for (let i = 0; i < chartData.series.length; i++) {
chartData.series[i].tooltip = {
pointFormat: "{series.name}: <b>" +
pivotRef.current.flexmonster.highcharts.getPointYFormat(currencyFormat) +
"</b><br/>"
};
}
chartData.xAxis.title.enabled = false;
chartData.legend = {
enabled: false
};
chartData.xAxis.type = "datetime";
Highcharts.chart("highcharts-column-container", chartData);
};
const updateColumnChart = (chartData) => {
// Here you can add your own logic for updating the chart
};
const createPieChart = () => {
pivotRef.current.flexmonster.highcharts.getData(
{
type: "pie",
slice: {
rows: [
{
uniqueName: "Customer Satisfaction"
}
],
columns: [
{
uniqueName: "[Measures]"
}
],
measures: [
{
uniqueName: "Answered Calls",
aggregation: "sum"
}
]
}
},
drawPieChart,
updatePieChart
);
};
const drawPieChart = (chartData) => {
Highcharts.chart("highcharts-pie-container", chartData);
};
const updatePieChart = (chartData) => {
// Here you can add your own logic for updating the chart
};
return (
<>
<FlexmonsterReact.Pivot
ref={pivotRef}
height={430}
report={report}
reportcomplete={reportComplete}
licenseFilePath="https://cdn.flexmonster.com/jsfiddle.charts.key"
/>
<div className="demo-box">
<div className="demo-title">Requests vs Answered Calls</div>
<div id="highcharts-container"></div>
</div>
<div className="demo-box">
<div className="demo-title">Revenue vs Support Cost</div>
<div id="highcharts-column-container"></div>
</div>
<div className="demo-box">
<div className="demo-title">Customer Satisfaction</div>
<div id="highcharts-pie-container"></div>
</div>
</>
);
}
export default PivotTableDemo;
.demo-box {
background-color: #fafafa;
position: relative;
padding: 40px 30px 30px 30px;
border: 1px solid #e9e9e9;
margin-bottom: 20px;
margin-top: 40px;
}
.demo-title {
font-size: 18px;
margin-bottom: 30px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
color: #555;
}
Learn how to create a ready-to-use React dashboard equipped with interactive features of the pivot table and charts by following the step-by-step Integration with Highcharts guide.