Error Bar Chart in Vue Charts
18 Nov 201824 minutes to read
Error Bar
Error bars are graphical representations of the variability of data and are used on graphs to indicate the error or uncertainty in a reported measurement.
To render error bars for the series in your chart, you need to follow a few steps to configure it correctly. Here’s a concise guide on how to do this:
-
Set visibility: Set the
visibleproperty to true for the error bars to be displayed. -
Inject the ErrorBar module: Use the
provide: { chart: [ErrorBar]}method to inject theErrorBarmodule into your chart. This step is essential, as it ensures that the necessary functionalities for rendering error bar series are available in your chart.
<template>
<div id="app">
<ejs-chart id="container" :title='title' :primaryXAxis='primaryXAxis' :primaryYAxis='primaryYAxis'>
<e-series-collection>
<e-series :dataSource='seriesData' type='Line' xName='x' yName='y' :marker='marker' :errorBar='errorBar' :animation='animation'> </e-series>
</e-series-collection>
</ejs-chart>
</div>
</template>
<script setup>
import { provide } from "vue";
import { ChartComponent as EjsChart, SeriesCollectionDirective as ESeriesCollection, SeriesDirective as ESeries, LineSeries, ErrorBar } from "@syncfusion/ej2-vue-charts";
const seriesData = [
{ x: 2006, y: 7.8 },
{ x: 2007, y: 7.2 },
{ x: 2008, y: 6.8 },
{ x: 2009, y: 10.7 },
{ x: 2010, y: 10.8 },
{ x: 2011, y: 9.8 }
];
const primaryXAxis = {
minimum: 2005,
maximum: 2012,
interval: 1,
title: 'Year'
};
const primaryYAxis = {
minimum: 3, maximum: 12,
interval: 1, title: 'Percentage',
labelFormat: '{value}%'
},
const errorBar = {
visible: true
};
const marker = {
visible: true
};
const animation = {
enable: false
};
const title = "Unemployment rate (%)";
provide('chart', [LineSeries, ErrorBar]);
</script>
<style>
#container {
height: 350px;
}
</style><template>
<div id="app">
<ejs-chart id="container" :title='title' :primaryXAxis='primaryXAxis' :primaryYAxis='primaryYAxis'>
<e-series-collection>
<e-series :dataSource='seriesData' type='Line' xName='x' yName='y' :marker='marker' :errorBar='errorBar' :animation='animation'> </e-series>
</e-series-collection>
</ejs-chart>
</div>
</template>
<script>
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, LineSeries, ErrorBar } from "@syncfusion/ej2-vue-charts";
export default {
name: "App",
components: {
'ejs-chart': ChartComponent,
'e-series-collection': SeriesCollectionDirective,
'e-series': SeriesDirective
},
data() {
return {
seriesData: [
{ x: 2006, y: 7.8 },
{ x: 2007, y: 7.2 },
{ x: 2008, y: 6.8 },
{ x: 2009, y: 10.7 },
{ x: 2010, y: 10.8 },
{ x: 2011, y: 9.8 }
],
primaryXAxis: {
minimum: 2005,
maximum: 2012,
interval: 1,
title: 'Year'
},
primaryYAxis: {
minimum: 3, maximum: 12,
interval: 1, title: 'Percentage',
labelFormat: '{value}%'
},
errorBar: {
visible: true
},
marker: {
visible: true
},
animation: {
enable: false
},
title: "Unemployment rate (%)"
};
},
provide: {
chart: [LineSeries, ErrorBar]
}
};
</script>
<style>
#container {
height: 350px;
}
</style>Customizing error bar
To customize the error bar type, set the error bar type to Custom, and then change the horizontal or vertical positive and negative error values for the error bar.
<template>
<div id="app">
<ejs-chart id="container" :title='title' :primaryXAxis='primaryXAxis' :primaryYAxis='primaryYAxis'>
<e-series-collection>
<e-series :dataSource='seriesData' type='Line' xName='x' yName='y' :marker='marker' :errorBar='errorBar' :animation='animation'> </e-series>
</e-series-collection>
</ejs-chart>
</div>
</template>
<script setup>
import { provide } from "vue";
import { ChartComponent as EjsChart, SeriesCollectionDirective as ESeriesCollection, SeriesDirective as ESeries, LineSeries, ErrorBar } from "@syncfusion/ej2-vue-charts";
const seriesData = [
{ x: 2006, y: 7.8 },
{ x: 2007, y: 7.2 },
{ x: 2008, y: 6.8 },
{ x: 2009, y: 5.7 },
{ x: 2010, y: 8.8 },
{ x: 2011, y: 9.8 }
];
const primaryXAxis = {
minimum: 2005,
maximum: 2012,
interval: 1,
title: 'Year'
};
const primaryYAxis = {
minimum: 3, maximum: 12,
interval: 1, title: 'Percentage',
labelFormat: '{value}%'
},
const errorBar = {
visible: true,
type: 'Custom',
mode: 'Both',
verticalPositiveError: 2,
horizontalPositiveError: 1,
verticalNegativeError: 2,
horizontalNegativeError: 1
};
const marker = {
visible: true
};
const animation = {
enable: false
};
const title = "Unemployment rate (%)";
provide('chart', [LineSeries, ErrorBar]);
</script>
<style>
#container {
height: 350px;
}
</style><template>
<div id="app">
<ejs-chart id="container" :title='title' :primaryXAxis='primaryXAxis' :primaryYAxis='primaryYAxis'>
<e-series-collection>
<e-series :dataSource='seriesData' type='Line' xName='x' yName='y' :marker='marker' :errorBar='errorBar' :animation='animation'> </e-series>
</e-series-collection>
</ejs-chart>
</div>
</template>
<script>
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, LineSeries, ErrorBar } from "@syncfusion/ej2-vue-charts";
export default {
name: "App",
components: {
'ejs-chart': ChartComponent,
'e-series-collection': SeriesCollectionDirective,
'e-series': SeriesDirective
},
data() {
return {
seriesData: [
{ x: 2006, y: 7.8 },
{ x: 2007, y: 7.2 },
{ x: 2008, y: 6.8 },
{ x: 2009, y: 5.7 },
{ x: 2010, y: 8.8 },
{ x: 2011, y: 9.8 }
],
primaryXAxis: {
minimum: 2005,
maximum: 2012,
interval: 1,
title: 'Year'
},
primaryYAxis: {
minimum: 3, maximum: 12,
interval: 1, title: 'Percentage',
labelFormat: '{value}%'
},
errorBar: {
visible: true,
type: 'Custom',
mode: 'Both',
verticalPositiveError: 2,
horizontalPositiveError: 1,
verticalNegativeError: 2,
horizontalNegativeError: 1
},
marker: {
visible: true
},
animation: {
enable: false
},
title: "Unemployment rate (%)"
};
},
provide: {
chart: [LineSeries, ErrorBar]
}
};
</script>
<style>
#container {
height: 350px;
}
</style>Error bar type
To change the error bar rendering type using type option of error bar. To change the error bar line length you can use verticalError property.
<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='India' width=2 :marker='marker'
:errorBar='errorBar'> </e-series>
</e-series-collection>
</ejs-chart>
</div>
</template>
<script setup>
import { provide } from "vue";
import { ChartComponent as EjsChart, SeriesCollectionDirective as ESeriesCollection, SeriesDirective as ESeries, LineSeries, Category, ErrorBar } from "@syncfusion/ej2-vue-charts";
const seriesData = [
{ x: 2006, y: 7.8 }, { x: 2007, y: 7.2 },
{ x: 2008, y: 6.8 }, { x: 2009, y: 10.7 },
{ x: 2010, y: 10.8 }, { x: 2011, y: 9.8 }
];
const primaryXAxis = {
minimum: 2005, maximum: 2012, interval: 1,
title: 'Year'
};
const errorBar = {
visible: true, type: 'Percentage', verticalError: 4
};
const marker = {
visible: true
};
const title = "Olympic Medals";
provide('chart', [LineSeries, Category, ErrorBar]);
</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='India' width=2 :marker='marker' :errorBar='errorBar'> </e-series>
</e-series-collection>
</ejs-chart>
</div>
</template>
<script>
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, LineSeries, Category, ErrorBar } from "@syncfusion/ej2-vue-charts";
export default {
name: "App",
components: {
'ejs-chart': ChartComponent,
'e-series-collection': SeriesCollectionDirective,
'e-series': SeriesDirective
},
data() {
return {
seriesData: [
{ x: 2006, y: 7.8 }, { x: 2007, y: 7.2 },
{ x: 2008, y: 6.8 }, { x: 2009, y: 10.7 },
{ x: 2010, y: 10.8 }, { x: 2011, y: 9.8 }
],
primaryXAxis: {
minimum: 2005, maximum: 2012, interval: 1,
title: 'Year'
},
errorBar: {
visible: true, type: 'Percentage', verticalError:4
},
marker: {
visible: true
},
title: "Olympic Medals"
};
},
provide: {
chart: [LineSeries, Category, ErrorBar]
}
};
</script>
<style>
#container {
height: 350px;
}
</style>Error bar mode
The error bar mode is used to define whether the error bar line is drawn horizontally, vertically or on both sides. To change the error bar mode, use the mode option.
<template>
<div id="app">
<ejs-chart id="container" :title='title' :primaryXAxis='primaryXAxis' :primaryYAxis='primaryYAxis'>
<e-series-collection>
<e-series :dataSource='seriesData' type='Line' xName='x' yName='y' :marker='marker' :errorBar='errorBar' :animation='animation'> </e-series>
</e-series-collection>
</ejs-chart>
</div>
</template>
<script setup>
import { provide } from "vue";
import { ChartComponent as EjsChart, SeriesCollectionDirective as ESeriesCollection, SeriesDirective as ESeries, LineSeries, ErrorBar } from "@syncfusion/ej2-vue-charts";
const seriesData = [
{ x: 2006, y: 7.8 },
{ x: 2007, y: 7.2 },
{ x: 2008, y: 6.8 },
{ x: 2009, y: 5.7 },
{ x: 2010, y: 8.8 },
{ x: 2011, y: 9.8 }
];
const primaryXAxis = {
minimum: 2005,
maximum: 2012,
interval: 1,
title: 'Year'
};
const primaryYAxis = {
minimum: 3, maximum: 12,
interval: 1, title: 'Percentage',
labelFormat: '{value}%'
},
const errorBar = {
visible: true,
mode: 'Horizontal'
};
const marker = {
visible: true
};
const animation = {
enable: false
};
const title = "Unemployment rate (%)";
provide('chart', [LineSeries, ErrorBar]);
</script>
<style>
#container {
height: 350px;
}
</style><template>
<div id="app">
<ejs-chart id="container" :title='title' :primaryXAxis='primaryXAxis' :primaryYAxis='primaryYAxis'>
<e-series-collection>
<e-series :dataSource='seriesData' type='Line' xName='x' yName='y' :marker='marker' :errorBar='errorBar' :animation='animation'> </e-series>
</e-series-collection>
</ejs-chart>
</div>
</template>
<script>
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, LineSeries, ErrorBar } from "@syncfusion/ej2-vue-charts";
export default {
name: "App",
components: {
'ejs-chart': ChartComponent,
'e-series-collection': SeriesCollectionDirective,
'e-series': SeriesDirective
},
data() {
return {
seriesData: [
{ x: 2006, y: 7.8 },
{ x: 2007, y: 7.2 },
{ x: 2008, y: 6.8 },
{ x: 2009, y: 5.7 },
{ x: 2010, y: 8.8 },
{ x: 2011, y: 9.8 }
],
primaryXAxis: {
minimum: 2005,
maximum: 2012,
interval: 1,
title: 'Year'
},
primaryYAxis: {
minimum: 3, maximum: 12,
interval: 1, title: 'Percentage',
labelFormat: '{value}%'
},
errorBar: {
visible: true,
mode: 'Horizontal'
},
marker: {
visible: true
},
animation: {
enable: false
},
title: "Unemployment rate (%)"
};
},
provide: {
chart: [LineSeries, ErrorBar]
}
};
</script>
<style>
#container {
height: 350px;
}
</style>Error bar direction
To change the direction of the error bars to plus, minus, or both sides, use the direction property.
<template>
<div id="app">
<ejs-chart id="container" :title='title' :primaryXAxis='primaryXAxis' :primaryYAxis='primaryYAxis'>
<e-series-collection>
<e-series :dataSource='seriesData' type='Line' xName='x' yName='y' :marker='marker' :errorBar='errorBar' :animation='animation'> </e-series>
</e-series-collection>
</ejs-chart>
</div>
</template>
<script setup>
import { provide } from "vue";
import { ChartComponent as EjsChart, SeriesCollectionDirective as ESeriesCollection, SeriesDirective as ESeries, LineSeries, ErrorBar } from "@syncfusion/ej2-vue-charts";
const seriesData = [
{ x: 2006, y: 7.8 },
{ x: 2007, y: 7.2 },
{ x: 2008, y: 6.8 },
{ x: 2009, y: 10.7 },
{ x: 2010, y: 10.8 },
{ x: 2011, y: 9.8 }
];
const primaryXAxis = {
minimum: 2005,
maximum: 2012,
interval: 1,
title: 'Year'
};
const primaryYAxis = {
minimum: 3, maximum: 12,
interval: 1, title: 'Percentage',
labelFormat: '{value}%'
},
const errorBar = {
visible: true,
mode: 'Vertical',
direction: 'Minus'
};
const marker = {
visible: true
};
const animation = {
enable: false
};
const title = "Unemployment rate (%)";
provide('chart', [LineSeries, ErrorBar]);
</script>
<style>
#container {
height: 350px;
}
</style><template>
<div id="app">
<ejs-chart id="container" :title='title' :primaryXAxis='primaryXAxis' :primaryYAxis='primaryYAxis'>
<e-series-collection>
<e-series :dataSource='seriesData' type='Line' xName='x' yName='y' :marker='marker' :errorBar='errorBar' :animation='animation'> </e-series>
</e-series-collection>
</ejs-chart>
</div>
</template>
<script>
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, LineSeries, ErrorBar } from "@syncfusion/ej2-vue-charts";
export default {
name: "App",
components: {
'ejs-chart': ChartComponent,
'e-series-collection': SeriesCollectionDirective,
'e-series': SeriesDirective
},
data() {
return {
seriesData: [
{ x: 2006, y: 7.8 },
{ x: 2007, y: 7.2 },
{ x: 2008, y: 6.8 },
{ x: 2009, y: 10.7 },
{ x: 2010, y: 10.8 },
{ x: 2011, y: 9.8 }
],
primaryXAxis: {
minimum: 2005,
maximum: 2012,
interval: 1,
title: 'Year'
},
primaryYAxis: {
minimum: 3, maximum: 12,
interval: 1, title: 'Percentage',
labelFormat: '{value}%'
},
errorBar: {
visible: true,
mode: 'Vertical',
direction: 'Minus'
},
marker: {
visible: true
},
animation: {
enable: false
},
title: "Unemployment rate (%)"
};
},
provide: {
chart: [LineSeries, ErrorBar]
}
};
</script>
<style>
#container {
height: 350px;
}
</style>Customizing error bar cap
To customize the length, width, opacity, and fill color of the error bar caps, you can use the errorBarCap property.
<template>
<div id="app">
<ejs-chart id="container" :title='title' :primaryXAxis='primaryXAxis' :primaryYAxis='primaryYAxis'>
<e-series-collection>
<e-series :dataSource='seriesData' type='Line' xName='x' yName='y' :marker='marker' :errorBar='errorBar' :animation='animation'> </e-series>
</e-series-collection>
</ejs-chart>
</div>
</template>
<script setup>
import { provide } from "vue";
import { ChartComponent as EjsChart, SeriesCollectionDirective as ESeriesCollection, SeriesDirective as ESeries, LineSeries, ErrorBar } from "@syncfusion/ej2-vue-charts";
const seriesData = [
{ x: 2006, y: 7.8 },
{ x: 2007, y: 7.2 },
{ x: 2008, y: 6.8 },
{ x: 2009, y: 10.7 },
{ x: 2010, y: 10.8 },
{ x: 2011, y: 9.8 }
];
const primaryXAxis = {
minimum: 2005,
maximum: 2012,
interval: 1,
title: 'Year'
};
const primaryYAxis = {
minimum: 3, maximum: 12,
interval: 1, title: 'Percentage',
labelFormat: '{value}%'
},
const errorBar = {
visible: true,
errorBarCap:{
length: 10,
width: 10,
color: '#0000ff'
}
};
const marker = {
visible: true
};
const animation = {
enable: false
};
const title = "Unemployment rate (%)";
provide('chart', [LineSeries, ErrorBar]);
</script>
<style>
#container {
height: 350px;
}
</style><template>
<div id="app">
<ejs-chart id="container" :title='title' :primaryXAxis='primaryXAxis' :primaryYAxis='primaryYAxis'>
<e-series-collection>
<e-series :dataSource='seriesData' type='Line' xName='x' yName='y' :marker='marker' :errorBar='errorBar' :animation='animation'> </e-series>
</e-series-collection>
</ejs-chart>
</div>
</template>
<script>
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, LineSeries, ErrorBar } from "@syncfusion/ej2-vue-charts";
export default {
name: "App",
components: {
'ejs-chart': ChartComponent,
'e-series-collection': SeriesCollectionDirective,
'e-series': SeriesDirective
},
data() {
return {
seriesData: [
{ x: 2006, y: 7.8 },
{ x: 2007, y: 7.2 },
{ x: 2008, y: 6.8 },
{ x: 2009, y: 10.7 },
{ x: 2010, y: 10.8 },
{ x: 2011, y: 9.8 }
],
primaryXAxis: {
minimum: 2005,
maximum: 2012,
interval: 1,
title: 'Year'
},
primaryYAxis: {
minimum: 3, maximum: 12,
interval: 1, title: 'Percentage',
labelFormat: '{value}%'
},
errorBar: {
visible: true,
errorBarCap:{
length: 10,
width: 10,
color: '#0000ff'
}
},
marker: {
visible: true
},
animation: {
enable: false
},
title: "Unemployment rate (%)"
};
},
provide: {
chart: [LineSeries, ErrorBar]
}
};
</script>
<style>
#container {
height: 350px;
}
</style>Customizing error bar color
To customise the error bar color for individual errors, use the errorBarColorMapping property. You can also customize the vertical error, horizontal error, horizontal negative and positive error, and vertical negative and positive error for an individual point using the verticalError, horizontalError, horizontalNegativeError, horizontalPositiveError, verticalNegativeError, and verticalPositiveError properties.
<template>
<div id="app">
<ejs-chart id="container" :title='title' :primaryXAxis='primaryXAxis' :primaryYAxis='primaryYAxis'>
<e-series-collection>
<e-series :dataSource='seriesData' type='Line' xName='x' yName='y' :marker='marker' :errorBar='errorBar' :animation='animation'> </e-series>
</e-series-collection>
</ejs-chart>
</div>
</template>
<script setup>
import { provide } from "vue";
import { ChartComponent as EjsChart, SeriesCollectionDirective as ESeriesCollection, SeriesDirective as ESeries, LineSeries, ErrorBar } from "@syncfusion/ej2-vue-charts";
const seriesData = [
{ x: 2006, y: 7.8, color: 'red', error: 4 },
{ x: 2007, y: 7.2, color: 'blue', error: 3 },
{ x: 2008, y: 6.8, color: 'green', error: 2 },
{ x: 2009, y: 10.7, color: 'orange', error: 1 },
{ x: 2010, y: 8.8, color: 'yellow', error: 3 },
{ x: 2011, y: 9.8, color: 'grey', error: 2 }
];
const primaryXAxis = {
minimum: 2005,
maximum: 2012,
interval: 1,
title: 'Year'
};
const primaryYAxis = {
minimum: 3, maximum: 12,
interval: 1, title: 'Percentage',
labelFormat: '{value}%'
},
const errorBar = {
visible: true,
errorBarColorMapping: 'color',
verticalError: 'error'
};
const marker = {
visible: true
};
const animation = {
enable: false
};
const title = "Unemployment rate (%)";
provide('chart', [LineSeries, ErrorBar]);
</script>
<style>
#container {
height: 350px;
}
</style><template>
<div id="app">
<ejs-chart id="container" :title='title' :primaryXAxis='primaryXAxis' :primaryYAxis='primaryYAxis'>
<e-series-collection>
<e-series :dataSource='seriesData' type='Line' xName='x' yName='y' :marker='marker' :errorBar='errorBar' :animation='animation'> </e-series>
</e-series-collection>
</ejs-chart>
</div>
</template>
<script>
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, LineSeries, ErrorBar } from "@syncfusion/ej2-vue-charts";
export default {
name: "App",
components: {
'ejs-chart': ChartComponent,
'e-series-collection': SeriesCollectionDirective,
'e-series': SeriesDirective
},
data() {
return {
seriesData: [
{ x: 2006, y: 7.8, color: 'red', error: 4 },
{ x: 2007, y: 7.2, color: 'blue', error: 3 },
{ x: 2008, y: 6.8, color: 'green', error: 2 },
{ x: 2009, y: 10.7, color: 'orange', error: 1 },
{ x: 2010, y: 8.8, color: 'yellow', error: 3 },
{ x: 2011, y: 9.8, color: 'grey', error: 2 }
],
primaryXAxis: {
minimum: 2005,
maximum: 2012,
interval: 1,
title: 'Year'
},
primaryYAxis: {
minimum: 3, maximum: 12,
interval: 1, title: 'Percentage',
labelFormat: '{value}%'
},
errorBar: {
visible: true,
errorBarColorMapping: 'color',
verticalError: 'error'
},
marker: {
visible: true
},
animation: {
enable: false
},
title: "Unemployment rate (%)"
};
},
provide: {
chart: [LineSeries, ErrorBar]
}
};
</script>
<style>
#container {
height: 350px;
}
</style>Events
Series render
The seriesRender event enables modification of series properties (for example, data, fill, or name) immediately before rendering. Use this event to adjust series appearance or to dynamically swap data sources.
<template>
<div id="app">
<ejs-chart id="container" :title='title' :primaryXAxis='primaryXAxis' :primaryYAxis='primaryYAxis' :seriesRender='seriesRender'>
<e-series-collection>
<e-series :dataSource='seriesData' type='Line' width=2 xName='x' yName='y' :marker='marker' :errorBar='errorBar' :animation='animation'> </e-series>
</e-series-collection>
</ejs-chart>
</div>
</template>
<script setup>
import { provide } from "vue";
import { ChartComponent as EjsChart, SeriesCollectionDirective as ESeriesCollection, SeriesDirective as ESeries, LineSeries, ErrorBar } from "@syncfusion/ej2-vue-charts";
const seriesData = [
{ x: 2006, y: 7.8 },
{ x: 2007, y: 7.2 },
{ x: 2008, y: 6.8 },
{ x: 2009, y: 10.7 },
{ x: 2010, y: 10.8 },
{ x: 2011, y: 9.8 }
];
const primaryXAxis = {
minimum: 2005,
maximum: 2012,
interval: 1,
title: 'Year'
};
const primaryYAxis = {
minimum: 3, maximum: 12,
interval: 1, title: 'Percentage',
labelFormat: '{value}%'
},
const errorBar = {
visible: true
};
const marker = {
visible: true
};
const animation = {
enable: false
};
const title = "Unemployment rate (%)";
provide('chart', [LineSeries, ErrorBar]);
const seriesRender = function (args) {
args.fill = '#ff6347';
};
</script>
<style>
#container {
height: 350px;
}
</style><template>
<div id="app">
<ejs-chart id="container" :title='title' :primaryXAxis='primaryXAxis' :primaryYAxis='primaryYAxis' :seriesRender='seriesRender'>
<e-series-collection>
<e-series :dataSource='seriesData' type='Line' width=2 xName='x' yName='y' :marker='marker' :errorBar='errorBar' :animation='animation'> </e-series>
</e-series-collection>
</ejs-chart>
</div>
</template>
<script>
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, LineSeries, ErrorBar } from "@syncfusion/ej2-vue-charts";
export default {
name: "App",
components: {
'ejs-chart': ChartComponent,
'e-series-collection': SeriesCollectionDirective,
'e-series': SeriesDirective
},
data() {
return {
seriesData: [
{ x: 2006, y: 7.8 },
{ x: 2007, y: 7.2 },
{ x: 2008, y: 6.8 },
{ x: 2009, y: 10.7 },
{ x: 2010, y: 10.8 },
{ x: 2011, y: 9.8 }
],
primaryXAxis: {
minimum: 2005,
maximum: 2012,
interval: 1,
title: 'Year'
},
primaryYAxis: {
minimum: 3, maximum: 12,
interval: 1, title: 'Percentage',
labelFormat: '{value}%'
},
errorBar: {
visible: true
},
marker: {
visible: true
},
animation: {
enable: false
},
title: "Unemployment rate (%)"
};
},
provide: {
chart: [LineSeries, ErrorBar]
},
methods: {
seriesRender: function (args) {
args.fill = '#ff6347';
}
}
};
</script>
<style>
#container {
height: 350px;
}
</style>Point render
The pointRender event provides a hook to customize each data point (for example, marker shape, border, or fill) before it is drawn. Use this to apply per-point styling rules or conditional formatting.
<template>
<div id="app">
<ejs-chart id="container" :title='title' :primaryXAxis='primaryXAxis' :primaryYAxis='primaryYAxis' :pointRender='pointRender'>
<e-series-collection>
<e-series :dataSource='seriesData' type='Line' width=2 xName='x' yName='y' :marker='marker' :errorBar='errorBar' :animation='animation'> </e-series>
</e-series-collection>
</ejs-chart>
</div>
</template>
<script setup>
import { provide } from "vue";
import { ChartComponent as EjsChart, SeriesCollectionDirective as ESeriesCollection, SeriesDirective as ESeries, LineSeries, ErrorBar } from "@syncfusion/ej2-vue-charts";
const seriesData = [
{ x: 2006, y: 7.8 },
{ x: 2007, y: 7.2 },
{ x: 2008, y: 6.8 },
{ x: 2009, y: 10.7 },
{ x: 2010, y: 10.8 },
{ x: 2011, y: 9.8 }
];
const primaryXAxis = {
minimum: 2005,
maximum: 2012,
interval: 1,
title: 'Year'
};
const primaryYAxis = {
minimum: 3, maximum: 12,
interval: 1, title: 'Percentage',
labelFormat: '{value}%'
},
const errorBar = {
visible: true
};
const marker = {
visible: true
};
const animation = {
enable: false
};
const title = "Unemployment rate (%)";
provide('chart', [LineSeries, ErrorBar]);
const pointRender = function (args) {
if (args.point.index % 2 !== 0) {
args.fill = '#ff6347';
}
else {
args.fill = '#009cb8';
}
};
</script>
<style>
#container {
height: 350px;
}
</style><template>
<div id="app">
<ejs-chart id="container" :title='title' :primaryXAxis='primaryXAxis' :primaryYAxis='primaryYAxis' :pointRender='pointRender'>
<e-series-collection>
<e-series :dataSource='seriesData' type='Line' width=2 xName='x' yName='y' :marker='marker' :errorBar='errorBar' :animation='animation'> </e-series>
</e-series-collection>
</ejs-chart>
</div>
</template>
<script>
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, LineSeries, ErrorBar } from "@syncfusion/ej2-vue-charts";
export default {
name: "App",
components: {
'ejs-chart': ChartComponent,
'e-series-collection': SeriesCollectionDirective,
'e-series': SeriesDirective
},
data() {
return {
seriesData: [
{ x: 2006, y: 7.8 },
{ x: 2007, y: 7.2 },
{ x: 2008, y: 6.8 },
{ x: 2009, y: 10.7 },
{ x: 2010, y: 10.8 },
{ x: 2011, y: 9.8 }
],
primaryXAxis: {
minimum: 2005,
maximum: 2012,
interval: 1,
title: 'Year'
},
primaryYAxis: {
minimum: 3, maximum: 12,
interval: 1, title: 'Percentage',
labelFormat: '{value}%'
},
errorBar: {
visible: true
},
marker: {
visible: true
},
animation: {
enable: false
},
title: "Unemployment rate (%)"
};
},
provide: {
chart: [LineSeries, ErrorBar]
},
methods: {
pointRender: function (args) {
if (args.point.index % 2 !== 0) {
args.fill = '#ff6347';
}
else {
args.fill = '#009cb8';
}
}
}
};
</script>
<style>
#container {
height: 350px;
}
</style>