> For the complete documentation index, see [llms.txt](https://docs.wem.io/platform/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.wem.io/platform/wemtipsandtricks/widgets/advanced-charts/card-with-chart.md).

# Card with Chart

Card widget in flutter is a sheet of Material used to represent all the similar information in a single block  in a compressed way, it is also possible to show results through some types of graphs, such as linear, area and bar graphs, any type of summary data projection.

{% hint style="info" %}
You can find a more in depth explanation about the card with chart on [this](<https://apexcharts.com/javascript-chart-demos/dashboards/modern/ >) page: [https://apexcharts.com/javascript-chart-demos/dashboards/modern/ ](<https://apexcharts.com/javascript-chart-demos/dashboards/modern/ >)
{% endhint %}

![Card with chart, bar](/files/BEiENaLKZVu0X2tarpBa)

**Properties of Card**&#x20;

<table data-header-hidden><thead><tr><th width="192.61111111111111"></th><th width="150"></th><th width="150"></th><th></th></tr></thead><tbody><tr><td><strong>Property Name</strong></td><td><strong>Data type</strong></td><td><strong>Type</strong></td><td><strong>Description</strong></td></tr><tr><td>Card title</td><td>Text</td><td>Expression</td><td>To set the title of the card.</td></tr><tr><td>Title style</td><td>Text</td><td>Dropdown</td><td>Defines the HTML Tag style for the title text. (H1, H2, H3, H4, H5, H6).</td></tr><tr><td>Subtitle</td><td>Text</td><td>Expression</td><td>To set the subtitle of the card.</td></tr><tr><td>Subtitle style.</td><td>Text</td><td>Dropdown</td><td>Defines the HTML Tag style for the subtitle text. (H1, H2, H3, H4, H5, H6).</td></tr><tr><td>Card content</td><td>Text</td><td>Expression</td><td>The content of the card.</td></tr><tr><td>Content style</td><td>Text</td><td>Dropdown</td><td>Defines the HTML Tag style for the subtitle text. (H1, H2, H3, H4, H5, H6).</td></tr><tr><td>Show chart</td><td>Boolean</td><td>Expression</td><td>To show or not, the chart in the card.</td></tr><tr><td>Chart position</td><td>Text</td><td>Dropdown</td><td>Determines the positioning of the chart in the card. (2 – right, -1 - left.)</td></tr><tr><td>Type</td><td>Text</td><td>Dropdown</td><td>Defines which graph type is displayed on the card. (Bar, line, area).</td></tr><tr><td>Data Source</td><td>List</td><td>Expression</td><td>The list of the data source.</td></tr><tr><td>Label</td><td>Text</td><td>Expression</td><td>Set the label of the list.</td></tr><tr><td>Value</td><td>Number</td><td>Expression</td><td>Set the value of the list.</td></tr><tr><td>Series name</td><td>Text</td><td>Expression</td><td>The series of the list.</td></tr><tr><td>Clickable</td><td>Boolean</td><td> </td><td>If enabled the card will be a clickable object.</td></tr><tr><td>On click</td><td>Text</td><td>Dropdown</td><td>Defines the action to take after the user clicks the card. (Exit, flowchart, navigation, Refresh).</td></tr><tr><td>Exit</td><td>Button</td><td> </td><td>To click the button of selected value.</td></tr><tr><td>Flowchart</td><td>Flowchart</td><td> </td><td>Set the flowchart to the following card.</td></tr><tr><td>Navigation</td><td>Navigation item</td><td> </td><td>Set the navigation to the following card.</td></tr><tr><td>Background color on hover</td><td>Text</td><td>Expression</td><td><p>Defines the background color change when hovering a card.</p><p>Works with:</p><p>Hexadecimal colors</p><p>Hexadecimal colors with transparency</p><p>RGB colors</p><p>RGBA colors</p><p>HSL colors</p><p>HSLA colors</p><p>Predefined/Cross-browser color names</p></td></tr><tr><td>Body padding</td><td>Number</td><td>Expression</td><td>Adds padding to the chart according to the number in pixels. (Default value = 0)</td></tr><tr><td>Border radius</td><td>Number</td><td>Expression</td><td>Sets a specific border radius for the rounded corners (Default is 0px for non-round corners)</td></tr><tr><td>Show Box shadow</td><td>Boolean</td><td>Expression</td><td><p>"Card" effect, makes it look like the card is floating.</p><p>true</p></td></tr><tr><td>Border Style</td><td>Text</td><td>Dropdown</td><td>he border-style property specifies what kind of border to display. (Solid, dotted, dashed, double, groove, ridge).</td></tr><tr><td>Border color</td><td>Text</td><td>Expression</td><td><p>The color can be set by:</p><p> </p><p>name - specify a color name, like "red"</p><p>HEX - specify a HEX value, like "#ff0000"</p><p>RGB - specify a RGB value, like "rgb(255,0,0)"</p><p>HSL - specify a HSL value, like "hsl(0, 100%, 50%)"</p><p>transparent</p></td></tr><tr><td>Border Width</td><td>Number</td><td>Expression</td><td>The width can be set as a specific number of pixels. Default value: 0(Set to 1 or higher for the border to appear)</td></tr><tr><td>Chart Color</td><td>Text</td><td>Expression</td><td><p>Defines the color of the Chart.</p><p>Only works when provided with either hex or rgb/rgba format. Color names are not supported.</p></td></tr><tr><td>Header background color</td><td>Text</td><td>Expression</td><td><p>Defines the background color of the header using CSS Legal Color Values. Works with: Hexadecimal colors</p><p>Hexadecimal colors with transparency</p><p>RGB colors</p><p>RGBA colors</p><p>HSL colors</p><p>HSLA colors</p><p>Predefined/Cross-browser color names</p></td></tr><tr><td>Body background color</td><td>Text</td><td>Expression</td><td><p>Defines the background color of the card body using CSS Legal Color Values.</p><p>Works with:</p><p>Hexadecimal colors</p><p>Hexadecimal colors with transparency</p><p>RGB colors</p><p>RGBA colors</p><p>HSL colors</p><p>HSLA colors</p><p>Predefined/Cross-browser color names</p></td></tr><tr><td>Title icon</td><td>Text</td><td>Expression</td><td><p>Uses the FontAwesome library Example:</p><p>"fa fa-info-circle"</p><p>size modifiers are not needed.</p></td></tr><tr><td>Title text color</td><td>Text</td><td>Expression</td><td><p>Defines the color of the title icon and text using CSS Legal Color Values. Works with: Hexadecimal colors</p><p>Hexadecimal colors with transparency</p><p>RGB colors</p><p>RGBA colors</p><p>HSL colors</p><p>HSLA colors</p><p>Predefined/Cross-browser color names</p></td></tr><tr><td>Title icon size</td><td>Text</td><td>Dropdown</td><td>Defines the size for the title icon using FontAwesome sizing modifier. (Fa-2x, Fa-xs, Fa-sm, Fa-lg, Fa-3x, Fa-4x).</td></tr><tr><td>Tooltip content</td><td>Text</td><td>Expression</td><td>Tooltip for the info icon, use it to describe the contents of the card. If no value is set the tooltip and its icon won't show up.</td></tr><tr><td>Tooltip icon</td><td>Text</td><td>Expression</td><td><p>Uses the FontAwesome library Example:</p><p>"fa fa-info-circle"(This is the default Icon used when undefined)</p><p>size modifiers are not needed.</p></td></tr><tr><td>Tooltip icon color</td><td>Text</td><td>Expression</td><td><p>Defines the color of the icon using CSS Legal Color Values. Works with: Hexadecimal colors</p><p>Hexadecimal colors with transparency</p><p>RGB colors</p><p>RGBA colors</p><p>HSL colors</p><p>HSLA colors</p><p>Predefined/Cross-browser color names</p></td></tr><tr><td>Tooltip icon size</td><td>Text</td><td>Dropdown</td><td>Defines the size for the tooltip icon using FontAwesome sizing modifier. (Fa-2x, Fa-xs, Fa-sm, Fa-lg, Fa-3x, Fa-4x).</td></tr><tr><td>Subtitle icon</td><td>Text</td><td>Expression</td><td><p>Uses the FontAwesome library Example:</p><p>"fa fa-info-circle"</p><p>size modifiers are not needed.</p></td></tr><tr><td>Subtitle icon color</td><td>Text</td><td>Expression</td><td><p>Defines the color of the icon using CSS Legal Color Values. Works with: Hexadecimal colors</p><p>Hexadecimal colors with transparency</p><p>RGB colors</p><p>RGBA colors</p><p>HSL colors</p><p>HSLA colors</p><p>Predefined/Cross-browser color names</p></td></tr><tr><td>Subtitle icon size</td><td>Text</td><td>Dropdown</td><td>Defines the size for the subtitle icon using FontAwesome sizing modifier. (Fa-2x, Fa-xs, Fa-sm, Fa-lg, Fa-3x, Fa-4x).</td></tr></tbody></table>


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.wem.io/platform/wemtipsandtricks/widgets/advanced-charts/card-with-chart.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.