Links

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).