Home

User Guide

Chart Design

Overview

ToChart provides powerful chart design capabilities, supporting various ECharts chart types including bar charts, line charts, pie charts, scatter charts, and more. Through an intuitive visual interface, you can easily design and configure various types of charts.

Chart Types

ToChart supports the following main chart types:

1. Basic Charts

  • Bar Chart: Compare data across categories
  • Line Chart: Display data trends over time
  • Pie Chart: Show proportions of parts to a whole
  • Scatter Chart: Display relationships between two variables

2. Advanced Charts

  • Radar Chart: Display multi-dimensional data
  • Heatmap: Display data density distribution
  • Gauge: Display metric completion status
  • Funnel Chart: Display conversion rates in business processes
  • Candlestick Chart: Display financial data
  • Sunburst Chart: Display hierarchical data
  • Tree Chart: Display tree structure data
  • Treemap: Display hierarchical data proportions
  • Box Plot: Display data distribution
  • Parallel Coordinates: Display multi-dimensional data
  • Path Chart: Display path data
  • Graph: Display relationship data
  • Sankey Chart: Display flow data
  • Theme River: Display event sequence data

Chart Design Workflow

1. Create a Chart

  1. Click the “Chart Designer” icon in the left navigation bar
  2. Click “New Chart” in the Resource Explorer
  3. Select a chart type from the list
  4. Click “OK” to create the chart

2. Configure Data

In the “Data” tab of the right properties panel, configure the chart’s data source and data mapping.

Data Source Selection

  • Select an existing data source
  • Or click “New Data Source” to create a new one

Data Query

  • SQL Query: Write SQL queries directly
  • Visual Query: Use the visual query builder

Data Mapping

Map query result fields to chart dimensions and metrics:

  • Dimensions: Fields for categorizing data (e.g., time, region)
  • Metrics: Fields for measuring data (e.g., sales, quantity)

3. Configure Style

In the “Style” tab of the right properties panel, configure various chart style properties.

Basic Style

  • Title: Set chart title, subtitle, position, etc.
  • Colors: Set color scheme
  • Fonts: Set font family, size, color, etc.

Component Style

  • Axes: Configure X and Y axis styles, labels, ticks, etc.
  • Legend: Configure legend position, style, layout, etc.
  • Tooltip: Configure tooltip content and style
  • Toolbox: Configure chart toolbox feature buttons

Advanced Style

  • Animation: Set chart animation effects and duration
  • Interaction: Configure chart interaction behavior (zoom, pan, etc.)
  • Responsive Design: Configure chart behavior across different screen sizes

4. Preview and Save

  • Real-time Preview: Preview chart effects during design
  • Save Chart: Click “Save” in the top toolbar to save your design
  • Export Image: Click “Export” in the top toolbar to export as PNG

Chart Design Tips

1. Choose the Right Chart Type

  • Compare Data: Use bar charts
  • Show Trends: Use line charts, area charts
  • Show Proportions: Use pie charts, donut charts
  • Show Relationships: Use scatter charts, heatmaps

2. Optimize Chart Readability

  • Keep charts simple, avoid excessive decorative elements
  • Use clear titles and labels
  • Choose color schemes with good contrast
  • Add legends and tooltips for complex charts

3. Data Visualization Best Practices

  • Ensure data accuracy and completeness
  • Use appropriate scaling to avoid data distortion
  • Maintain time axis consistency for time series data
  • Consider adding reference lines for easier comparison

Advanced Features

1. Chart Templates

  • Save common chart designs as templates
  • Use templates to quickly create similar charts
  • Manage and share chart templates

2. Chart Linking

  • Configure linking between multiple charts
  • Implement drill-down functionality
  • Support linking with external data

3. Custom Charts

  • Support custom ECharts configuration
  • Directly edit ECharts configuration JSON
  • Support importing external ECharts themes

FAQ

Chart Shows Blank

  • Check data source connection
  • Verify SQL query returns data
  • Check data mapping correctness

Chart Style Issues

  • Check style configuration
  • Try resetting styles to defaults
  • Check browser console for error messages

Chart Performance Issues

  • Optimize SQL queries to reduce data volume
  • Consider using data aggregation
  • Reduce chart animation effects
  • Disable unnecessary interactive features