Download Feature

Export your tree visualizations as SVG files with customizable download options

TreeCharts includes a built-in download feature that allows users to export tree visualizations as high-quality SVG files. This feature is configurable through the actionConfig property and provides options for button positioning and custom filenames.

The download feature adds a download button to your tree chart that, when clicked, downloads the current visualization as an SVG file. SVG format ensures scalable quality, small file sizes, editability in vector graphics software, and web compatibility.

Download Feature Example

Basic implementation of the download feature with different configurations

jsx

import { TreeChart } from 'treecharts-react';

// Simple tree data for download demonstration
const downloadDemoTree = {
  value: "Root",
  child: [
    {
      value: "Child A",
      child: [
        {
          value: "A1",
          child: [],
        },
      ],
    },
    {
      value: "Child B",
      child: [
        {
          value: "B1",
          child: [],
        },
      ],
    },
  ],
};

function DownloadFeatureTree() {
  return (
    <TreeChart
      data={downloadDemoTree}
      type="curved"
      nodeConfig={{
        color: "#fff3cd",
        borderColor: "#ffcc02",
        borderWidth: 2,
      }}
      titleConfig={{
        title: "Chart with download button",
        description: "Top left download button",
      }}
      actionConfig={{
        download: {
          enabled: true,
          position: "top-left",
          filename: "curved-tree.svg",
        },
      }}
      width={600}
      height={400}
    />
  );
}

export default DownloadFeatureTree;

Expected Output

Configuration Options

Download Properties

Property	Type	Default	Description	Options
`enabled`	boolean	`false`	Enable/disable the download feature	`true`, `false`
`position`	string	`"top-right"`	Download button position	`"top-left"`, `"top-right"`, `"bottom-left"`, `"bottom-right"`
`filename`	string	`"treechart.svg"`	Downloaded file name	Any valid filename ending in `.svg`

Tree Alignment