Integration with Highcharts

This tutorial will help you integrate Flexmonster with the Highcharts charting library.

Watch the tutorial in the video format: Flexmonster Pivot with Highcharts.

This guide demonstrates JavaScript-based integration. To integrate Flexmonster with Highcharts in a front-end framework, check out our sample projects.

Flexmonster Connector for Highcharts

For easy integration, Flexmonster offers the Connector for Highcharts. The Connector provides built-in methods for passing data from Flexmonster to Highcharts in the required format.

The Connector for Highcharts is located in the flexmonster.highcharts.js file within the Flexmonster package. The code is open-source and can be extended with custom logic. Check out the Connector’s API reference.

Supported chart types

Flexmonster supports the following Highcharts types:

If the needed chart type is not on the list, see the Integrating with any chart type section.

Integrating with Highcharts

The steps below describe how to create a line chart based on data received from Flexmonster. To integrate the component with other chart types, refer to the Highcharts documentation.

Step 1. Configure Flexmonster

Step 1.1. Embed Flexmonster into your webpage. Your code should look similar to the following:

import Flexmonster from "flexmonster";
import "flexmonster/flexmonster.css";

const pivot = new Flexmonster({
  container: "pivotContainer",
  toolbar: true
});

Step 1.2. Configure the report: connect to your data source and define a slice. The fields you have specified in the slice will be shown on the chart.

See an example:

const pivot = new Flexmonster({
  container: "pivotContainer",
  toolbar: true,
  report: {
    dataSource: {
      filename: "https://cdn.flexmonster.com/data/data.csv"
    },
    slice: {
      rows: [
        { uniqueName: "Country" }
      ],
      columns: [
        { uniqueName: "Business Type" },
      ],
      measures: [
        { uniqueName: "Price" }
      ]
    }
  },
});

Step 1.3. Provide your license key in the licenseKey property:

const pivot = new Flexmonster({
  container: "pivotContainer",
  toolbar: true,
  report: {
    // Your report configs
  },
  // Replace "XXXX-XXXX-XXXX-XXXX-XXXX" with your licence key
  licenseKey: "XXXX-XXXX-XXXX-XXXX-XXXX",
});

If you don’t have a license key, contact our team and request a special trial key.

Step 2. Add Highcharts

Step 2.1. Install Highcharts with the following command:

npm install highcharts --save

Step 2.2. Add Highcharts to your project:

const Highcharts = require('highcharts');
require('highcharts/modules/exporting');
require('highcharts/modules/accessibility');

Step 2.3. Add the <div> container for the chart:

<div id="chartContainer"></div>

Step 3. Display the data on the chart

Step 3.1. Add Flexmonster Connector for Highcharts to your project:

import "flexmonster/lib/flexmonster.highcharts.js"

Step 3.2. If a chart is created before Flexmonster is fully loaded, the chart may receive empty data. To track whether the component is ready to provide data, handle the reportcomplete event:

const pivot = new Flexmonster({
  container: "pivotContainer",
  report: {
    // Your report configs
  },
  licenseKey: "XXXX-XXXX-XXXX-XXXX-XXXX",
  reportcomplete: function() {
    pivot.off("reportcomplete");
    createChart();
  }
});

Now, a chart will be created only when the data is loaded and the report is ready.

Step 3.3. Implement the createChart() function using the highcharts.getData() API call. This method requests data from Flexmonster and transforms it to the format required by Highcharts:

function createChart() {
  pivot.highcharts.getData(
    {
      type: "line"
    },
    // Function called when data for the chart is ready
    function(chartConfig) {
      Highcharts.chart("chartContainer", chartConfig);
    },
    // Function called when the report is updated
    function(chartConfig) {
      Highcharts.chart("chartContainer", chartConfig);
    }
  );
}

Step 4. See the result

Run your project to see a line chart that displays the same data as the pivot table and reacts to updates Live example.

You can also watch our video tutorial that covers the integration process:

Integrating with any chart type

Flexmonster Connector for Highcharts can prepare your data for a limited set of chart types.

If you need to create a chart that is not on the list, preprocess your data manually using the options.prepareDataFunction parameter of highcharts.getData() Live example.

Examples with front-end frameworks

We created ready-to-use sample projects for the most popular front-end frameworks. Each project contains multiple examples, including integration with Highcharts. Find a sample project for a framework of your choice:

• Next.js
• ES6/TypeScript
• Angular
• Vue 3
• Vue 2

Using Flexmonster number formatting in Highcharts

Flexmonster Connector for Highcharts provides several functions for setting number formatting in Highcharts. All these functions take the Flexmonster’s FormatObject and return a Highcharts format string.

The methods from the Connector consider the following FormatObject properties:

• thousandsSeparator
• decimalPlaces
• currencySymbol
• positiveCurrencyFormat

In Highcharts, format strings are templates used for labels (e.g., tooltips or data labels). They include variables inside curly braces to represent different parts of a data point. See the list of such data points and corresponding Flexmonster API calls for obtaining them:

• {value} — can refer to either the x or y value. Often used in axis configurations. See the highcharts.getAxisFormat().
• {point.x} — refers to the x-coordinate value. See the highcharts.getPointXFormat().
• {point.y} — refers to the y-coordinate value. See the highcharts.getPointYFormat().
• {point.z} — refers to the z-coordinate value. See the highcharts.getPointZFormat().

Learn more in the Highcharts documentation.

Check out an example of how the number format is applied for yAxis labels:

chartConfig.yAxis[i].labels = {
  format: pivot.highcharts.getAxisFormat(currencyFormat)
}

Live example

See also

• API reference of Flexmonster Connector for Highcharts
• More examples with Highcharts
• Supported data sources
• Customize Flexmonster