Documentation menu
JS React Angular Vue
JS React Angular Vue

Integration with Highcharts

This detailed tutorial will walk you through the integration of WebDataRocks with Highcharts.

Supported chart types

WebDataRocks supports the following chart types of the Highcharts library:

Follow the steps below to start creating interactive data visualizations.

Step 1. Add WebDataRocks to your project

Step 1.1. Complete the Quick start guide. Your code of the component with WebDatarocks should look similar to the following:

import * as WebDataRocksReact from "@webdatarocks/react-webdatarocks";

function App() {
  return (
    <div> 
      <WebDataRocksReact.Pivot
       toolbar={true}
      />
    </div>
  );
}

export default App;

Step 1.2. Create a report for WebDataRocks — connect to the data source and define which fields should be displayed in rows, columns, and measures:

function App() {
  const report = {
    dataSource: {
      filename: "https://cdn.webdatarocks.com/data/data.csv",
    },
    slice: {
      rows: [
        {
          uniqueName: "Country",
        },
      ],
      columns: [
        {
          uniqueName: "Business Type",
        },
        {
          uniqueName: "Measures",
        },
      ],
      measures: [
        {
          uniqueName: "Price",
          aggregation: "sum",
        },
      ],
    },
  };

  return (
    <div> 
      <WebDataRocksReact.Pivot
       toolbar={true}
       report={report}
      />
    </div>
  );
}

The fields you’ve specified in the report will be shown on the chart.

Step 2. Get a reference to the WebDataRocks instance

Some of WebDataRocks methods and events are needed to create a chart. Using a reference to the WebDataRocks instance, we can access WebDataRocks API.

Get the reference with the useRef hook:

React + ES6

// ...
import { useRef } from "react";

function App() {
  const pivotRef = useRef(null);

  // ...

  return (
    <div> 
      <WebDataRocksReact.Pivot
       ref={pivotRef}
       toolbar={true}
       report={report}
      />
    </div>
  );
}

export default App;

React + TypeScript

// ...
import { RefObject, useRef} from "react";

function App() {
  const pivotRef: RefObject<WebDataRocksReact.Pivot> = useRef<WebDataRocksReact.Pivot>(null);

  // ...

  return (
    <div> 
      <WebDataRocksReact.Pivot
       ref={pivotRef}
       toolbar={true}
       report={report}
      />
    </div>
  );
}

export default App;

Now it’s possible to interact with the component through pivotRef.current.webdatarocks.

Step 3. Add Highcharts

Step 3.1. Download the Highcharts and Highcharts React wrapper npm packages:

npm install highcharts highcharts-react-official

Step 3.2. Import Highcharts and Highcharts React wrapper into your component:

import Highcharts from "highcharts";
import HighchartsReact from "highcharts-react-official";

Step 3.3. In the .jsx file where your React element is returned, add Highcharts using the HighchartsReact component:

return (
  <div> 
    <WebDataRocksReact.Pivot
     ref={pivotRef}
     toolbar={true}
     report={report}
    />
    <HighchartsReact
      highcharts={Highcharts}
    />
  </div>
);

Step 3.4. Create a state variable to store options for the chart (e.g., chartOptions) and assign it as the HighchartsReact prop:

import { useState, /* Other imports */ } from "react";
// ...

function App() {
  // ...
  const [chartOptions, setChartOptions] = useState({});
  // ...
  return (
    <div> 
      <WebDataRocksReact.Pivot
       ref={pivotRef}
       toolbar={true}
       report={report}
      />
      <HighchartsReact
        highcharts={Highcharts}
        options={chartOptions}
      />
    </div>
  );
}

Step 4. Show the data from the pivot table on the chart

Step 4.1. Import the WebDataRocks Connector for Highcharts:

import "@webdatarocks/webdatarocks/webdatarocks.highcharts.js";

The Connector provides the highcharts.getData() method, which gets data from WebDataRocks and converts it to the format required for a specific chart type.

Step 4.2. If we call the highcharts.getData() method before WebDataRocks is fully loaded and ready to use, it will return an empty result. To know when WebDataRocks is ready to provide data for the chart, handle the reportcomplete event:

React + ES6

const onReportComplete = () => {
  // Unsubscribing from reportcomplete
  // We need it only to track the initialization of WebDataRocks 
  pivotRef.current.webdatarocks.off("reportComplete");
  createChart();
};

return (
  <div> 
    <WebDataRocksReact.Pivot
     ref={pivotRef}
     toolbar={true}
     report={report}
     reportcomplete={onReportComplete}
    />
    <HighchartsReact
      highcharts={Highcharts}
      options={chartOptions}
    />
  </div>
);

React + TypeScript

const onReportComplete = () => {
  // Unsubscribing from reportcomplete
  // We need it only to track the initialization of WebDataRocks 
  pivotRef.current?.webdatarocks.off("reportComplete");
  createChart();
};

return (
  <div> 
    <WebDataRocksReact.Pivot
     ref={pivotRef}
     toolbar={true}
     report={report}
     reportcomplete={onReportComplete}
    />
    <HighchartsReact
      highcharts={Highcharts}
      options={chartOptions}
    />
  </div>
);

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

Step 4.3. Implement the createChart() function. It will use the highcharts.getData() method from the Connector:

React + ES6

const createChart = () => {  
  pivotRef.current.webdatarocks.highcharts.getData(
    {
      type: "spline",
    },
    // Function called when data for the chart is ready
    (data) =>
      setChartOptions(data),
    // Function called on report changes (filtering, sorting, etc.) 
    (data) =>
      setChartOptions(data),
  );
};

React + TypeScript

const createChart = () => {  
  pivotRef.current?.webdatarocks.highcharts.getData(
    {
      type: "spline",
    },
    // Function called when data for the chart is ready
    (data: any) =>
      setChartOptions(data),
    // Function called on report changes (filtering, sorting, etc.) 
    (data: any) =>
      setChartOptions(data),
  );
};

Step 5. Run the project

Run your project with the following command:

npm run dev

Open http://localhost:5173/ in the browser to see how the pivot table looks in combination with Highcharts.

To see what a real-time interaction is, try experimenting: filter the data, change the measures and the aggregation functions — the results are reflected on the chart at once.

Check out the full code

After completing this tutorial, the full code of the component should look as follows:

React + ES6

import { useState, useRef } from "react";
import * as WebDataRocksReact from "@webdatarocks/react-webdatarocks";
import Highcharts from "highcharts";
import HighchartsReact from "highcharts-react-official";
import "@webdatarocks/webdatarocks/webdatarocks.highcharts.js";

function App() {
  const pivotRef = useRef(null);

  const report = {
    dataSource: {
      filename: "https://cdn.webdatarocks.com/data/data.csv",
    },
    slice: {
      rows: [
        {
          uniqueName: "Country",
        },
      ],
      columns: [
        {
          uniqueName: "Business Type",
        },
        {
          uniqueName: "Measures",
        },
      ],
      measures: [
        {
          uniqueName: "Price",
          aggregation: "sum",
        },
      ],
    },
  };

  const [chartOptions, setChartOptions] = useState({});

  const onReportComplete = () => {
    pivotRef.current.webdatarocks.off("reportComplete");
    createChart();
  };

  const createChart = () => {  
    pivotRef.current.webdatarocks.highcharts.getData(
      {
        type: "spline",
      },
      // Function called when data for the chart is ready
      (data) =>
        setChartOptions(data),
      // Function called on report changes (filtering, sorting, etc.) 
      (data) =>
        setChartOptions(data),
    );
  };

  return (
    <div>
      <WebDataRocksReact.Pivot
       ref={pivotRef} 
       toolbar={true}
       report={report}
       reportcomplete={onReportComplete}
      />
      <HighchartsReact
        highcharts={Highcharts}
        options={chartOptions}
      />
    </div>
  );
}

export default App;

React + TypeScript

import { useState, RefObject, useRef } from "react";
import * as WebDataRocksReact from "@webdatarocks/react-webdatarocks";
import Highcharts from "highcharts";
import HighchartsReact from "highcharts-react-official";
import "@webdatarocks/webdatarocks/webdatarocks.highcharts.js";

function App() {
  const pivotRef: RefObject<WebDataRocksReact.Pivot> = 
    useRef<WebDataRocksReact.Pivot>(null);

  const report = {
    dataSource: {
      filename: "https://cdn.webdatarocks.com/data/data.csv",
    },
    slice: {
      rows: [
        {
          uniqueName: "Country",
        },
      ],
      columns: [
        {
          uniqueName: "Business Type",
        },
        {
          uniqueName: "Measures",
        },
      ],
      measures: [
        {
          uniqueName: "Price",
          aggregation: "sum",
        },
      ],
    },
  };

  const [chartOptions, setChartOptions] = useState({});

  const onReportComplete = () => {
    pivotRef.current?.webdatarocks.off("reportComplete");
    createChart();
  };

  const createChart = () => {  
    pivotRef.current?.webdatarocks.highcharts.getData(
      {
        type: "spline",
      },
      // Function called when data for the chart is ready
      (data: any) =>
        setChartOptions(data),
      // Function called on report changes (filtering, sorting, etc.) 
      (data: any) =>
        setChartOptions(data),
    );
  };

  return (
    <div>
      <WebDataRocksReact.Pivot
       ref={pivotRef} 
       toolbar={true}
       report={report}
       reportcomplete={onReportComplete}
      />
      <HighchartsReact
        highcharts={Highcharts}
        options={chartOptions}
      />
    </div>
  );
}

export default App;

See also