Component: Chart Data visualization powered by Chart.js

Overview

• Multiple chart types
• HTML-based configuration
• Responsive
• Powered by Chart.js

Basic usage

Add data-anim-chart to a canvas element.

<canvas
data-anim-chart
data-anim-chart-type="line"
data-anim-chart-labels='["Jan","Feb","Mar","Apr"]'
data-anim-chart-datasets='[
{
"label":"Visitors",
"data":[120,200,150,300],
"borderColor":"#6366f1",
"backgroundColor":"#6366f1"
}
]'
></canvas>

Chart types

• line
• bar
• pie
• doughnut
• radar

Bar chart

<canvas
data-anim-chart
data-anim-chart-type="bar"
data-anim-chart-labels='["Mon","Tue","Wed"]'
data-anim-chart-datasets='[
{
"label":"Orders",
"data":[5,10,8],
"backgroundColor":"#22c55e"
}
]'
></canvas>

Pie chart

<canvas
data-anim-chart
data-anim-chart-type="pie"
data-anim-chart-labels='["Red","Blue","Green"]'
data-anim-chart-datasets='[
{
"data":[10,20,30],
"backgroundColor":["red","blue","green"]
}
]'
></canvas>

Attributes

• data-anim-chart — init chart
• data-anim-chart-type — chart type
• data-anim-chart-labels — labels array
• data-anim-chart-datasets — datasets config

Behavior

• Parses data from HTML attributes
• Initializes Chart.js instance
• Automatically responsive
• Supports multiple charts

Download

Use Chart component for dashboards, analytics, reports, and data visualization interfaces.