vue-charts Components
CartesianGrid
Add grid lines to cartesian charts
<CartesianGrid> renders horizontal and vertical grid lines behind chart content.
Add a grid
<AreaChart :width="500" :height="300" :data="data">
<CartesianGrid stroke-dasharray="3 3" />
<XAxis data-key="name" />
<YAxis />
<Area data-key="value" fill="#8884d8" />
</AreaChart>
Hide horizontal or vertical lines
<CartesianGrid :horizontal="false" />
<CartesianGrid :vertical="false" />
Add stripe fills
Use horizontal-fill or vertical-fill for alternating background colors:
<CartesianGrid :horizontal-fill="['#f5f5f5', '#fff']" />
Customize grid lines with slots
Use #horizontal or #vertical slots for custom line rendering:
<CartesianGrid>
<template #horizontal="props">
<line v-bind="props" stroke="#eee" stroke-dasharray="5 5" />
</template>
</CartesianGrid>
CartesianGrid props
| Prop | Type | Default | Description |
|---|---|---|---|
horizontal | boolean | object | true | Show horizontal lines |
vertical | boolean | object | true | Show vertical lines |
horizontal-fill | string[] | — | Alternating horizontal stripe colors |
vertical-fill | string[] | — | Alternating vertical stripe colors |
stroke-dasharray | string | — | Dash pattern for grid lines |
sync-with-ticks | boolean | — | Align grid lines with axis ticks |
CartesianGrid slots
| Slot | Props | Description |
|---|---|---|
#horizontal / #vertical | CartesianGridLineSlotProps | Line endpoints (x1, y1, x2, y2), index and SVG attributes |
Both slots are optional and return VNodeChild.