Overview
This node generates charts using the Apache ECharts library. It supports creating line charts, bar charts, and pie charts with customizable options such as chart title, dimensions, color themes, background color, animation, and output format. The node can either use default example data or be configured to accept custom data (though in this implementation only default data is used).
Common scenarios for this node include:
- Visualizing sales or performance data over time with line or bar charts.
- Displaying proportions or distributions with pie charts.
- Embedding generated charts into emails or web pages by exporting them as static images (PNG) or interactive SVG charts.
Practical examples:
- A marketing team visualizes weekly sales trends using a line chart with smooth curves and area shading.
- A product manager compares monthly revenue across categories using a stacked bar chart.
- An analyst presents traffic source distribution with a pie chart using a vintage color theme.
Properties
| Name | Meaning |
|---|---|
| Chart Type | The type of chart to generate. Options: Line Chart, Bar Chart, Pie Chart. |
| Chart Title | Title text displayed on the chart. |
| Width | Width of the chart in pixels. |
| Height | Height of the chart in pixels. |
| Use Default Data | Whether to use built-in example data for the chart. |
| Color Theme | Color theme applied to the chart. Options: Default, Dark, Vintage, Westeros, Essos, Wonderland, Walden. (Note: In current code, theme selection does not affect rendering.) |
| Background Color | Background color of the chart specified as a hex color code (e.g., #ffffff for white). |
| Animation | Enable or disable chart animations. |
| Output Format | Output format of the chart. Options: Static SVG Image (recommended for email compatibility), Interactive SVG Chart (provides hover effects). |
Chart-Type Specific Options
Line Chart Options (shown only if Chart Type = Line Chart):
- Smooth: Whether to show smooth curves instead of straight lines.
- Show Area: Whether to fill the area under the line.
Bar Chart Options (shown only if Chart Type = Bar Chart):
- Stack: Stack group name for creating stacked bar charts.
Pie Chart Options (shown only if Chart Type = Pie Chart):
- Radius: Radius size of the pie chart (e.g., "50%").
- Rose Type: Type of rose chart effect. Options: None, Radius, Area.
Output
The node outputs an array of items, each containing a json object with the following structure:
chartType: The selected chart type (line, bar, or pie).title: The chart title.width: Chart width in pixels.height: Chart height in pixels.option: The Apache ECharts option object representing the chart configuration.outputFormat: The chosen output format ("png" or "svg").- If
outputFormatis"png":svg: The SVG markup string of the chart.svgBase64: Base64-encoded string of the SVG markup.html: A complete HTML document embedding the SVG as a static image.
- If
outputFormatis"svg":html: A complete HTML document embedding the interactive SVG chart with hover tooltips.
The html output can be used directly in web views or emails to display the chart.
The node does not output binary data but encodes images as base64 strings within JSON.
Dependencies
- This node depends on the Apache ECharts library conceptually but implements chart generation manually via SVG markup and embedded JavaScript rather than importing the official ECharts package.
- No external API keys or services are required.
- No special environment variables or n8n credentials are needed.
Troubleshooting
- Unsupported chart type error: If a chart type other than "line", "bar", or "pie" is selected, the node throws an error indicating unsupported chart type. Ensure you select one of the supported types.
- Data customization limitation: Currently, the node uses fixed example data internally and does not support dynamic input data. Users expecting to visualize their own datasets will need to extend the node or preprocess data accordingly.
- Output format issues: Choosing "Static SVG Image" produces a PNG-compatible SVG wrapped in HTML suitable for emails; choosing "Interactive SVG Chart" enables hover tooltips but may have limited support in some email clients.
- Color theme property: Although selectable, the color theme option does not currently alter the chart's colors. Users expecting themed colors should verify or customize the node further.