Chart

The Chart Component converts data frames into dynamic Highcharts visualizations based on your data. It can support any base highchart type with the manual config, but the automatic only supports line (single or multi), column (grouped or stacked)

Basic Setup

1. Add the Chart component from the node list
2. Connect a data frame as the input to display
3. Configure the display settings:
   • Set a tab title for the chart
   • Assign a tab index (0-10+)

Preview and Testing

• Run your skill up to the Chart node
• View the preview using the eye icon next to the output name
• Check results in the Preview tab

Customization

While possible to hard-code Highcharts configurations in the Customize tab, it's not recommended as this reduces the dynamic nature of the visualizations requiring all values in this config to be hardcoded. Adding code to this tab will override the inputs available for this node.

You could leverage this field if you have a particular visualization that you would like to always be the same - there is the potential to leverage variables here to enrich that output as well, but check the dynamic node documentation as you may find that component more helpful in that scenario.

Here is an example of a Highcharts Configuration you could use in this tab.

{
    "chart": {
        "type": "bar"
    },
    "title": {
        "text": "Counts of Products by Category in a Hardware Store"
    },
    "xAxis": {
        "categories": ["Tools", "Lumber", "Paint", "Electrical", "Plumbing"],
        "title": {
            "text": null
        }
    },
    "yAxis": {
        "min": 0,
        "title": {
            "text": "Number of Products",
            "align": "high"
        },
        "labels": {
            "overflow": "justify"
        }
    },
    "tooltip": {
        "valueSuffix": " products"
    },
    "series": [{
        "name": "Categories",
        "data": [150, 200, 80, 120, 90]
    }]
}

Common Use Cases

Financial Visualization

• Revenue trends over time
• Budget vs. actual spending
• Profit margin analysis

Sales Analytics

• Monthly sales performance
• Product category comparisons
• Regional sales distribution

Performance Metrics

• KPI tracking
• Team productivity charts
• Resource utilization

Market Analysis

• Market share visualization
• Competitor comparisons
• Trend analysis

Best Practices

• Keep configurations dynamic to respond to user queries
• Test visualizations with different data sets
• Ensure data is properly formatted for the desired chart type
• Use appropriate chart types for your data (bar charts, line charts, etc.)
• Consider user experience when setting up chart interactivity