Chart

Data visualization components powered by Charts.css. Use CSS classes to turn your data into beautiful charts.

Basic Example

Dynamic bar chart with Lightview component API



const { default: Chart } = await import('/components/data-display/chart.js');

const { tags, $ } = Lightview;

const data = [
    { label: 'React', value: 0.8, color: '#61DAFB' },
    { label: 'Vue', value: 0.6, color: '#42B883' },
    { label: 'Svelte', value: 0.4, color: '#FF3E00' },
    { label: 'Lightview', value: 1.0, color: '#7480ff' }
];

const chart = Chart({ 
    type: 'bar', 
    labels: true, 
    primaryAxis: true, 
    spacing: 5,
    heading: 'Framework Popularity'
},
    Chart.Body({},
        ...data.map(d => 
            Chart.Row({},
                Chart.Label({}, d.label),
                Chart.Data({ value: d.value, color: d.color }, 
                    tags.span({ class: 'data' }, `${d.value * 100}%`)
                )
            )
        )
    )
);

$('#demo').insert(chart);

Notes

Chart.Head is for accessibility only. Charts.css visually hides the <thead> element by design—it's meant for screen readers, not visual rendering. Use heading prop for a visible chart title.

Click on the info icon next to each chart type name to get more detail and advanced configuration options.

Bar Chart

Front-end Frameworks
Framework Progress
React 80% React: 80%
Vue 60% Vue: 60%
Svelte 40% Svelte: 40%
Lightview 100% Lightview: 100% 
Chart({ type: 'bar', labels: true, dataOnHover: true, primaryAxis: true, spacing: 5, heading: 'Front-end Frameworks' },
    /* Head is for screen reader use and is not visible */
    Chart.Head({},
        Chart.Row({},
            Chart.Label({ scope: 'col' }, 'Framework'),
            Chart.Label({ scope: 'col' }, 'Progress')
        )
    ),
    Chart.Body({},
        Chart.Row({},
            Chart.Label({}, 'React'),
            Chart.Data({ value: 0.8, tooltip: 'React: 80%' }, $('span', { class: 'data' }, '80%'))
        ),
        Chart.Row({},
            Chart.Label({}, 'Vue'),
            Chart.Data({ value: 0.6, tooltip: 'Vue: 60%' }, $('span', { class: 'data' }, '60%'))
        ),
        Chart.Row({},
            Chart.Label({}, 'Svelte'),
            Chart.Data({ value: 0.4, tooltip: 'Svelte: 40%' }, $('span', { class: 'data' }, '40%'))
        ),
        Chart.Row({},
            Chart.Label({}, 'Lightview'),
            Chart.Data({ value: 1.0, color: '#7480ff', tooltip: 'Lightview: 100%' }, $('span', { class: 'data' }, '100%'))
        )
    )
)

Column Chart

Monthly Revenue
Month Revenue
Jan $20K
Feb $40K
Mar $60K
Apr $80K
May $50K 
Chart({ type: 'column', labels: true, primaryAxis: true, spacing: 10, heading: 'Monthly Revenue' },
    /* Head is for screen reader use and is not visible */
    Chart.Head({},
        Chart.Row({},
            Chart.Label({ scope: 'col' }, 'Month'),
            Chart.Label({ scope: 'col' }, 'Revenue')
        )
    ),
    Chart.Body({},
        Chart.Row({},
            Chart.Label({}, 'Jan'),
            Chart.Data({ value: 0.2 }, $('span', { class: 'data' }, '$20K'))
        ),
        Chart.Row({},
            Chart.Label({}, 'Feb'),
            Chart.Data({ value: 0.4 }, $('span', { class: 'data' }, '$40K'))
        ),
        Chart.Row({},
            Chart.Label({}, 'Mar'),
            Chart.Data({ value: 0.6 }, $('span', { class: 'data' }, '$60K'))
        ),
        Chart.Row({},
            Chart.Label({}, 'Apr'),
            Chart.Data({ value: 0.8 }, $('span', { class: 'data' }, '$80K'))
        ),
        Chart.Row({},
            Chart.Label({}, 'May'),
            Chart.Data({ value: 0.5 }, $('span', { class: 'data' }, '$50K'))
        )
    )
)

Line Chart

Growth Trajectory
Year Value
2018 30%
2019 50%
2020 40%
2021 80%
2022 90% 
Chart({ type: 'line', heading: 'Growth Trajectory', labels: true, primaryAxis: true, secondaryAxis: true },
    /* Head is for screen reader use and is not visible */
    Chart.Head({},
        Chart.Row({},
            Chart.Label({ scope: 'col' }, 'Year'),
            Chart.Label({ scope: 'col' }, 'Value')
        )
    ),
    Chart.Body({},
        Chart.Row({},
            Chart.Label({}, '2018'),
            Chart.Data({ start: 0.1, value: 0.3 }, $('span', { class: 'data' }, '30%'))
        ),
        Chart.Row({},
            Chart.Label({}, '2019'),
            Chart.Data({ start: 0.3, value: 0.5 }, $('span', { class: 'data' }, '50%'))
        ),
        Chart.Row({},
            Chart.Label({}, '2020'),
            Chart.Data({ start: 0.5, value: 0.4 }, $('span', { class: 'data' }, '40%'))
        ),
        Chart.Row({},
            Chart.Label({}, '2021'),
            Chart.Data({ start: 0.4, value: 0.8 }, $('span', { class: 'data' }, '80%'))
        ),
        Chart.Row({},
            Chart.Label({}, '2022'),
            Chart.Data({ start: 0.8, value: 0.9 }, $('span', { class: 'data' }, '90%'))
        )
    )
)

Area Chart

Server Load
Time Load
00:00
04:00
08:00
12:00
16:00 
Chart({ type: 'area', labels: true, primaryAxis: true, heading: 'Server Load' },
    /* Head is for screen reader use and is not visible */
    Chart.Head({},
        Chart.Row({},
            Chart.Label({ scope: 'col' }, 'Time'),
            Chart.Label({ scope: 'col' }, 'Load')
        )
    ),
    Chart.Body({},
        Chart.Row({},
            Chart.Label({}, '00:00'),
            Chart.Data({ start: 0.2, value: 0.4 })
        ),
        Chart.Row({},
            Chart.Label({}, '04:00'),
            Chart.Data({ start: 0.4, value: 0.8 })
        ),
        Chart.Row({},
            Chart.Label({}, '08:00'),
            Chart.Data({ start: 0.8, value: 0.6 })
        ),
        Chart.Row({},
            Chart.Label({}, '12:00'),
            Chart.Data({ start: 0.6, value: 0.9 })
        ),
        Chart.Row({},
            Chart.Label({}, '16:00'),
            Chart.Data({ start: 0.9, value: 0.5 })
        )
    )
)

Pie Chart

Browser Market Share
Browser Share
Chrome 60%
Firefox 25%
Safari 15%

Note: For Pie charts, use --start and --end (not --size). Each segment's --start should equal the previous segment's --end. The --end value is --start plus the segment's proportion (0.0 to 1.0). 

Chart({ type: 'pie', labels: true, spacing: 2, heading: 'Browser Market Share' },
    Chart.Body({},
        Chart.Row({},
            Chart.Label({}, 'Chrome'),
            Chart.Data({ start: 0.0, end: 0.6, color: '#4CAF50' }, $('span', { class: 'data' }, '60%'))
        ),
        Chart.Row({},
            Chart.Label({}, 'Firefox'),
            Chart.Data({ start: 0.6, end: 0.85, color: '#F44336' }, $('span', { class: 'data' }, '25%'))
        ),
        Chart.Row({},
            Chart.Label({}, 'Safari'),
            Chart.Data({ start: 0.85, end: 1.0, color: '#2196F3' }, $('span', { class: 'data' }, '15%'))
        )
    )
)

Props

Prop Type Default Description
type string 'bar' Type of chart: 'bar', 'column', 'line', 'area', 'pie'
heading string - Caption for the chart table
labels boolean false Show axis labels (.show-labels)
dataOnHover boolean false Show data tooltip on hover (.show-data-on-hover)
primaryAxis boolean false Show primary axis lines (.show-primary-axis)
secondaryAxis boolean|string false Show secondary axes lines (.show-10-secondary-axes or custom class)
spacing number - Gap between data points (1-20) (.data-spacing-N)
reverse boolean false Reverse chart orientation (.reverse)
multiple boolean false Enable multiple datasets mode (.multiple)
stacked boolean false Enable stacked mode for bar/column charts (.stacked)

Chart.Data Props

Properties available for the Chart.Data subcomponent.

Prop Type Description
value (or size) number Value of the data point (0.0 - 1.0). Maps to --size. Use for bar, column, line, and area charts.
start number Start position (0.0 - 1.0). Used for stacked bars, line/area charts, and pie segments. Maps to --start.
end number End position (0.0 - 1.0). Maps to --end. Required for pie charts instead of value.
color string CSS color value for the data segment. Maps to --color.
tooltip string Text to display in the standard tooltip span.