The Area Chart allows you to visualize changes in data over time or differences between categories in the form of an area chart.

Use Cases

• Analyzing sales trends by month
• Tracking changes in visitor counts by day
• Showing the distribution of expense categories within a total

Supported on both web and mobile applications.

Sales Trend Analysis Scenario

In an e-commerce application, the Area Chart is used to visualize the number of sales and revenue over a 12-month period. Thanks to this chart, users can easily see which months had the highest sales.

Connecting the Data Source

1. Go to the Datasources module.
2. Click the + icon next to Tables and name the table “SalesData.”
3. Create the following table.

4. Then, go to SQL Actions and create an action named “SalesData.”
5. You can also create it with C#.
   

SQL Example:SELECT 'January' AS SalesMonth, CAST(1200 AS BIGINT) AS SalesCount, 150000.00 AS SalesRevenue, 90000.00 AS CostUNION ALLSELECT 'February', CAST(1000 AS BIGINT), 130000.00, 80000.00UNION ALLSELECT 'March', CAST(1400 AS BIGINT), 170000.00, 100000.00UNION ALLSELECT 'April', CAST(1600 AS BIGINT), 200000.00, 120000.00UNION ALLSELECT 'May', CAST(1800 AS BIGINT), 220000.00, 130000.00UNION ALLSELECT 'June', CAST(2000 AS BIGINT), 250000.00, 150000.00‍

UI Design Module Steps

1. On the application screen, click the Add Action button on the right panel.
2. Select Custom > SalesData.
3. Add an Area Chart element.
4. In the Properties panel → Datasource section → Actions, select SalesData.

Properties in Scenario Context

• Datasource
  
  • Description: Defines the data source for the chart.
  • How to use: Select your created table or API result.
  • Example: Select “SalesData.”
• Data Label
  
  • Description: Field to display as labels on each data point.
  • How to use: Choose the month field to show each data point with month names.
  • Example: “January, February, March…”
• Tooltip Custom Title Data Label
  
  • Description: Field to display as the tooltip title.
  • How to use: Select the month field to show the month in the tooltip header.
  • Example: Tooltip → “March”
• Tooltip Custom Content Data Label
  
  • Description: Field to display as tooltip content.
  • How to use: Choose the Sales Revenue field to display revenue in the tooltip.
  • Example: “Revenue: ₺170,000”
• Multi Tooltip Content Fields
  
  • Description: Displays multiple fields in the same tooltip.
  • How to use: Select both Sales Count and Cost.
  • Example Tooltip:
    
    • Sales: 1400  
    • Cost: ₺100,000  
• Data Field
  
  • Description: Represents the main data series.
  • How to use: Choose Sales Count to plot the sales trend.
  • Example: 1200 → 1000 → 1400 → 1600
• Data Bg Color
  
  • Description: Background color of the main series.
  • How to use: Choose a color code (e.g., #00BFFF).
  • Example: Sales graph displayed in blue tones.
• Second Data Field
  
  • Description: Represents the second data series.
  • How to use: Choose Sales Revenue to show revenue trends on the same chart.
  • Example: 150000 → 130000 → 170000 → 200000
• Second Data Bg Color
  
  • Description: Background color of the second series.
  • How to use: Select a different color.
  • Example: Sales Revenue → Green tone (#28a745)
• Third Data Field
  
  • Description: Optional third series.
  • How to use: Select Cost to display the cost trend.
    
    
• Third Data Bg Color
  
  • Description: Background color of the third series.
  • How to use: Choose a different color for this series.
• Legend
  
  • Description: Displays the names of the series.
  • Options: top, bottom, left, right
  • Example: Legend → bottom shows the series below the chart.
• Left Axis
  
  • Description: Show/hide the Y-axis on the left side.
• Right Axis
  
  • Description: Use an additional Y-axis on the right.
• Begin At Zero
  
  • Description: Starts the chart axis from zero.
  • Example: Sales chart starts at 0.
• Show Data Labels (Web only)
  
  • Description: Displays labels above data points.
  • Example: Shows “1200” above the point.
• Data Label Formatter (Web only)
  
  • Description: Defines the number format for labels.
  • Options:
    
    • Money → ₺10,000
    • Money TI → ₺10K
    • Percent → %45
    • Fractional-2 → 12.34
    • Fractional-5 → 12.34567

Scenario Result

• X-axis displays months (January–December).
• Y-axis shows sales count with an area chart.
• Selected colors are applied to each series.
• Users can easily read the trends.

Limitations

• “Show Data Labels” and “Data Label Formatter” work only on the web.
• On mobile, values are visible only via tooltips.

Tips & Best Practices

Common mistake: Defining chart properties before the datasource → other settings will not be displayed.

• Ensure date/month fields in the datasource are sorted properly.
• Use high-contrast colors for multiple series.
• For better readability, keep data points between 12–24.