Data markers in Vue Chart component
18 Nov 201824 minutes to read
Data markers are visual indicators placed at each data point on a series, helping to clearly identify and highlight individual values in your chart. Markers improve readability and accessibility, especially in line and area charts where data points may otherwise be unclear. Customize marker shape, color, size, and appearance to match your design requirements.
Marker
Enable markers for data points by setting the visible option to true in the marker property. Each series receives distinct markers by default, improving visual differentiation.
<template>
<div id="app">
<ejs-chart id="container" :title='title' :primaryXAxis='primaryXAxis'>
<e-series-collection>
<e-series :dataSource='seriesData' type='Line' xName='x' yName='y' name='December 2007'
:marker='marker'> </e-series>
<e-series :dataSource='seriesData' type='Line' xName='x' yName='y1' name='December 2008'
:marker='marker'> </e-series>
</e-series-collection>
</ejs-chart>
</div>
</template>
<script setup>
import { provide } from "vue";
import { ChartComponent as EjsChart, LineSeries, Category,
SeriesCollectionDirective as ESeriesCollection, SeriesDirective as ESeries
} from "@syncfusion/ej2-vue-charts";
const seriesData = [
{ x: 'WW', y: 12, y1: 22, y2: 38.3, y3: 50 },
{ x: 'EU', y: 9.9, y1: 26, y2: 45.2, y3: 63.6 },
{ x: 'APAC', y: 4.4, y1: 9.3, y2: 18.2, y3: 20.9 },
{ x: 'LATAM', y: 6.4, y1: 28, y2: 46.7, y3: 65.1 },
{ x: 'MEA', y: 30, y1: 45.7, y2: 61.5, y3: 73 },
{ x: 'NA', y: 25.3, y1: 35.9, y2: 64, y3: 81.4 }
];
const primaryXAxis = {
valueType: 'Category', interval: 1
};
const marker = {
visible: true,
};
const title = "FB Penetration of Internet Audience";
provide('chart', [LineSeries, Category]);
</script>
<style>
#container {
height: 350px;
}
</style><template>
<div id="app">
<ejs-chart id="container" :title='title' :primaryXAxis='primaryXAxis'>
<e-series-collection>
<e-series :dataSource='seriesData' type='Line' xName='x' yName='y' name='December 2007'
:marker='marker'> </e-series>
<e-series :dataSource='seriesData' type='Line' xName='x' yName='y1' name='December 2008'
:marker='marker'> </e-series>
</e-series-collection>
</ejs-chart>
</div>
</template>
<script>
import { ChartComponent, LineSeries, Category, SeriesCollectionDirective, SeriesDirective } from "@syncfusion/ej2-vue-charts";
export default {
name: "App",
components: {
"ejs-chart":ChartComponent,
"e-series-collection":SeriesCollectionDirective,
"e-series":SeriesDirective,
},
data() {
return {
seriesData: [
{ x: 'WW', y: 12, y1: 22, y2: 38.3, y3: 50 },
{ x: 'EU', y: 9.9, y1: 26, y2: 45.2, y3: 63.6 },
{ x: 'APAC', y: 4.4, y1: 9.3, y2: 18.2, y3: 20.9 },
{ x: 'LATAM', y: 6.4, y1: 28, y2: 46.7, y3: 65.1 },
{ x: 'MEA', y: 30, y1: 45.7, y2: 61.5, y3: 73 },
{ x: 'NA', y: 25.3, y1: 35.9, y2: 64, y3: 81.4 }
],
primaryXAxis: {
valueType: 'Category', interval: 1
},
marker: {
visible: true,
},
title: "FB Penetration of Internet Audience"
};
},
provide: {
chart: [LineSeries, Category]
}
};
</script>
<style>
#container {
height: 350px;
}
</style>Shape
Assign different shapes to markers such as Rectangle, Circle, Diamond, Triangle, and others using the shape property. Shape selection helps distinguish between multiple series and improves visual clarity.
<template>
<div id="app">
<ejs-chart id="container" :title='title' :primaryXAxis='primaryXAxis'>
<e-series-collection>
<e-series :dataSource='seriesData' type='Line' xName='x' yName='y' name='December 2007'
:marker='marker'> </e-series>
</e-series-collection>
</ejs-chart>
</div>
</template>
<script setup>
import { provide } from "vue";
import { ChartComponent as EjsChart, LineSeries, Category,
SeriesCollectionDirective as ESeriesCollection, SeriesDirective as ESeries
} from "@syncfusion/ej2-vue-charts";
const seriesData = [
{ x: 'WW', y: 12, y1: 22, y2: 38.3, y3: 50 },
{ x: 'EU', y: 9.9, y1: 26, y2: 45.2, y3: 63.6 },
{ x: 'APAC', y: 4.4, y1: 9.3, y2: 18.2, y3: 20.9 },
{ x: 'LATAM', y: 6.4, y1: 28, y2: 46.7, y3: 65.1 },
{ x: 'MEA', y: 30, y1: 45.7, y2: 61.5, y3: 73 },
{ x: 'NA', y: 25.3, y1: 35.9, y2: 64, y3: 81.4 }
];
const primaryXAxis = {
valueType: 'Category', interval: 1
};
const marker = {
visible: true, width: 10, height: 10, shape: 'Diamond'
};
const title = "FB Penetration of Internet Audience";
provide('chart', [LineSeries, Category]);
</script>
<style>
#container {
height: 350px;
}
</style><template>
<div id="app">
<ejs-chart id="container" :title='title' :primaryXAxis='primaryXAxis'>
<e-series-collection>
<e-series :dataSource='seriesData' type='Line' xName='x' yName='y' name='December 2007'
:marker='marker'> </e-series>
</e-series-collection>
</ejs-chart>
</div>
</template>
<script>
import { ChartComponent, LineSeries, Category, SeriesCollectionDirective, SeriesDirective } from "@syncfusion/ej2-vue-charts";
export default {
name: "App",
components: {
"ejs-chart":ChartComponent,
"e-series-collection":SeriesCollectionDirective,
"e-series":SeriesDirective,
},
data() {
return {
seriesData: [
{ x: 'WW', y: 12, y1: 22, y2: 38.3, y3: 50 },
{ x: 'EU', y: 9.9, y1: 26, y2: 45.2, y3: 63.6 },
{ x: 'APAC', y: 4.4, y1: 9.3, y2: 18.2, y3: 20.9 },
{ x: 'LATAM', y: 6.4, y1: 28, y2: 46.7, y3: 65.1 },
{ x: 'MEA', y: 30, y1: 45.7, y2: 61.5, y3: 73 },
{ x: 'NA', y: 25.3, y1: 35.9, y2: 64, y3: 81.4 }
],
primaryXAxis: {
valueType: 'Category', interval: 1
},
marker: {
visible: true, width: 10, height: 10, shape: 'Diamond'
},
title: "FB Penetration of Internet Audience"
};
},
provide: {
chart: [LineSeries, Category]
}
};
</script>
<style>
#container {
height: 350px;
}
</style>Note : To know more about the marker shape type refer the
shape.
Images
Use custom images as markers instead of predefined shapes by setting the
imageUrl property. This allows branded or thematic markers that enhance visual appeal and user engagement.
<template>
<div id="app">
<ejs-chart id="container" :title='title' :primaryXAxis='primaryXAxis'>
<e-series-collection>
<e-series :dataSource='seriesData' type='Line' xName='x' yName='y' name='December 2007'
:marker='marker'> </e-series>
</e-series-collection>
</ejs-chart>
</div>
</template>
<script setup>
import { provide } from "vue";
import { ChartComponent as EjsChart, LineSeries, Category, SeriesCollectionDirective as ESeriesCollection,
SeriesDirective as ESeries
} from "@syncfusion/ej2-vue-charts";
const seriesData = [
{ x: 'WW', y: 12, y1: 22, y2: 38.3, y3: 50 },
{ x: 'EU', y: 9.9, y1: 26, y2: 45.2, y3: 63.6 },
{ x: 'APAC', y: 4.4, y1: 9.3, y2: 18.2, y3: 20.9 },
{ x: 'LATAM', y: 6.4, y1: 28, y2: 46.7, y3: 65.1 },
{ x: 'MEA', y: 30, y1: 45.7, y2: 61.5, y3: 73 },
{ x: 'NA', y: 25.3, y1: 35.9, y2: 64, y3: 81.4 }
];
const primaryXAxis = {
valueType: 'Category', interval: 1
};
const marker = {
visible: true, width: 10, height: 10, shape: 'Image',
imageUrl:'./sun_annotation.png'
};
const title = "FB Penetration of Internet Audience";
provide('chart', [LineSeries, Category]);
</script>
<style>
#container {
height: 350px;
}
</style><template>
<div id="app">
<ejs-chart id="container" :title='title' :primaryXAxis='primaryXAxis'>
<e-series-collection>
<e-series :dataSource='seriesData' type='Line' xName='x' yName='y' name='December 2007'
:marker='marker'> </e-series>
</e-series-collection>
</ejs-chart>
</div>
</template>
<script>
import { ChartComponent, LineSeries, Category, SeriesCollectionDirective, SeriesDirective } from "@syncfusion/ej2-vue-charts";
export default {
name: "App",
components: {
"ejs-chart":ChartComponent,
"e-series-collection":SeriesCollectionDirective,
"e-series":SeriesDirective,
},
data() {
return {
seriesData: [
{ x: 'WW', y: 12, y1: 22, y2: 38.3, y3: 50 },
{ x: 'EU', y: 9.9, y1: 26, y2: 45.2, y3: 63.6 },
{ x: 'APAC', y: 4.4, y1: 9.3, y2: 18.2, y3: 20.9 },
{ x: 'LATAM', y: 6.4, y1: 28, y2: 46.7, y3: 65.1 },
{ x: 'MEA', y: 30, y1: 45.7, y2: 61.5, y3: 73 },
{ x: 'NA', y: 25.3, y1: 35.9, y2: 64, y3: 81.4 }
],
primaryXAxis: {
valueType: 'Category', interval: 1
},
marker: {
visible: true,
width: 10, height: 10, shape: 'Image',
imageUrl:'./sun_annotation.png'
},
title: "FB Penetration of Internet Audience"
};
},
provide: {
chart: [LineSeries, Category]
}
};
</script>
<style>
#container {
height: 350px;
}
</style>Customization
Customize marker appearance by modifying the fill (background color) and border properties. Combined with shape and image options, these customizations enable comprehensive marker styling to match your application design.
<template>
<div id="app">
<ejs-chart id="container" :title='title' :primaryXAxis='primaryXAxis'>
<e-series-collection>
<e-series :dataSource='seriesData' type='Line' xName='x' yName='y' name='December 2007'
:marker='marker'> </e-series>
</e-series-collection>
</ejs-chart>
</div>
</template>
<script setup>
import { provide } from "vue";
import { ChartComponent as EjsChart, LineSeries, Category, SeriesCollectionDirective as ESeriesCollection,
SeriesDirective as ESeries
} from "@syncfusion/ej2-vue-charts";
const seriesData = [
{ x: 'WW', y: 12, y1: 22, y2: 38.3, y3: 50 },
{ x: 'EU', y: 9.9, y1: 26, y2: 45.2, y3: 63.6 },
{ x: 'APAC', y: 4.4, y1: 9.3, y2: 18.2, y3: 20.9 },
{ x: 'LATAM', y: 6.4, y1: 28, y2: 46.7, y3: 65.1 },
{ x: 'MEA', y: 30, y1: 45.7, y2: 61.5, y3: 73 },
{ x: 'NA', y: 25.3, y1: 35.9, y2: 64, y3: 81.4 }
];
const primaryXAxis = {
valueType: 'Category', interval: 1
};
const marker = {
visible: true, fill: 'Red', height: 10, width: 10,
border:{width: 2, color: 'blue'}
};
const title = "FB Penetration of Internet Audience";
provide('chart', [LineSeries, Category]);
</script>
<style>
#container {
height: 350px;
}
</style><template>
<div id="app">
<ejs-chart id="container" :title='title' :primaryXAxis='primaryXAxis'>
<e-series-collection>
<e-series :dataSource='seriesData' type='Line' xName='x' yName='y' name='December 2007'
:marker='marker'> </e-series>
</e-series-collection>
</ejs-chart>
</div>
</template>
<script>
import { ChartComponent, LineSeries, Category, SeriesCollectionDirective, SeriesDirective } from "@syncfusion/ej2-vue-charts";
export default {
name: "App",
components: {
"ejs-chart":ChartComponent,
"e-series-collection":SeriesCollectionDirective,
"e-series":SeriesDirective,
},
data() {
return {
seriesData: [
{ x: 'WW', y: 12, y1: 22, y2: 38.3, y3: 50 },
{ x: 'EU', y: 9.9, y1: 26, y2: 45.2, y3: 63.6 },
{ x: 'APAC', y: 4.4, y1: 9.3, y2: 18.2, y3: 20.9 },
{ x: 'LATAM', y: 6.4, y1: 28, y2: 46.7, y3: 65.1 },
{ x: 'MEA', y: 30, y1: 45.7, y2: 61.5, y3: 73 },
{ x: 'NA', y: 25.3, y1: 35.9, y2: 64, y3: 81.4 }
],
primaryXAxis: {
valueType: 'Category', interval: 1
},
marker: { visible: true, fill: 'Red', height: 10, width: 10,
border:{width: 2, color: 'blue'} },
title: "FB Penetration of Internet Audience"
};
},
provide: {
chart: [LineSeries, Category]
}
};
</script>
<style>
#container {
height: 350px;
}
</style>Customizing specific point
Use the pointRender event to customize markers for individual data points. This event allows you to conditionally change shape, color, and border properties based on data values or other criteria.
<template>
<div id="app">
<ejs-chart id="container" :title='title' :primaryXAxis='primaryXAxis' :pointRender='pointRender'>
<e-series-collection>
<e-series :dataSource='seriesData' type='Line' xName='x' yName='y' name='December 2007'
:marker='marker'> </e-series>
</e-series-collection>
</ejs-chart>
</div>
</template>
<script setup>
import { provide } from "vue";
import { ChartComponent as EjsChart, LineSeries, Category,
SeriesCollectionDirective as ESeriesCollection, SeriesDirective as ESeries
} from "@syncfusion/ej2-vue-charts";
const seriesData = [
{ x: 'WW', y: 12, y1: 22, y2: 38.3, y3: 50 },
{ x: 'EU', y: 9.9, y1: 26, y2: 45.2, y3: 63.6 },
{ x: 'APAC', y: 4.4, y1: 9.3, y2: 18.2, y3: 20.9 },
{ x: 'LATAM', y: 6.4, y1: 28, y2: 46.7, y3: 65.1 },
{ x: 'MEA', y: 30, y1: 45.7, y2: 61.5, y3: 73 },
{ x: 'NA', y: 25.3, y1: 35.9, y2: 64, y3: 81.4 }
];
const primaryXAxis = {
valueType: 'Category', interval: 1
};
const marker = {
visible: true, height: 10, width: 10
};
const title = "FB Penetration of Internet Audience";
provide('chart', [LineSeries, Category]);
const pointRender = (args) => {
if(args.point.index === 3) {
args.fill = 'red';
}
};
</script>
<style>
#container {
height: 350px;
}
</style><template>
<div id="app">
<ejs-chart id="container" :title='title' :primaryXAxis='primaryXAxis' :pointRender='pointRender'>
<e-series-collection>
<e-series :dataSource='seriesData' type='Line' xName='x' yName='y' name='December 2007'
:marker='marker'> </e-series>
</e-series-collection>
</ejs-chart>
</div>
</template>
<script>
import { ChartComponent, LineSeries, Category, SeriesCollectionDirective, SeriesDirective } from "@syncfusion/ej2-vue-charts";
export default {
name: "App",
components: {
"ejs-chart":ChartComponent,
"e-series-collection":SeriesCollectionDirective,
"e-series":SeriesDirective,
},
data() {
return {
seriesData: [
{ x: 'WW', y: 12, y1: 22, y2: 38.3, y3: 50 },
{ x: 'EU', y: 9.9, y1: 26, y2: 45.2, y3: 63.6 },
{ x: 'APAC', y: 4.4, y1: 9.3, y2: 18.2, y3: 20.9 },
{ x: 'LATAM', y: 6.4, y1: 28, y2: 46.7, y3: 65.1 },
{ x: 'MEA', y: 30, y1: 45.7, y2: 61.5, y3: 73 },
{ x: 'NA', y: 25.3, y1: 35.9, y2: 64, y3: 81.4 }
],
primaryXAxis: {
valueType: 'Category', interval: 1
},
marker: { visible: true, height: 10, width: 10 },
title: "FB Penetration of Internet Audience"
};
},
provide: {
chart: [LineSeries, Category]
},
methods: {
pointRender: function(args) {
if(args.point.index === 3) {
args.fill = 'red'
}
}
}
};
</script>
<style>
#container {
height: 350px;
}
</style>Fill marker with series color
Fill markers with the series color by enabling the isFilled property. This creates a cohesive visual design where markers inherit the series color automatically.
<template>
<div id="app">
<ejs-chart id="container" :title='title' :primaryXAxis='primaryXAxis' :pointRender='pointRender'>
<e-series-collection>
<e-series :dataSource='seriesData' type='Line' xName='x' yName='y' name='December 2007'
:marker='marker'> </e-series>
</e-series-collection>
</ejs-chart>
</div>
</template>
<script setup>
import { provide } from "vue";
import { ChartComponent as EjsChart, LineSeries, Category,
SeriesCollectionDirective as ESeriesCollection, SeriesDirective as ESeries
} from "@syncfusion/ej2-vue-charts";
const seriesData = [
{ x: 'WW', y: 12, y1: 22, y2: 38.3, y3: 50 },
{ x: 'EU', y: 9.9, y1: 26, y2: 45.2, y3: 63.6 },
{ x: 'APAC', y: 4.4, y1: 9.3, y2: 18.2, y3: 20.9 },
{ x: 'LATAM', y: 6.4, y1: 28, y2: 46.7, y3: 65.1 },
{ x: 'MEA', y: 30, y1: 45.7, y2: 61.5, y3: 73 },
{ x: 'NA', y: 25.3, y1: 35.9, y2: 64, y3: 81.4 }
];
const primaryXAxis = {
valueType: 'Category', interval: 1
};
const marker = {
visible: true, height: 10, width: 10, isFilled: true
};
const title = "FB Penetration of Internet Audience";
provide('chart', [LineSeries, Category]);
</script>
<style>
#container {
height: 350px;
}
</style><template>
<div id="app">
<ejs-chart id="container" :title='title' :primaryXAxis='primaryXAxis' :pointRender='pointRender'>
<e-series-collection>
<e-series :dataSource='seriesData' type='Line' xName='x' yName='y' name='December 2007'
:marker='marker'> </e-series>
</e-series-collection>
</ejs-chart>
</div>
</template>
<script>
import { ChartComponent, LineSeries, Category, SeriesCollectionDirective, SeriesDirective } from "@syncfusion/ej2-vue-charts";
export default {
name: "App",
components: {
"ejs-chart":ChartComponent,
"e-series-collection":SeriesCollectionDirective,
"e-series":SeriesDirective,
},
data() {
return {
seriesData: [
{ x: 'WW', y: 12, y1: 22, y2: 38.3, y3: 50 },
{ x: 'EU', y: 9.9, y1: 26, y2: 45.2, y3: 63.6 },
{ x: 'APAC', y: 4.4, y1: 9.3, y2: 18.2, y3: 20.9 },
{ x: 'LATAM', y: 6.4, y1: 28, y2: 46.7, y3: 65.1 },
{ x: 'MEA', y: 30, y1: 45.7, y2: 61.5, y3: 73 },
{ x: 'NA', y: 25.3, y1: 35.9, y2: 64, y3: 81.4 }
],
primaryXAxis: {
valueType: 'Category', interval: 1
},
marker: { visible: true, height: 10, width: 10 , isFilled: true},
title: "FB Penetration of Internet Audience"
};
},
provide: {
chart: [LineSeries, Category]
},
};
</script>
<style>
#container {
height: 350px;
}
</style>