Charts & visualization

Overview

Gainable apps include Chart.js for data visualization. You can add charts to any page by describing what you want to see.

Chart types

Line charts

Best for showing trends over time.

"Add a line chart showing sales per month"
"Display order count over the last 12 months"
"Show revenue trend as a line graph"

Bar charts

Best for comparing categories.

"Add a bar chart comparing sales by region"
"Show deals closed by salesperson"
"Display monthly revenue as bars"

Pie charts

Best for showing proportions.

"Add a pie chart showing deals by status"
"Display tasks by priority as a pie chart"
"Show revenue breakdown by product category"

Doughnut charts

Similar to pie charts with a hole in the center.

"Add a doughnut chart for expense categories"
"Show completion status as a doughnut"

Requesting charts

Be specific about the data

"Add a pie chart showing deals grouped by status (won, lost, pending)"

"Add a chart"

Specify the chart type

"Add a line chart showing monthly revenue"

"Show monthly revenue"

Name your metrics

"Dashboard with:
- Total deals (count)
- Pipeline value (sum of amounts)
- Deals by status (pie chart)
- Revenue by month (line chart)"

"Dashboard with some charts"

Common patterns

Dashboard with KPIs and charts

"Add a dashboard showing:
- Total deals count (KPI card)
- Total pipeline value (KPI card)
- Average deal size (KPI card)
- Deals by status (pie chart)
- Deals closed per month (line chart)
- Top 5 deals by amount (table)"

Charts on detail pages

"On the company detail page, add:
- Deals by status for this company (pie chart)
- Monthly revenue from this company (line chart)"

Comparative charts

"Add a bar chart comparing:
- Deals by salesperson
- Revenue by product
- Orders by region"

Date-based charts

When charting data over time, specify the date field:

"Line chart showing deals by close date per month"
"Bar chart of orders by order date"

If your data has a business date (like close date or order date), specify it. Otherwise, charts will use the creation date.

Interactive features

Charts in Gainable are interactive:

Hover - See exact values
Click - Filter or drill down (when configured)
Resize - Responsive to container size
Animate - Smooth transitions on data change

Real-time updates

Charts update automatically when data changes:

New records are added to the chart
Updated values refresh the visualization
Deleted records are removed
All without page refresh

Chart placement

On dashboards

"Dashboard with a pie chart on the left and line chart on the right"

In cards

"Show the status distribution chart in a card"

With data tables

"Above the deals table, show a chart of deals by status"

Customization

Colors

"Use green for won deals, red for lost, yellow for pending"
"Use the theme colors for the chart"

Labels

"Show percentages on the pie chart"
"Include data values on the bars"

Legends

"Put the legend below the chart"
"Hide the legend" (for simple charts)

Best practices

Match chart type to data

Trends over time → Line chart
Category comparison → Bar chart
Part of whole → Pie or doughnut

Don't overcrowd

Limit pie charts to 5-7 segments. Use bar charts for more categories.

Use meaningful titles

“Deals by Status” is clearer than “Chart 1”

Consider the context

Place charts where they’re relevant - sales charts on sales pages, etc.

Examples

Sales dashboard

Build a sales dashboard with:
- Total revenue (KPI card)
- Deal count (KPI card)
- Win rate (KPI card)
- Revenue by month (line chart)
- Deals by stage (pie chart)
- Top salespeople (bar chart)

Project overview

Add to the project dashboard:
- Tasks by status (doughnut chart)
- Tasks completed per week (line chart)
- Overdue tasks count (KPI card)

​Overview

​Chart types

​Line charts

​Bar charts

​Pie charts

​Doughnut charts

​Requesting charts

​Be specific about the data

​Specify the chart type

​Name your metrics

​Common patterns

​Dashboard with KPIs and charts

​Charts on detail pages

​Comparative charts

​Date-based charts

​Interactive features

​Real-time updates

​Chart placement

​On dashboards

​In cards

​With data tables

​Customization

​Colors

​Labels

​Legends

​Best practices

​Examples

​Sales dashboard

​Project overview

​Learn more

Data models

Real-time

Overview

Chart types

Line charts

Bar charts

Pie charts

Doughnut charts

Requesting charts

Be specific about the data

Specify the chart type

Name your metrics

Common patterns

Dashboard with KPIs and charts

Charts on detail pages

Comparative charts

Date-based charts

Interactive features

Real-time updates

Chart placement

On dashboards

In cards

With data tables

Customization

Colors

Labels

Legends

Best practices

Examples

Sales dashboard

Project overview

Learn more