Chart

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

Bar Chart ⓘ

Loading Chart... 
Chart({ type: 'bar', labels: true, dataOnHover: true, primaryAxis: true, 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 ⓘ

Loading Chart... 
Chart({ type: 'column', labels: true, primaryAxis: true, 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 ⓘ

Loading Chart... 
Chart({ type: 'line', heading: 'Growth Trajectory', labels: true, primaryAxis: true, secondaryAxesCount: 4 },
    /* 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 ⓘ

Loading Chart... 
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 ⓘ

Loading Chart...

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, heading: 'Browser Market Share', secondaryAxesCount: 4 },
    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 10 secondary axes lines if true (or custom class)
secondaryAxesCount number - Number of secondary axes lines (1-10)
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.