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.

You can find a more in depth explanation about the card with chart on this page: https://apexcharts.com/javascript-chart-demos/dashboards/modern/

Card with chart, bar

Properties of Card

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