Back to homepage

Integration with amCharts

This step-by-step tutorial will help you integrate WebDataRocks with amCharts. Our tutorial is based on the V4 of amCharts.

Supported chart types

WebDataRocks Connector for amCharts takes the data from the pivot table and prepares it according to the structure of an array of objects required by amCharts. As a result, any chart type will work with WebDataRocks Pivot Table.

Here is the list of demos that show how to integrate different chart types with WebDataRocks:

• Column Chart (demo)
• Line Chart (demo)
• Stacked Column Chart (demo)
• Bar Chart (demo)
• Clustered Bar Chart (demo)
• Stacked Bar Chart (demo)
• Radar Chart (demo)
• Bubble Chart (demo)
• Pie Chart (demo)
• Semi-circle Pie Chart (demo)
• Donut Chart (demo)
• Nested Donut Chart (demo)
• Radar Chart with switched axes (demo)

Follow the steps below to start creating interactive data visualizations.

Step 1. Add WebDataRocks to your project

Step 1.1. Complete the integration 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: "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:

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

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

  // ...

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

export default App;

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

function App() {
  const pivotRef: RefObject<WebDataRocksReact.Pivot | null> = 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 amCharts

Step 3.1. Install the amCharts 4 npm package with the following command:

npm install @amcharts/amcharts4

Step 3.2. Import amCharts 4 into your component:

import * as am4core from "@amcharts/amcharts4/core";
import * as am4charts from "@amcharts/amcharts4/charts";
import am4themes_animated from "@amcharts/amcharts4/themes/animated";

// Apply the imported theme
am4core.useTheme(am4themes_animated);

Step 3.3. Where your React element is returned, add a <div> container for your chart:

return (
  <div>
    <WebDataRocksReact.Pivot
     ref={pivotRef}
     toolbar={true}
     report={report}
    />
    <div id="amchartsContainer" style={{ width: "100%", height: "300px" }}></div>
  </div>
);

Step 3.4. Create a variable for a chart instance using useRef:

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

function App() {
  const pivotRef = useRef(null);
  const chartRef = useRef(null);
  // ...

  return (
    <div> 
      <WebDataRocksReact.Pivot
       ref={pivotRef}
       toolbar={true}
       report={report}
      />
      <div id="amchartsContainer" style={{ width: "100%", height: "300px" }}></div>
    </div>
  );
}

export default App;

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

function App() {
  const pivotRef: RefObject<WebDataRocksReact.Pivot> = useRef<WebDataRocksReact.Pivot>(null);
  const chartRef = useRef<am4charts.XYChart | null>(null);
  // ...

  return (
    <div>
      <WebDataRocksReact.Pivot
       ref={pivotRef}
       toolbar={true}
       report={report}
      />
      <div id="amchartsContainer" style={{ width: "100%", height: "300px" }}></div>
    </div>
  );
}

export default App;

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

Step 4.1. Import the WebDataRocks Connector for amCharts:

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

The Connector provides the amcharts.getData() method, which gets data from WebDataRocks and converts it to the format required by amCharts.

Step 4.2. If we call the amcharts.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:

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}
    />
   <div id="amchartsContainer" style={{ width: "100%", height: "300px" }}></div>
  </div>
);

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}
    />
   <div id="amchartsContainer" style={{ width: "100%", height: "300px" }}></div>
  </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 amcharts.getData() method from the Connector:

const createChart = () => {
  pivotRef.current.webdatarocks.amcharts.getData(
    {},
    // Function called when data for the chart is ready
    drawChart,
    // Function called on report changes (filtering, sorting, etc.) 
    drawChart
  );
};

const createChart = () => {
  pivotRef.current?.webdatarocks.amcharts.getData(
    {},
    // Function called when data for the chart is ready
    drawChart,
    // Function called on report changes (filtering, sorting, etc.) 
    drawChart
  );
};

Step 4.4. Implement the drawChart() function specified in the previous step. drawChart() initializes the chart, sets all the configurations specific for this chart type, and fills it with the data provided by WebDataRocks:

const drawChart = (chartConfig, rawData) => {
  // Create chart instance
  // The selector must match the id of the <div> container for the chart
  let chart = am4core.create("amchartsContainer", am4charts.XYChart);
  
  // Add data processed by Flexmonster to the chart
  chart.data = chartConfig.data;
  
  // Create a category axis for a column chart
  let categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
  categoryAxis.dataFields.category = pivotRef.current.webdatarocks.amcharts.getCategoryName(rawData);
  // Create value axis 
  chart.yAxes.push(new am4charts.ValueAxis());
  // Create and configure series
  let series = chart.series.push(new am4charts.ColumnSeries());
  series.dataFields.categoryX = pivotRef.current.webdatarocks.amcharts.getCategoryName(rawData);
  series.dataFields.valueY = pivotRef.current.webdatarocks.amcharts.getMeasureNameByIndex(rawData, 0);

  chartRef.current = chart;
};

const drawChart = (chartConfig: any, rawData: any) => {
  // Create chart instance
  // The selector must match the id of the <div> container for the chart
  let chart = am4core.create("amchartsContainer", am4charts.XYChart);

  // Add data processed by Flexmonster to the chart
  chart.data = chartConfig.data;

  // Create and configure series for a pie chart   
  let categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
  categoryAxis.dataFields.category = pivotRef.current?.webdatarocks.amcharts.getCategoryName(rawData);
  // Create value axis 
  chart.yAxes.push(new am4charts.ValueAxis());
  // Create and configure series
  let series = chart.series.push(new am4charts.ColumnSeries());
  series.dataFields.categoryX = pivotRef.current?.webdatarocks.amcharts.getCategoryName(rawData);
  series.dataFields.valueY = pivotRef.current?.webdatarocks.amcharts.getMeasureNameByIndex(rawData, 0);

  chartRef.current = chart;
};

Learn more about the amcharts.getCategoryName() and amcharts.getMeasureNameByIndex() API calls.

Step 4.5. Set the autoDispose global option to true. As a result, the chart will be automatically disposed when it is necessary:

am4core.useTheme(am4themes_animated);
am4core.options.autoDispose = true;

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 amCharts 4.

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.

Learn more about available chart configurations in the amCharts Documentation.

Check out the full code

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

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

import * as am4core from "@amcharts/amcharts4/core";
import * as am4charts from "@amcharts/amcharts4/charts";
import am4themes_animated from "@amcharts/amcharts4/themes/animated";

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

am4core.useTheme(am4themes_animated);
am4core.options.autoDispose = true;

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

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

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

  const drawChart = (chartConfig, rawData) => {
    let chart = am4core.create("amchartsContainer", am4charts.XYChart);

    chart.data = chartConfig.data;

    let categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
    categoryAxis.dataFields.category = pivotRef.current.webdatarocks.amcharts.getCategoryName(rawData);
    chart.yAxes.push(new am4charts.ValueAxis());
    let series = chart.series.push(new am4charts.ColumnSeries());
    series.dataFields.categoryX = pivotRef.current.webdatarocks.amcharts.getCategoryName(rawData);
    series.dataFields.valueY = pivotRef.current.webdatarocks.amcharts.getMeasureNameByIndex(rawData, 0);

    chartRef.current = chart;
  };

  return (
    <div> 
      <WebDataRocksReact.Pivot
       ref={pivotRef}
       toolbar={true}
       report={report}
       reportcomplete={onReportComplete}
      />
      <div id="amchartsContainer" style={{ width: "100%", height: "300px" }}></div>
    </div>
  );
}

export default App;

import * as WebDataRocksReact from "@webdatarocks/react-webdatarocks";
import { RefObject, useRef } from "react";

import * as am4core from "@amcharts/amcharts4/core";
import * as am4charts from "@amcharts/amcharts4/charts";
import am4themes_animated from "@amcharts/amcharts4/themes/animated";

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

am4core.useTheme(am4themes_animated);
​​am4core.options.autoDispose = true;

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

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

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

  const createChart = () => {
    pivotRef.current?.webdatarocks.amcharts.getData(
      {},
      drawChart,
      drawChart
    );
  };

  const drawChart = (chartConfig: any, rawData: any) => {
    let chart = am4core.create("amchartsContainer", am4charts.XYChart);

    chart.data = chartConfig.data;

    let categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
    categoryAxis.dataFields.category = pivotRef.current?.webdatarocks.amcharts.getCategoryName(rawData);
    chart.yAxes.push(new am4charts.ValueAxis());
    let series = chart.series.push(new am4charts.ColumnSeries());
    series.dataFields.categoryX = pivotRef.current?.webdatarocks.amcharts.getCategoryName(rawData);
    series.dataFields.valueY = pivotRef.current?.webdatarocks.amcharts.getMeasureNameByIndex(rawData, 0);

    chartRef.current = chart;
};

  return (
    <div> 
      <WebDataRocksReact.Pivot
       ref={pivotRef}
       toolbar={true}
       report={report}
       reportcomplete={onReportComplete}
      />
      <div id="amchartsContainer" style={{ width: "100%", height: "300px" }}></div>
    </div>
  );
}

export default App;

See also

• amcharts.getData()
• getData()

If you want to pick up where you left while working with the previous report, you can load it into the pivot table:

• Via the Toolbar
• Programmatically

Loading the report via the Toolbar

To load a local report

• Go to the Open tab () on the Toolbar.
• Select Local report.

To load a remote report

• Go to the Open tab () on the Toolbar.
• Select Remote report.
• Enter the URL of the remote report.

Loading the report programmatically

Load your report while embedding WebDataRocks by specifying a path to your report file:

<script setup>
  import { Pivot } from "@webdatarocks/vue-webdatarocks";
  import "@webdatarocks/webdatarocks/webdatarocks.css";
</script>

<template>
  <div>
    <Pivot 
      report="https://cdn.webdatarocks.com/reports/report.json"
      toolbar
    />
  </div>
</template>

If you want to pick up where you left while working with the previous report, you can load it into the pivot table:

• Via the Toolbar
• Programmatically

Loading the report via the Toolbar

To load a local report

• Go to the Open tab () on the Toolbar.
• Select Local report.

To load a remote report

• Go to the Open tab () on the Toolbar.
• Select Remote report.
• Enter the URL of the remote report.

Loading the report programmatically

Load your report while embedding WebDataRocks by specifying a path to your report file:

<app-wbr-pivot
 [toolbar]="true"
 [report]="https://cdn.webdatarocks.com/reports/report.json">
</app-wbr-pivot>

WebDataRocks Toolbar is designed to make your web reporting experience easier and more convenient. You can customize the Toolbar in the following ways:

• Add new custom tabs.
• Remove the tabs you don’t need.
• Reorder/change the existing tabs.
• Set your custom icons for tabs.

Important Before customizing the Toolbar, ensure it is enabled.

Let’s see how to customize the Toolbar in practice.

All customization can be made using the beforetoolbarcreated event which is triggered before the Toolbar is created. The event’s handler will be responsible for changing the Toolbar.

How to remove tabs

Step 1. Assign a handler (e.g., customizeToolbar) to the beforetoolbarcreated event. The handler function has the toolbar as a parameter that contains information about the Toolbar.

Step 2. Inside the handler (e.g., customizeToolbar), retrieve all the tabs using the toolbar.getTabs() method. It returns an array of objects that describe tabs’ properties.

Step 3. To remove a tab, delete a corresponding object from the array of tabs.

Your code should look similar to the following example:

<script setup>
import { Pivot } from "@webdatarocks/vue-webdatarocks";
import "@webdatarocks/webdatarocks/webdatarocks.css";

const customizeToolbar = (toolbar) => {
  // Get all tabs from the Toolbar
  let tabs = toolbar.getTabs();
  if (tabs.length > 0) {
    // Delete the Connect tab
    tabs = tabs.filter(tab => tab.id !== "wdr-tab-connect");
  }
  toolbar.getTabs = () => tabs;
};
</script>

<template>
 <div>
  <Pivot
    toolbar
    :beforetoolbarcreated="customizeToolbar"
  />
 </div>
</template>

How to add new tabs

Step 1. Assign a handler (e.g., customizeToolbar) to the beforetoolbarcreated event. The handler function has the toolbar as a parameter that contains information about the Toolbar.

Step 2. Inside the handler (e.g., customizeToolbar), retrieve all the tabs using the toolbar.getTabs() method. It returns an array of objects that describe tabs’ properties.

Step 3. Add a new tab to the array of tabs.

Your code should look similar to the following example:

<script setup>
import { Pivot } from "@webdatarocks/vue-webdatarocks";
import "@webdatarocks/webdatarocks/webdatarocks.css";

const customizeToolbar = (toolbar) => {
  // Get all tabs from the Toolbar
  let tabs = toolbar.getTabs();
  toolbar.getTabs = () => {
    // Add a new tab
    tabs.unshift({
      id: "fm-tab-newtab",
      title: "New Tab",
      handler: yourCustomFunction,
      icon: toolbar.icons.open,
    });
    return tabs;
  };
};

const yourCustomFunction = () => {
  // Your functionality
}
</script>

<template>
 <div>
  <Pivot
    toolbar
    :beforetoolbarcreated="customizeToolbar"
  />
  </div>
</template>

Even more advanced customization

In this guide, we mentioned how to remove the Toolbar tabs and how to add a new one. For further customization, you can reorder the tabs, set the custom icons for the tabs, or implement new functionality. We recommend investigating the existing code to understand how the Toolbar works:

1. Open the source code of the Toolbar – webdatarocks.toolbar.js file.
2. Find a prototype of the toolbar.getTabs() method.
3. Investigate how this method works.

You can also change the appearance of the Toolbar by changing the component theme.

See also

• Language localization
• Changing component theme
• Conditional formatting

WebDataRocks Toolbar is designed to make your web reporting experience easier and more convenient. You can customize the Toolbar in the following ways:

• Add new custom tabs.
• Remove the tabs you don’t need.
• Reorder/change the existing tabs.
• Set your custom icons for tabs.

Important Before customizing the Toolbar, ensure it is enabled.

Let’s see how to customize the Toolbar in practice.

All customization can be made using the beforetoolbarcreated event which is triggered before the Toolbar is created. The event’s handler will be responsible for changing the Toolbar.

How to remove tabs

Step 1. Assign a handler (e.g., customizeToolbar) to the beforetoolbarcreated event. The handler function has the toolbar as a parameter that contains information about the Toolbar.

Step 2. Inside the handler (e.g., customizeToolbar), retrieve all the tabs using the toolbar.getTabs() method. It returns an array of objects that describe tabs’ properties.

Step 3. To remove a tab, delete a corresponding object from the array of tabs.

Your code should look similar to the following example:

import { Component } from "@angular/core";
import { WebdatarocksPivotModule } from "@webdatarocks/ngx-webdatarocks";

@Component({
  selector: "app-root",
  standalone: true,
  imports: [WebdatarocksPivotModule],
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  customizeToolbar(toolbar: any) {
    // Get all tabs from the Toolbar
    let tabs = toolbar.getTabs();
    toolbar.getTabs = function() {
      // Delete the Connect tab
      return tabs.filter((tab: any) => tab.id !== 'wdr-tab-connect');
    }
  }
}

<app-wbr-pivot
 [toolbar]="true"
 (beforetoolbarcreated)="customizeToolbar($event)">
</app-wbr-pivot>

How to add new tabs

Step 1. Assign a handler (e.g., customizeToolbar) to the beforetoolbarcreated event. The handler function has the toolbar as a parameter that contains information about the Toolbar.

Step 2. Inside the handler (e.g., customizeToolbar), retrieve all the tabs using the toolbar.getTabs() method. It returns an array of objects that describe tabs’ properties.

Step 3. Add a new tab to the array of tabs.

Your code should look similar to the following example:

import { Component } from "@angular/core";
import { WebdatarocksPivotModule } from "@webdatarocks/ngx-webdatarocks";

@Component({
  selector: "app-root",
  standalone: true,
  imports: [WebdatarocksPivotModule],
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  customizeToolbar(toolbar: any) {
    // Get all tabs from the Toolbar
    let tabs = toolbar.getTabs();
    toolbar.getTabs = () => {
      // Add a new tab
      tabs.unshift({
        id: "fm-tab-newtab",
        title: "New Tab",
        handler: () => this.yourCustomFunction(),
        icon: toolbar.icons.open,
      });
      return tabs;
    };
  }

​​  yourCustomFunction() {
    // Your functionality
  }
}

<app-wbr-pivot
 [toolbar]="true"
 (beforetoolbarcreated)="customizeToolbar($event)">
</app-wbr-pivot>

Even more advanced customization

In this guide, we mentioned how to remove the Toolbar tabs and how to add a new one. For further customization, you can reorder the tabs, set the custom icons for the tabs, or implement new functionality. We recommend investigating the existing code to understand how the Toolbar works:

1. Open the source code of the Toolbar – webdatarocks.toolbar.js file.
2. Find a prototype of the toolbar.getTabs() method.
3. Investigate how this method works.

You can also change the appearance of the Toolbar by changing the component theme.

See also

• Language localization
• Changing component theme
• Conditional formatting

WebDataRocks Toolbar is designed to make your web reporting experience easier and more convenient. You can customize the Toolbar in the following ways:

• Add new custom tabs.
• Remove the tabs you don’t need.
• Reorder/change the existing tabs.
• Set your custom icons for tabs.

Important Before customizing the Toolbar, ensure it is enabled.

Let’s see how to customize the Toolbar in practice.

All customization can be made using the beforetoolbarcreated event which is triggered before the Toolbar is created. The event’s handler will be responsible for changing the Toolbar.

How to remove tabs

Step 1. Assign a handler (e.g., customizeToolbar) to the beforetoolbarcreated event. The handler function has the toolbar as a parameter that contains information about the Toolbar.

Step 2. Inside the handler (e.g., customizeToolbar), retrieve all the tabs using the toolbar.getTabs() method. It returns an array of objects that describe tabs’ properties.

Step 3. To remove a tab, delete a corresponding object from the array of tabs.

Your code should look similar to the following example:

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

function App() {
  function customizeToolbar(toolbar) {
    // Get all tabs from the Toolbar
    let tabs = toolbar.getTabs();
    toolbar.getTabs = function() {
      // Delete the Connect tab
      tabs = tabs.filter(tab => tab.id !== "wdr-tab-connect");
      return tabs;
    }
  }

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

export default App

How to add new tabs

Step 1. Assign a handler (e.g., customizeToolbar) to the beforetoolbarcreated event. The handler function has the toolbar as a parameter that contains information about the Toolbar.

Step 2. Inside the handler (e.g., customizeToolbar), retrieve all the tabs using the toolbar.getTabs() method. It returns an array of objects that describe tabs’ properties.

Step 3. Add a new tab to the array of tabs.

Your code should look similar to the following example:

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

function App() {
  const customizeToolbar = (toolbar) => {
    // Get all tabs from the Toolbar
    let tabs = toolbar.getTabs();
    toolbar.getTabs = () => {
      // Add a new tab
      tabs.unshift({
        id: "war-tab-new tab",
        title: "New Tab",
        handler: yourCustomFunction,
        icon: toolbar.icons.open,
      });
      return tabs;
    };
  };

  const yourCustomFunction = () => {
    // Your functionality
  }

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

export default App

Even more advanced customization

In this guide, we mentioned how to remove the Toolbar tabs and how to add a new one. For further customization, you can reorder the tabs, set the custom icons for the tabs, or implement new functionality. We recommend investigating the existing code to understand how the Toolbar works:

1. Open the source code of the Toolbar – webdatarocks.toolbar.js file.
2. Find a prototype of the toolbar.getTabs() method.
3. Investigate how this method works.

You can also change the appearance of the Toolbar by changing the component theme.

See also

• Language localization
• Changing component theme
• Conditional formatting

We use only open-source components in WebDataRocks. Here is a list of these libraries and links to their respective licenses:

• html2canvas v1.0.0-rc.1 – MIT License
• FileSaver.js v1.3.1 (modified by Flexmonster) – MIT License
• jsPDF v1.5.3 – MIT License
• JSZip v3.1.5 – MIT License

See also

• License agreement

We use only open-source components in WebDataRocks. Here is a list of these libraries and links to their respective licenses:

• html2canvas v1.0.0-rc.1 – MIT License
• FileSaver.js v1.3.1 (modified by Flexmonster) – MIT License
• jsPDF v1.5.3 – MIT License
• JSZip v3.1.5 – MIT License

See also

• License agreement

We use only open-source components in WebDataRocks. Here is a list of these libraries and links to their respective licenses:

• html2canvas v1.0.0-rc.1 – MIT License
• FileSaver.js v1.3.1 (modified by Flexmonster) – MIT License
• jsPDF v1.5.3 – MIT License
• JSZip v3.1.5 – MIT License

See also

• License agreement