Blazor Ebook
A quick guide to getting started with learning and improving your skills using Blazor technology.
Annotations are used to mark the specific area of interest in the chart area with texts, shapes or images.
You can add annotations to the chart by using the annotations option. By using the
content option of annotation object, you can specify
the id of the element that needs to be displayed in the chart area.
<template>
<div id="app">
<ejs-chart id="container" :title='title' :primaryXAxis='primaryXAxis' :primaryYAxis='primaryYAxis' :annotations='annotations'>
<e-series-collection>
<e-series :dataSource='seriesData' type='Column' xName='country' yName='gold' name='Gold'> </e-series>
</e-series-collection>
</ejs-chart>
</div>
</template>
<script>
import Vue from "vue";
import { ChartPlugin, ColumnSeries, Category, ChartAnnotation } from "@syncfusion/ej2-vue-charts";
Vue.use(ChartPlugin);
export default {
data() {
return {
seriesData: [
{ country: "USA", gold: 50 },
{ country: "China", gold: 40 },
{ country: "Japan", gold: 70 },
{ country: "Australia", gold: 60 },
{ country: "France", gold: 50 },
{ country: "Germany", gold: 40 },
{ country: "Italy", gold: 40 },
{ country: "Sweden", gold: 30 }
],
annotations:[{
content: '70 Gold Medals',
coordinateUnits: 'Point',
x: 'France',
y: 50
}],
primaryXAxis: {
valueType: 'Category',
title: 'Countries'
},
primaryYAxis:
{
minimum: 0, maximum: 80,
interval: 20, title: 'Medals'
},
title: "Olympic Medals"
};
},
provide: {
chart: [ColumnSeries, Category, ChartAnnotation]
},
};
</script>
<style>
#container {
height: 350px;
}
</style>Note: To use annotation feature in chart, we need to inject ChartAnnotation into the provide.
Annotations can be placed either with respect to Series or Chart. by default, it will placed with respect
to Chart.
<template>
<div id="app">
<ejs-chart id="container" :title='title' :primaryXAxis='primaryXAxis' :primaryYAxis='primaryYAxis' :annotations='annotations'>
<e-series-collection>
<e-series :dataSource='seriesData' type='Column' xName='country' yName='gold' name='Gold'> </e-series>
</e-series-collection>
</ejs-chart>
</div>
</template>
<script>
import Vue from "vue";
import { ChartPlugin, ColumnSeries, Category, ChartAnnotation } from "@syncfusion/ej2-vue-charts";
let contentVue = Vue.component("contentTemplate", {
template: '<div>Highest Medal Count</div>',
data() {
return {
data: {}
};
}
});
let contentTemplate = function() {
return { template: contentVue };
};
Vue.use(ChartPlugin);
export default {
data() {
return {
seriesData: [
{ country: "USA", gold: 50 },
{ country: "China", gold: 40 },
{ country: "Japan", gold: 70 },
{ country: "Australia", gold: 60 },
{ country: "France", gold: 50 },
{ country: "Germany", gold: 40 },
{ country: "Italy", gold: 40 },
{ country: "Sweden", gold: 30 }
],
annotations:[{
content: contentTemplate,
region: 'Series',
coordinateUnits: 'Point',
x: 'France',
y: 50
}],
primaryXAxis: {
valueType: 'Category',
title: 'Countries'
},
primaryYAxis:
{
minimum: 0, maximum: 80,
interval: 20, title: 'Medals'
},
title: "Olympic Medals"
};
},
provide: {
chart: [ColumnSeries, Category, ChartAnnotation]
},
};
</script>
<style>
#container {
height: 350px;
}
</style>Specified the coordinates units of the annotation either Pixel or Point.
<template>
<div id="app">
<ejs-chart id="container" :title='title' :primaryXAxis='primaryXAxis' :primaryYAxis='primaryYAxis' :annotations='annotations'>
<e-series-collection>
<e-series :dataSource='seriesData' type='Column' xName='country' yName='gold' name='Gold'> </e-series>
</e-series-collection>
</ejs-chart>
</div>
</template>
<script>
import Vue from "vue";
import { ChartPlugin, ColumnSeries, Category, ChartAnnotation } from "@syncfusion/ej2-vue-charts";
let contentVue = Vue.component("contentTemplate", {
template: '<div style="border: 1px solid black; padding: 5px 5px 5px 5px, backgrund:#f5f5f5">Annotation in Pixel</div>',
data() {
return {
data: {}
};
}
});
let contentTemplate = function() {
return { template: contentVue };
};
Vue.use(ChartPlugin);
export default {
data() {
return {
seriesData: [
{ country: "USA", gold: 50 },
{ country: "China", gold: 40 },
{ country: "Japan", gold: 70 },
{ country: "Australia", gold: 60 },
{ country: "France", gold: 50 },
{ country: "Germany", gold: 40 },
{ country: "Italy", gold: 40 },
{ country: "Sweden", gold: 30 }
],
annotations:[{
content: contentTemplate,
coordinateUnits: 'Pixel',
x: 150,
y: 50
}],
primaryXAxis: {
valueType: 'Category',
title: 'Countries'
},
primaryYAxis:
{
minimum: 0, maximum: 80,
interval: 20, title: 'Medals'
},
title: "Olympic Medals"
};
},
provide: {
chart: [ColumnSeries, Category, ChartAnnotation]
},
};
</script>
<style>
#container {
height: 350px;
}
</style>Annotation provides verticalAlignment and horizontalAlignment. The verticalAlignment can be customized
via Top, Bottom or Middle and the horizontalAlignment can be customized via Near, Far or Center.
<template>
<div id="app">
<ejs-chart id="container" :title='title' :primaryXAxis='primaryXAxis' :primaryYAxis='primaryYAxis' :annotations='annotations'>
<e-series-collection>
<e-series :dataSource='seriesData' type='Column' xName='country' yName='gold' name='Gold'> </e-series>
</e-series-collection>
</ejs-chart>
</div>
</template>
<script>
import Vue from "vue";
import { ChartPlugin, ColumnSeries, Category, ChartAnnotation } from "@syncfusion/ej2-vue-charts";
let contentVue = Vue.component("contentTemplate", {
template: '<div style="border: 1px solid black; padidng: 5px 5px 5px 5px, backgrund:#f5f5f5">Highest Medal Count</div>',
data() {
return {
data: {}
};
}
});
let contentTemplate = function() {
return { template: contentVue };
};
Vue.use(ChartPlugin);
export default {
data() {
return {
seriesData: [
{ country: "USA", gold: 50 },
{ country: "China", gold: 40 },
{ country: "Japan", gold: 70 },
{ country: "Australia", gold: 60 },
{ country: "France", gold: 50 },
{ country: "Germany", gold: 40 },
{ country: "Italy", gold: 40 },
{ country: "Sweden", gold: 30 }
],
annotations:[{
content: contentTemplate,
x: 'France',
y: 50,
verticalAlignment:'Top',
horizontalAlignment:'Near'
}],
primaryXAxis: {
valueType: 'Category',
title: 'Countries'
},
primaryYAxis:
{
minimum: 0, maximum: 80,
interval: 20, title: 'Medals'
},
title: "Olympic Medals"
};
},
provide: {
chart: [ColumnSeries, Category, ChartAnnotation]
},
};
</script>
<style>
#container {
height: 350px;
}
</style>By setting text div in the content option of annotation object you can add sub title to chart y-axis. Specified the
coordinate value as pixel and customize x and y location of the text.
<template>
<div id="app">
<ejs-chart id="container" :title='title' :primaryXAxis='primaryXAxis' :primaryYAxis='primaryYAxis' :annotations='annotations'>
<e-series-collection>
<e-series :dataSource='seriesData' type='Column' xName='country' yName='gold' name='Gold'> </e-series>
</e-series-collection>
</ejs-chart>
</div>
</template>
<script>
import Vue from "vue";
import { ChartPlugin, ColumnSeries, Category, ChartAnnotation } from "@syncfusion/ej2-vue-charts";
let contentVue = Vue.component("contentTemplate", {
template: '<div id="text" style="transform: rotate(-90deg);">Speed Rate</div>',
data() {
return {
data: {}
};
}
});
let contentTemplate = function() {
return { template: contentVue };
};
Vue.use(ChartPlugin);
export default {
data() {
return {
seriesData: [
{ country: "USA", gold: 50 },
{ country: "China", gold: 40 },
{ country: "Japan", gold: 70 },
{ country: "Australia", gold: 60 },
{ country: "France", gold: 50 },
{ country: "Germany", gold: 40 },
{ country: "Italy", gold: 40 },
{ country: "Sweden", gold: 30 }
],
annotations:[{
content: contentTemplate,
coordinateUnits: 'Pixel',
x: 13,
y: 180,
region: 'Chart'
}],
primaryXAxis: {
valueType: 'Category',
title: 'Countries'
},
primaryYAxis:
{
minimum: 0, maximum: 80,
interval: 20, title: '(m2/min)'
},
title: "Olympic Medals"
};
},
provide: {
chart: [ColumnSeries, Category, ChartAnnotation]
},
};
</script>
<style>
#container {
height: 350px;
}
</style>