Customize

vccs components are designed to be customizable. You can override almost any visual element using Vue slots, the <Cell> component, or direct SVG attributes.

Labels and axis ticks can be customized

For example, we can create a bar with customized axis tick that rotates the text:

The shape of bar can be customized

The #shape slot of <Bar /> can render any custom SVG shape. Here's a triangle/leaf shape:

The content of tooltip can be customized

Sometimes we may want tooltip to display much more information:

The style of each chart element can be customized

Except tooltip and legend, all elements in a chart are drawn by SVG. You can change the attributes of each chart element conveniently:

The style of legend can be customized

Legend is an HTML element. You can change its style using the wrapper-style prop:

Per-item styling with Cell

The <Cell> component lets you style individual data points differently:

Cell works with <Bar>, <Pie>, and <Funnel> components. Each Cell maps by index to its corresponding data entry.