The Mixed Chart element combines different chart types (e.g., Bar + Line) into a single visual to present complex data sets comprehensively and clearly. It is used to compare multiple data series, analyze different metrics simultaneously, or display trend + distribution information together.

The Mixed Chart element is supported in both web and mobile applications.

Areas of Use

• Displaying sales volume (Bar) and sales trend (Line) on the same chart,
• Tracking website traffic (Bar) and conversion rate (Line) together,
• Comparing revenue and expense distributions,
• Displaying KPI values on the same screen with different visualization styles, etc.

Sales and Revenue Tracking

On an e-commerce site, monthly sales quantities are displayed with a Bar Chart, while sales revenues are displayed with a Line Chart on the same Mixed Chart.

• X-axis: Month information (January, February, March...)
• Bar Chart series: Sales quantity
• Line Chart series: Sales revenue (₺)
• Both sales and revenue information are displayed together on the tooltip.

Connecting the Data Source

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

4. Then click SQL Actions and name the action “SalesMixedData”. You can also create it with C#.
5. Enter the following SQL command.

SELECT ‘January’ AS SalesMonth, 1200 AS SalesCount, 150000.00 AS SalesRevenueUNION ALLSELECT ‘February’, 1000, 130000.00UNION ALLSELECT ‘March’, 1400, 170000.00UNION ALLSELECT ‘April’, 1600, 200000.00UNION ALLSELECT ‘May’, 1800, 220000.00UNION ALLSELECT ‘June’, 2000, 250000.00‍

UI Design Module Operations

1. Click the Add Action button on the right side of the application screen.
2. Select the Custom > SalesMixedData action.
3. Add the Mixed Chart element.
4. Select the SalesMixedData action from the Properties panel Options field.

Using Properties in the Scenario Context

General Properties

• Options > Actions
  
  • Description: Select the SQL actions from which the data to be displayed in the chart will be retrieved.
  • Example: SalesMixedData
• X Axis Field
  
  • Description: The field to be displayed on the X axis.
  • Example: SalesMonth
• Axis Value Field
  
  • Description: The data field to be displayed on the Y axis.

Mixed Chart – Point Properties

• Options > Action: Select the action that fetches point data.
• X Axis Field: The field where points will be positioned.
• Axis Value Field: Determines point values.
• Custom Tooltip Line: Custom line information in the tooltip.
• Custom Tooltip Value: Custom value in the tooltip.
• Color: Point color.

Mixed Chart – Line Properties

• Options > Actions: Action that fetches line data.
• X Axis Value Field: The horizontal axis data for the line.
• Axis Value Field: The value field for the line.
• Custom Tooltip Title: The tooltip title.
• Custom Tooltip Value: The tooltip content.
• Color: The line color.
• Label: Label describing the line series.
• Dash Spacing: Dashed line spacing.
• Dash Length: Dashed line length.
• Line Width: Line thickness.

When the Scenario Step is Complete

• On the X axis: Month names (January–June) are visible.
• Bar series: Sales quantity is shown with blue bars.
• Line series: Sales revenue is shown with a green line.
• When the tooltip is opened: Both sales quantity and sales revenue information are displayed.
• Users can easily analyze sales performance based on both quantity and revenue.

Limitations

• The chart may become complex when too many series are added.
• “Tooltip Custom” features only provide advanced display in web applications.

Tips and Best Practices

Maintain high color contrast in Bar and Line series.

• Adding too many categories reduces readability → ideal number of months: 6–12.
• Limit queries for performance with large datasets.
• Optimize line thicknesses and axis text sizes for mobile view.