Markers highlight data points on your charts. Nuxt Charts allows you to customize marker type, size, color, and stroke to match your data and design.
You can configure markers using the :marker-config prop. For example:
<script lang="ts" setup>
interface MarkerConfig {
type?: 'circle' | 'square' | 'triangle' | 'diamond'
size?: number
strokeWidth?: number
color?: string
strokeColor?: string
}
const chartData = [
{ month: 'January', desktop: 120 },
{ month: 'February', desktop: 185 },
{ month: 'March', desktop: 160 },
{ month: 'April', desktop: 220 },
{ month: 'May', desktop: 195 },
{ month: 'June', desktop: 270 },
]
const categories: Record<string, BulletLegendItemInterface> = {
desktop: { name: 'Desktop', color: '#22c55e' },
}
const xFormatter = (tick: number, _i?: number, _ticks?: number[]): string => {
return chartData[tick]?.month ?? ''
}
const MarkerConfig: MarkerConfig = {
desktop: {
type: 'circle',
size: 8,
color: '#22c55e',
strokeColor: '#22c55e',
strokeWidth: 2,
},
}
</script>
<template>
<LineChart
:data="chartData"
:height="300"
x-label="Time"
y-label="Temperature"
:categories="categories"
:y-num-ticks="4"
:x-num-ticks="7"
:x-formatter="xFormatter"
:legend-position="LegendPosition.Top"
:hide-legend="false"
:y-grid-line="true"
:marker-config="MarkerConfig"
@click="(e, data) => console.log('Chart clicked', data)"
>
</LineChart>
</template>
<style scoped>
/* Stroke maps to color key in categories */
/* The color should match the color defined in categories */
.markers:deep(*[stroke='#22c55e']) {
marker: url('#circle-marker-desktop');
}
</style>
To ensure markers display correctly, add the following CSS to your component:
<style scoped>
/* Stroke maps to color key in categories */
/* The color should match the color defined in categories */
.markers:deep(*[stroke='#3b82f6']) {
marker: url('#circle-marker-desktop');
}
</style>
You can fully customize markers for each series or data point. See the example below for a custom marker configuration.