Other Exports

Export to Visio

With Visio you have most of the export functionalities as in PDF/PNG Export

Visio Export Example

Visio also uses the export server to do the export.

Visio options

chartRef.current?.exportToVisio({
  fileName: "myChart.vsdx",
  padding: 50,
  margin: [10, 10, 10, 10],
  expandChildren: true,
  min: false,
  header: '<text>My Header</text>',
  footer: '<text>My Footer. Page {current-page} of {total-pages}</text>'
});

Not all options can work together.

Here is a code example using the Visio export options:

Visio Export Options

Important note

When you export to Visio, data is temporarily sent and stored on BALKAN App's server for one hour.

If you prefer not to have data stored on BALKAN App's server for privacy reasons, you can install your own server

Export to CSV

You can add CSV export as a menu item in menu:

menu={{ csv_export: { text: "Export CSV" } }}

And/or in nodeMenu:

nodeMenu={{ csv_export: { text: "Export CSV" } }}

Here is the result:

CSV Export

Export to XML

You can add XML export as a menu item in menu:

menu={{ xml_export: { text: "Export XML" } }}

And/or in nodeMenu:

nodeMenu={{ xml_export: { text: "Export XML" } }}

Here is the result:

XML Export

Export to JSON

You can add JSON export as a menu item in menu:

menu={{ json_export: { text: "Export JSON" } }}

And/or in nodeMenu:

nodeMenu={{ json_export: { text: "Export JSON" } }}

Here is the result:

JSON Export

CSV / XML / JSON export options

chart.current?.exportToCSV({
    filename: "myChart.CSV",
    nodeId: id,
});

Here is a code example:

CVS Export Options

Export event listeners

You can use onExportStart and onExportEnd methods to change export behavior.

// add before chart.load()
onExportStart={(args: any) => {
  console.log("exporting");
});

Here is an example of exporting only the name and title fields by changing args.nodes:

// add before chart.load()
onExportStart={(args: any) => {
  if (args.ext == 'csv' || args.ext == 'xml'){
      var newNodes = [];
      for(var i = 0; i < args.nodes.length; i++){
          newNodes.push({
              name: args.nodes[i].name,
              title: args.nodes[i].title
          })
      }
      args.nodes = newNodes;
  }
}}

Export Event Listeners

Use return false to cancel exporting:

// add before chart.load()
onExportStart={(args: any) => {
  // add your code here
  return false;
});