> ## Documentation Index
> Fetch the complete documentation index at: https://docs.dume.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Charts - Interactive Data Visualization

> Create interactive pie charts, line charts, and bar charts using @ commands in Dume.ai's chat interface. Learn chart types, customization options, and data visualization best practices.

## Overview

Dume.ai's chart tools allow you to create interactive visualizations directly from the chat interface. Each chart type has its own dedicated function that can be activated by typing `@` in the chat, making data visualization quick and intuitive.

<Info>
  Charts are generated dynamically and can be customized with various styling options and data configurations.
</Info>

## Chart Types

<Columns cols={3}>
  <Card title="Pie Chart" icon="chart-pie">
    Perfect for showing proportions and percentages of a whole dataset.
  </Card>

  <Card title="Line Chart" icon="chart-line">
    Ideal for displaying trends and changes over time or continuous data.
  </Card>

  <Card title="Bar Chart" icon="chart-simple">
    Great for comparing quantities across different categories or groups.
  </Card>
</Columns>

## Activation Method

Simply type `@` followed by your chart request in natural language. Dume.ai will automatically select the appropriate chart type and generate it for you.

<CodeGroup>
  ```bash Pie Chart Examples theme={null}
  @pie_chart Create a pie chart showing our budget breakdown: Sales 45%, Marketing 25%, Development 20%, Support 10%

  @pie_chart Show traffic sources: Desktop 60%, Mobile 35%, Tablet 5%
  ```

  ```bash Line Chart Examples theme={null}
  @line_chart Show monthly revenue trend from Jan to Jun: 12k, 15k, 18k, 16k, 22k, 25k

  @line_chart Display temperature changes over the week
  ```

  ```bash Bar Chart Examples theme={null}
  @bar_chart Compare product sales: Product A 120, Product B 190, Product C 300

  @bar_chart Show team performance scores for Q1
  ```
</CodeGroup>

<Note>
  Type `@` in the chat to see all available chart options, then describe what you want to visualize in plain English.
</Note>

## Available Charts

### Pie Chart (`@pie_chart`)

Creates circular charts showing data as slices of a pie, perfect for displaying percentages and proportions.

<Accordion title="Pie Chart Examples">
  <CodeGroup>
    ```bash Basic Pie Chart theme={null}
    @pie_chart Show budget distribution: Sales 45%, Marketing 25%, Development 20%, Support 10%
    ```

    ```bash Market Share Analysis theme={null}
    @pie_chart Create a pie chart for browser usage: Chrome 65%, Safari 20%, Firefox 10%, Edge 5%
    ```

    ```bash Survey Results theme={null}
    @pie_chart Display customer satisfaction: Very Satisfied 40%, Satisfied 35%, Neutral 15%, Dissatisfied 10%
    ```
  </CodeGroup>

  <Frame>
    <img className="block dark:hidden" src="https://mintcdn.com/stackgrid/MMXhwtNTjHEo285E/images/light/artifacts/pie-chart.png?fit=max&auto=format&n=MMXhwtNTjHEo285E&q=85&s=fcbb367da3e35128a25bad971ecacd45" alt="pie chart artifact" title="Pie Chart artifact usage" width="1086" height="1028" data-path="images/light/artifacts/pie-chart.png" />

    <img className="hidden dark:block" src="https://mintcdn.com/stackgrid/F6GDMY5YwnHIovR6/images/dark/artifacts/pie-chart.png?fit=max&auto=format&n=F6GDMY5YwnHIovR6&q=85&s=04740d15c32a7197783ac812f4a362a4" alt="pie chart artifact" title="Pie Chart artifact usage" width="1142" height="1054" data-path="images/dark/artifacts/pie-chart.png" />
  </Frame>

  **Common Use Cases:**

  * Budget breakdowns
  * Survey results
  * Market share analysis
  * Resource allocation
</Accordion>

### Line Chart (`@line_chart`)

Creates line graphs to show trends, changes over time, or relationships between continuous variables.

<Accordion title="Line Chart Examples">
  <CodeGroup>
    ```bash Revenue Trend theme={null}
    @line_chart Show monthly revenue from Jan to Jun: 12k, 15k, 18k, 16k, 22k, 25k
    ```

    ```bash Temperature Data theme={null}
    @line_chart Display weekly temperature changes: Mon 72°F, Tue 75°F, Wed 78°F, Thu 80°F, Fri 77°F
    ```

    ```bash Performance Comparison theme={null}
    @line_chart Compare website traffic for 2023 vs 2024 by quarter
    ```
  </CodeGroup>

  <Frame>
    <img className="block dark:hidden" src="https://mintcdn.com/stackgrid/MMXhwtNTjHEo285E/images/light/artifacts/line-chart.png?fit=max&auto=format&n=MMXhwtNTjHEo285E&q=85&s=3af8c4dca78b3da91aadf2ba57f4e8fd" alt="line chart artifact" title="Line Chart artifact usage" width="1128" height="1220" data-path="images/light/artifacts/line-chart.png" />

    <img className="hidden dark:block" src="https://mintcdn.com/stackgrid/F6GDMY5YwnHIovR6/images/dark/artifacts/line-chart.png?fit=max&auto=format&n=F6GDMY5YwnHIovR6&q=85&s=a159dd2f9048ef95868fdc5114c4d3a7" alt="line chart artifact" title="Line Chart artifact usage" width="1110" height="1210" data-path="images/dark/artifacts/line-chart.png" />
  </Frame>

  **Common Use Cases:**

  * Time series data
  * Performance tracking
  * Trend analysis
  * Comparative studies
</Accordion>

### Bar Chart (`@bar_chart`)

Creates vertical or horizontal bar charts for comparing quantities across different categories.

<Accordion title="Bar Chart Examples">
  <CodeGroup>
    ```bash Product Sales theme={null}
    @bar_chart Compare product sales: Product A 120 units, Product B 190 units, Product C 300 units, Product D 500 units
    ```

    ```bash Team Performance theme={null}
    @bar_chart Show team completion rates: Team A 85%, Team B 92%, Team C 78%, Team D 96%
    ```

    ```bash Monthly Comparison theme={null}
    @bar_chart Display sales vs leads for Jan-Mar: Sales (50, 75, 60), Leads (30, 45, 40)
    ```
  </CodeGroup>

  <Frame>
    <img className="block dark:hidden" src="https://mintcdn.com/stackgrid/MMXhwtNTjHEo285E/images/light/artifacts/bar-chart.png?fit=max&auto=format&n=MMXhwtNTjHEo285E&q=85&s=4a00e3f7bfc7bb5283798e94402bbf7c" alt="bar chart artifact" title="Bar Chart artifact usage" width="1036" height="1178" data-path="images/light/artifacts/bar-chart.png" />

    <img className="hidden dark:block" src="https://mintcdn.com/stackgrid/F6GDMY5YwnHIovR6/images/dark/artifacts/bar-chart.png?fit=max&auto=format&n=F6GDMY5YwnHIovR6&q=85&s=9690ea5c66ef1cbd35608bcbd271e409" alt="bar chart artifact" title="Bar Chart artifact usage" width="1100" height="1202" data-path="images/dark/artifacts/bar-chart.png" />
  </Frame>

  **Common Use Cases:**

  * Category comparisons
  * Survey responses
  * Performance metrics
  * Ranking data
</Accordion>

## Quick Reference

<AccordionGroup>
  <Accordion title="How to Use" icon="play">
    1. Type `@` in the chat interface
    2. Choose your chart type (`@pie_chart`, `@line_chart`, or `@bar_chart`)
    3. Describe your data in natural language
    4. Dume.ai automatically generates the chart

    **Example:** `@pie_chart Show our team composition: Engineers 60%, Designers 25%, Managers 15%`
  </Accordion>

  <Accordion title="Natural Language Formats" icon="message">
    **For Pie Charts:**

    * "Show budget breakdown: Category1 40%, Category2 35%, Category3 25%"
    * "Display market share for: Company A 50%, Company B 30%, Company C 20%"

    **For Line Charts:**

    * "Show monthly sales: Jan 100, Feb 150, Mar 200, Apr 180"
    * "Display temperature over the week from Monday to Friday"

    **For Bar Charts:**

    * "Compare team scores: Team A 85, Team B 92, Team C 78"
    * "Show product performance across quarters"
  </Accordion>

  <Accordion title="Tips for Better Charts" icon="lightbulb">
    * Be specific with your data points and labels
    * Include units (%, \$, units) when relevant
    * Keep category names short and clear
    * Mention the chart title you'd prefer
    * Specify time periods for trends

    **Good:** `@line_chart Show quarterly revenue for 2024: Q1 $50k, Q2 $65k, Q3 $70k, Q4 $80k`

    **Better:** `@line_chart Create "2024 Revenue Growth" showing quarterly results: Q1 $50k, Q2 $65k, Q3 $70k, Q4 $80k`
  </Accordion>
</AccordionGroup>

## Example Workflow

<Tabs>
  <Tab title="Simple Chart">
    1. Type `@pie_chart` in chat
    2. Describe your data: "Show budget: Marketing 40%, Sales 35%, Dev 25%"
    3. Chart generates instantly
    4. Ask for adjustments if needed
  </Tab>

  <Tab title="Data from Text">
    1. Share your data or describe it
    2. Type `@bar_chart Compare these quarterly results`
    3. Dume.ai extracts data and creates chart
    4. Refine with additional requests
  </Tab>

  <Tab title="Trend Analysis">
    1. Type `@line_chart`
    2. Say "Show growth over 6 months" with your data
    3. Chart displays trend automatically
    4. Ask for specific styling or annotations
  </Tab>
</Tabs>

<Tip>
  You can also just describe what you want to visualize without specifying the chart type, and Dume.ai will suggest and create the most appropriate chart automatically.
</Tip>

## Best Practices

* **Use natural language** - Just describe your data in plain English
* **Be specific with data** - Include actual numbers, percentages, or values
* **Choose the right chart type** - Pie for proportions, line for trends, bar for comparisons
* **Keep labels clear** - Use short, descriptive category names
* **Include context** - Mention time periods, units, or what the data represents
* **Start simple** - Begin with basic descriptions, then ask for refinements

<Warning>
  For best results, provide clear data points. If you have complex datasets, consider breaking them into smaller, focused visualizations.
</Warning>