Working with data in Vue Chart component
21 Jun 202424 minutes to read
Chart can visualize data bound from local or remote data.
Local data
You can bind a simple JSON data to the chart using dataSource
property in series. Now map the fields in JSON to xName
and yName
properties.
<template>
<div id="app">
<ejs-chart id="container" :title='title' :primaryXAxis='primaryXAxis'>
<e-series-collection>
<e-series :dataSource='seriesData' type='Column' xName='month' yName='sales' name='Sales'> </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, ColumnSeries, Category } from "@syncfusion/ej2-vue-charts";
const seriesData = [
{ month: 'Jan', sales: 35 }, { month: 'Feb', sales: 28 },
{ month: 'Mar', sales: 34 }, { month: 'Apr', sales: 32 },
{ month: 'May', sales: 40 }, { month: 'Jun', sales: 32 },
{ month: 'Jul', sales: 35 }, { month: 'Aug', sales: 55 },
{ month: 'Sep', sales: 38 }, { month: 'Oct', sales: 30 },
{ month: 'Nov', sales: 25 }, { month: 'Dec', sales: 32 }
];
const primaryXAxis = {
valueType: 'Category'
};
const title = "Olympic Medals";
provide('chart', [ColumnSeries, 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='Column' xName='month' yName='sales' name='Sales'> </e-series>
</e-series-collection>
</ejs-chart>
</div>
</template>
<script>
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, ColumnSeries, Category } from "@syncfusion/ej2-vue-charts";
export default {
name: "App",
components: {
'ejs-chart': ChartComponent,
'e-series-collection': SeriesCollectionDirective,
'e-series': SeriesDirective
},
data() {
return {
seriesData: [
{ month: 'Jan', sales: 35 }, { month: 'Feb', sales: 28 },
{ month: 'Mar', sales: 34 }, { month: 'Apr', sales: 32 },
{ month: 'May', sales: 40 }, { month: 'Jun', sales: 32 },
{ month: 'Jul', sales: 35 }, { month: 'Aug', sales: 55 },
{ month: 'Sep', sales: 38 }, { month: 'Oct', sales: 30 },
{ month: 'Nov', sales: 25 }, { month: 'Dec', sales: 32 }
],
primaryXAxis: {
valueType: 'Category'
},
title: "Olympic Medals"
};
},
provide: {
chart: [ColumnSeries, Category]
}
};
</script>
<style>
#container {
height: 350px;
}
</style>
Common datasource
You can also bind a JSON data common to all series using dataSource
property in chart.
<template>
<div id="app">
<ejs-chart id="container" :title='title' :primaryXAxis='primaryXAxis' :dataSource='seriesData'>
<e-series-collection>
<e-series type='Column' xName='month' yName='sales'> </e-series>
<e-series type='Column' xName='month' yName='sales1'> </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, ColumnSeries, Category } from "@syncfusion/ej2-vue-charts";
const seriesData = [
{ month: 'Jan', sales: 35, sales1: 28 }, { month: 'Feb', sales: 28, sales1: 35 },
{ month: 'Mar', sales: 34, sales1: 32 }, { month: 'Apr', sales: 32, sales1: 34 },
{ month: 'May', sales: 40, sales1: 32 }, { month: 'Jun', sales: 32, sales1: 40 },
{ month: 'Jul', sales: 35, sales1: 55 }, { month: 'Aug', sales: 55, sales1: 35 },
{ month: 'Sep', sales: 38, sales1: 30 }, { month: 'Oct', sales: 30, sales1: 38 },
{ month: 'Nov', sales: 25, sales1: 32 }, { month: 'Dec', sales: 32, sales1: 25 }
];
const primaryXAxis = {
valueType: 'Category'
};
const title = "Olympic Medals";
provide('chart', [ColumnSeries, Category]);
</script>
<style>
#container {
height: 350px;
}
</style>
<template>
<div id="app">
<ejs-chart id="container" :title='title' :primaryXAxis='primaryXAxis' :dataSource='seriesData'>
<e-series-collection>
<e-series type='Column' xName='month' yName='sales'> </e-series>
<e-series type='Column' xName='month' yName='sales1'> </e-series>
</e-series-collection>
</ejs-chart>
</div>
</template>
<script>
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, ColumnSeries, Category } from "@syncfusion/ej2-vue-charts";
export default {
name: "App",
components: {
'ejs-chart': ChartComponent,
'e-series-collection': SeriesCollectionDirective,
'e-series': SeriesDirective
},
data() {
return {
seriesData: [
{ month: 'Jan', sales: 35, sales1: 28 }, { month: 'Feb', sales: 28, sales1: 35 },
{ month: 'Mar', sales: 34, sales1: 32 }, { month: 'Apr', sales: 32, sales1: 34 },
{ month: 'May', sales: 40, sales1: 32 }, { month: 'Jun', sales: 32, sales1: 40 },
{ month: 'Jul', sales: 35, sales1: 55 }, { month: 'Aug', sales: 55, sales1: 35 },
{ month: 'Sep', sales: 38, sales1: 30 }, { month: 'Oct', sales: 30, sales1: 38 },
{ month: 'Nov', sales: 25, sales1: 32 }, { month: 'Dec', sales: 32, sales1: 25 }
],
primaryXAxis: {
valueType: 'Category'
},
title: "Olympic Medals"
};
},
provide: {
chart: [ColumnSeries, Category]
}
};
</script>
<style>
#container {
height: 350px;
}
</style>
Remote data
You can also bind remote data to the chart using DataManager
. The DataManager requires minimal information
like web service URL, adaptor and crossDomain to interact with service endpoint properly. Assign the instance
of DataManager to the dataSource
property in series and map the fields of data to xName
and yName
properties. You can also use the query
property of the series to filter the data.
<template>
<div id="app">
<ejs-chart id="container" :primaryXAxis='primaryXAxis' :primaryYAxis='primaryYAxis' :title='title'>
<e-series-collection>
<e-series :dataSource='seriesData' type='Column' xName='CustomerID' yName='Freight' :query='queries'>
</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, ColumnSeries, Category } from "@syncfusion/ej2-vue-charts";
import { DataManager, Query } from '@syncfusion/ej2-data';
let dataManager = new DataManager({
url: 'https://services.syncfusion.com/vue/production/api/orders'
});
let query = new Query().take(5).where('Estimate', 'lessThan', 3, false);
const seriesData = dataManager;
const queries = query;
const primaryXAxis = {
valueType: 'Category',
};
const primaryYAxis = {
title: 'Freight rate in U.S. dollars'
};
const title = 'Container freight rate';
provide('chart', [ColumnSeries, Category]);
</script>
<style>
#container {
height: 350px;
}
</style>
<template>
<div id="app">
<ejs-chart id="container" :primaryXAxis='primaryXAxis' :primaryYAxis='primaryYAxis' :title='title'>
<e-series-collection>
<e-series :dataSource='seriesData' type='Column' xName='CustomerID' yName='Freight' :query='queries'>
</e-series>
</e-series-collection>
</ejs-chart>
</div>
</template>
<script>
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, ColumnSeries, Category } from "@syncfusion/ej2-vue-charts";
import { DataManager, Query } from '@syncfusion/ej2-data';
let dataManager = new DataManager({
url: 'https://services.syncfusion.com/vue/production/api/orders'
});
let query = new Query().take(5).where('Estimate', 'lessThan', 3, false);
export default {
name: "App",
components: {
'ejs-chart': ChartComponent,
'e-series-collection': SeriesCollectionDirective,
'e-series': SeriesDirective
},
data() {
return {
seriesData: dataManager,
queries: query,
primaryXAxis: {
valueType: 'Category',
},
primaryYAxis: {
title: 'Freight rate in U.S. dollars'
},
title: 'Container freight rate'
};
},
provide: {
chart: [ColumnSeries, Category]
}
};
</script>
<style>
#container {
height: 350px;
}
</style>
Binding data using ODataAdaptor
OData
is a standardized protocol for creating and consuming data. You can retrieve data from an OData service using the DataManager. Refer to the following code example for remote data binding using an OData service.
<template>
<div id="app">
<ejs-chart id="container" :primaryXAxis='primaryXAxis' :title='title'>
<e-series-collection>
<e-series :dataSource='seriesData' type='Column' xName='CustomerID' yName='Freight' :query='queries'>
</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, ColumnSeries, Category } from "@syncfusion/ej2-vue-charts";
import { DataManager, Query, ODataAdaptor } from '@syncfusion/ej2-data';
let dataManager = new DataManager({
url: 'https://services.odata.org/V3/Northwind/Northwind.svc/Orders/',
adaptor: new ODataAdaptor(),
crossDomain: true
});
let query = new Query();
const seriesData = dataManager;
const queries = query;
const primaryXAxis = {
valueType: 'Category'
};
const title = 'Order Details';
provide('chart', [ColumnSeries, Category]);
</script>
<style>
#container {
height: 350px;
}
</style>
<template>
<div id="app">
<ejs-chart id="container" :primaryXAxis='primaryXAxis' :title='title'>
<e-series-collection>
<e-series :dataSource='seriesData' type='Column' xName='CustomerID' yName='Freight' :query='queries'>
</e-series>
</e-series-collection>
</ejs-chart>
</div>
</template>
<script>
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, ColumnSeries, Category } from "@syncfusion/ej2-vue-charts";
import { DataManager, Query, ODataAdaptor } from '@syncfusion/ej2-data';
let dataManager = new DataManager({
url: 'https://services.odata.org/V3/Northwind/Northwind.svc/Orders/',
adaptor: new ODataAdaptor(),
crossDomain: true
});
let query = new Query();
export default {
name: "App",
components: {
'ejs-chart': ChartComponent,
'e-series-collection': SeriesCollectionDirective,
'e-series': SeriesDirective
},
data() {
return {
seriesData: dataManager,
queries: query,
primaryXAxis: {
valueType: 'Category'
},
title: 'Order Details'
};
},
provide: {
chart: [ColumnSeries, Category]
}
};
</script>
<style>
#container {
height: 350px;
}
</style>
Binding data using ODataV4Adaptor
ODataV4 is an improved version of the OData protocols, and the DataManager
can also retrieve and consume ODataV4 services. For more details on ODataV4 services, refer to the odata documentation
. To bind an ODataV4 service, use the ODataV4Adaptor.
<template>
<div id="app">
<ejs-chart id="container" :primaryXAxis='primaryXAxis' :title='title'>
<e-series-collection>
<e-series :dataSource='seriesData' type='Column' xName='CustomerID' yName='Freight' :query='queries'>
</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, ColumnSeries, Category } from "@syncfusion/ej2-vue-charts";
import { DataManager, Query, ODataV4Adaptor } from '@syncfusion/ej2-data';
let dataManager = new DataManager({
url: 'https://services.odata.org/V4/Northwind/Northwind.svc/Orders',
adaptor: new ODataV4Adaptor()
});
let query = new Query();
const seriesData = dataManager;
const queries = query;
const primaryXAxis = {
valueType: 'Category'
};
const title = 'Order Details';
provide('chart', [ColumnSeries, Category]);
</script>
<style>
#container {
height: 350px;
}
</style>
<template>
<div id="app">
<ejs-chart id="container" :primaryXAxis='primaryXAxis' :title='title'>
<e-series-collection>
<e-series :dataSource='seriesData' type='Column' xName='CustomerID' yName='Freight' :query='queries'>
</e-series>
</e-series-collection>
</ejs-chart>
</div>
</template>
<script>
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, ColumnSeries, Category } from "@syncfusion/ej2-vue-charts";
import { DataManager, Query, ODataV4Adaptor } from '@syncfusion/ej2-data';
let dataManager = new DataManager({
url: 'https://services.odata.org/V4/Northwind/Northwind.svc/Orders',
adaptor: new ODataV4Adaptor()
});
let query = new Query();
export default {
name: "App",
components: {
'ejs-chart': ChartComponent,
'e-series-collection': SeriesCollectionDirective,
'e-series': SeriesDirective
},
data() {
return {
seriesData: dataManager,
queries: query,
primaryXAxis: {
valueType: 'Category'
},
title: 'Order Details'
};
},
provide: {
chart: [ColumnSeries, Category]
}
};
</script>
<style>
#container {
height: 350px;
}
</style>
Web API adaptor
You can use the WebApiAdaptor to bind the chart with a Web API created using an OData endpoint.
<template>
<div id="app">
<ejs-chart id="container" :primaryXAxis='primaryXAxis' :title='title'>
<e-series-collection>
<e-series :dataSource='seriesData' type='Column' xName='CustomerID' yName='Freight' :query='queries'>
</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, ColumnSeries, Category } from "@syncfusion/ej2-vue-charts";
import { DataManager, Query, WebApiAdaptor } from '@syncfusion/ej2-data';
let dataManager = new DataManager({
url: 'https://services.syncfusion.com/vue/production/api/orders',
adaptor: new WebApiAdaptor()
});
let query = new Query();
const seriesData = dataManager;
const queries = query;
const primaryXAxis = {
valueType: 'Category'
};
const title = 'Order Details';
provide('chart', [ColumnSeries, Category]);
</script>
<style>
#container {
height: 350px;
}
</style>
<template>
<div id="app">
<ejs-chart id="container" :primaryXAxis='primaryXAxis' :title='title'>
<e-series-collection>
<e-series :dataSource='seriesData' type='Column' xName='CustomerID' yName='Freight' :query='queries'>
</e-series>
</e-series-collection>
</ejs-chart>
</div>
</template>
<script>
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, ColumnSeries, Category } from "@syncfusion/ej2-vue-charts";
import { DataManager, Query, WebApiAdaptor } from '@syncfusion/ej2-data';
let dataManager = new DataManager({
url: 'https://services.syncfusion.com/vue/production/api/orders',
adaptor: new WebApiAdaptor()
});
let query = new Query();
export default {
name: "App",
components: {
'ejs-chart': ChartComponent,
'e-series-collection': SeriesCollectionDirective,
'e-series': SeriesDirective
},
data() {
return {
seriesData: dataManager,
queries: query,
primaryXAxis: {
valueType: 'Category'
},
title: 'Order Details'
};
},
provide: {
chart: [ColumnSeries, Category]
}
};
</script>
<style>
#container {
height: 350px;
}
</style>
The response object should contain the properties Items and Count, where Items represents a collection of entities, and Count represents the total number of entities.
The sample response object should appear as follows:
{
Items: [{..}, {..}, {..}, ...],
Count: 830
}
Custom adaptor
You can create your own adaptor by extending the built-in adaptors. The following demonstrates the custom adaptor approach and how to add a serial number to the records by overriding the built-in response processing using the processResponse method of the ODataAdaptor.
<template>
<div id="app">
<ejs-chart id="container" :primaryXAxis='primaryXAxis' :title='title'>
<e-series-collection>
<e-series :dataSource='seriesData' type='Column' xName='CustomerID' yName='Sno' :query='queries'>
</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, ColumnSeries, Category } from "@syncfusion/ej2-vue-charts";
import { DataManager, Query, ODataAdaptor } from '@syncfusion/ej2-data';
class SerialNoAdaptor extends ODataAdaptor {
processResponse() {
let i = 0;
//calling base class processResponse function
let original = super.processResponse.apply(this, arguments);
//Adding serial number
original.result.forEach((item) => item['Sno'] = ++i);
return { result: original.result, count: original.count };
}
}
let dataManager = new DataManager({
url: 'https://services.syncfusion.com/vue/production/api/orders',
adaptor: new SerialNoAdaptor()
});
let query = new Query();
const seriesData = dataManager;
const queries = query;
const primaryXAxis = {
valueType: 'Category'
};
const title = 'Order Details';
provide('chart', [ColumnSeries, Category]);
</script>
<style>
#container {
height: 350px;
}
</style>
<template>
<div id="app">
<ejs-chart id="container" :primaryXAxis='primaryXAxis' :title='title'>
<e-series-collection>
<e-series :dataSource='seriesData' type='Column' xName='CustomerID' yName='Sno' :query='queries'>
</e-series>
</e-series-collection>
</ejs-chart>
</div>
</template>
<script>
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, ColumnSeries, Category } from "@syncfusion/ej2-vue-charts";
import { DataManager, Query, ODataAdaptor } from '@syncfusion/ej2-data';
class SerialNoAdaptor extends ODataAdaptor {
processResponse() {
let i = 0;
//calling base class processResponse function
let original = super.processResponse.apply(this, arguments);
//Adding serial number
original.result.forEach((item) => item['Sno'] = ++i);
return { result: original.result, count: original.count };
}
}
let dataManager = new DataManager({
url: 'https://services.syncfusion.com/vue/production/api/orders',
adaptor: new SerialNoAdaptor()
});
let query = new Query();
export default {
name: "App",
components: {
'ejs-chart': ChartComponent,
'e-series-collection': SeriesCollectionDirective,
'e-series': SeriesDirective
},
data() {
return {
seriesData: dataManager,
queries: query,
primaryXAxis: {
valueType: 'Category'
},
title: 'Order Details'
};
},
provide: {
chart: [ColumnSeries, Category]
}
};
</script>
<style>
#container {
height: 350px;
}
</style>
Offline mode
When using remote data binding, all chart actions will be processed on the server-side. To avoid postback for every action, configure the chart to load all data upon initialization and handle actions on the client-side. To enable this behavior, utilize the offline property of the DataManager
.
<template>
<div id="app">
<ejs-chart id="container" :primaryXAxis='primaryXAxis' :title='title'>
<e-series-collection>
<e-series :dataSource='seriesData' type='Column' xName='CustomerID' yName='Freight' :query='queries'>
</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, ColumnSeries, Category } from "@syncfusion/ej2-vue-charts";
import { DataManager, Query, ODataAdaptor } from '@syncfusion/ej2-data';
let dataManager = new DataManager({
url: 'https://services.syncfusion.com/vue/production/api/orders',
adaptor: new ODataAdaptor(),
offline: true
});
let query = new Query();
const seriesData = dataManager;
const queries = query;
const primaryXAxis = {
valueType: 'Category'
};
const title = 'Order Details';
provide('chart', [ColumnSeries, Category]);
</script>
<style>
#container {
height: 350px;
}
</style>
<template>
<div id="app">
<ejs-chart id="container" :primaryXAxis='primaryXAxis' :title='title'>
<e-series-collection>
<e-series :dataSource='seriesData' type='Column' xName='CustomerID' yName='Freight' :query='queries'>
</e-series>
</e-series-collection>
</ejs-chart>
</div>
</template>
<script>
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, ColumnSeries, Category } from "@syncfusion/ej2-vue-charts";
import { DataManager, Query, ODataAdaptor } from '@syncfusion/ej2-data';
let dataManager = new DataManager({
url: 'https://services.syncfusion.com/vue/production/api/orders',
adaptor: new ODataAdaptor(),
offline: true
});
let query = new Query();
export default {
name: "App",
components: {
'ejs-chart': ChartComponent,
'e-series-collection': SeriesCollectionDirective,
'e-series': SeriesDirective
},
data() {
return {
seriesData: dataManager,
queries: query,
primaryXAxis: {
valueType: 'Category'
},
title: 'Order Details'
};
},
provide: {
chart: [ColumnSeries, Category]
}
};
</script>
<style>
#container {
height: 350px;
}
</style>
Empty points
The Data points that uses the null
or undefined
as value are considered as empty points. Empty data points are ignored and not plotted in the Chart. When the data is provided by using the points property, By using emptyPointSettings
property in series, you can customize the empty point. Default mode
of the empty point is Gap
.
<template>
<div id="app">
<ejs-chart id="container" :title='title' :primaryXAxis='primaryXAxis'>
<e-series-collection>
<e-series :dataSource='seriesData' type='Column' xName='month' yName='sales' name='Sales'
:emptyPointSettings='emptyPointSettings1'></e-series>
<e-series :dataSource='seriesData' type='Line' xName='month' yName='sales' name='Sales Compare'
:emptyPointSettings='emptyPointSettings2'></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, ColumnSeries, LineSeries, Category } from "@syncfusion/ej2-vue-charts";
const seriesData = [
{ month: 'Jan', sales: 35 }, { month: 'Feb', sales: null },
{ month: 'Mar', sales: 34 }, { month: 'Apr', sales: 32 },
{ month: 'May', sales: 40 }, { month: 'Jun', sales: 32 },
{ month: 'Jul', sales: undefined }, { month: 'Aug', sales: 55 },
{ month: 'Sep', sales: 38 }, { month: 'Oct', sales: 30 },
{ month: 'Nov', sales: 25 }, { month: 'Dec', sales: 32 }
];
const primaryXAxis = {
valueType: 'Category'
};
const emptyPointSettings1 = {
mode: "Average",
fill: 'grey'
};
const emptyPointSettings2 = {
mode: "Gap"
};
const title = "Olympic Medals";
provide('chart', [ColumnSeries, 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='Column' xName='month' yName='sales' name='Sales'
:emptyPointSettings='emptyPointSettings1'></e-series>
<e-series :dataSource='seriesData' type='Line' xName='month' yName='sales' name='Sales Compare'
:emptyPointSettings='emptyPointSettings2'></e-series>
</e-series-collection>
</ejs-chart>
</div>
</template>
<script>
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, ColumnSeries, LineSeries, Category } from "@syncfusion/ej2-vue-charts";
export default {
name: "App",
components: {
"ejs-chart": ChartComponent,
"e-series-collection": SeriesCollectionDirective,
"e-series": SeriesDirective
},
data() {
return {
seriesData: [
{ month: 'Jan', sales: 35 }, { month: 'Feb', sales: null },
{ month: 'Mar', sales: 34 }, { month: 'Apr', sales: 32 },
{ month: 'May', sales: 40 }, { month: 'Jun', sales: 32 },
{ month: 'Jul', sales: undefined }, { month: 'Aug', sales: 55 },
{ month: 'Sep', sales: 38 }, { month: 'Oct', sales: 30 },
{ month: 'Nov', sales: 25 }, { month: 'Dec', sales: 32 }
],
primaryXAxis: {
valueType: 'Category'
},
emptyPointSettings1: {
mode: "Average",
fill: 'grey'
},
emptyPointSettings2: {
mode: "Gap"
},
title: "Olympic Medals"
};
},
provide: {
chart: [ColumnSeries, LineSeries, Category]
}
};
</script>
<style>
#container {
height: 350px;
}
</style>
Customizing empty point
Specific color for empty point can be set by fill
property in emptyPointSettings
. Border for a empty point can be set by border
property.
<template>
<div id="app">
<ejs-chart id="container" :title='title' :primaryXAxis='primaryXAxis'>
<e-series-collection>
<e-series :dataSource='seriesData' type='Column' xName='month' yName='sales' name='Sales'
:emptyPointSettings='emptyPointSettings'></e-series>
</e-series-collection>
</ejs-chart>
</div>
</template>
<script setup>
import { provide } from "vue";
import { ChartComponent as EjsChart, ColumnSeries, SeriesCollectionDirective as ESeriesCollection, SeriesDirective as ESeries, LineSeries, Category } from "@syncfusion/ej2-vue-charts";
const seriesData = [
{ month: 'Jan', sales: 35 }, { month: 'Feb', sales: null },
{ month: 'Mar', sales: 34 }, { month: 'Apr', sales: 32 },
{ month: 'May', sales: 40 }, { month: 'Jun', sales: 32 },
{ month: 'Jul', sales: undefined }, { month: 'Aug', sales: 55 },
{ month: 'Sep', sales: 38 }, { month: 'Oct', sales: 30 },
{ month: 'Nov', sales: 25 }, { month: 'Dec', sales: 32 }
];
const primaryXAxis = {
valueType: 'Category'
};
const emptyPointSettings = {
mode: "Average",
fill: 'red',
border: { width: 2, color: 'violet' }
};
const title = "Olympic Medals";
provide('chart', [ColumnSeries, 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='Column' xName='month' yName='sales' name='Sales'
:emptyPointSettings='emptyPointSettings'></e-series>
</e-series-collection>
</ejs-chart>
</div>
</template>
<script>
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, ColumnSeries, LineSeries, Category } from "@syncfusion/ej2-vue-charts";
export default {
name: "App",
components: {
"ejs-chart": ChartComponent,
"e-series-collection": SeriesCollectionDirective,
"e-series": SeriesDirective
},
data() {
return {
seriesData: [
{ month: 'Jan', sales: 35 }, { month: 'Feb', sales: null },
{ month: 'Mar', sales: 34 }, { month: 'Apr', sales: 32 },
{ month: 'May', sales: 40 }, { month: 'Jun', sales: 32 },
{ month: 'Jul', sales: undefined }, { month: 'Aug', sales: 55 },
{ month: 'Sep', sales: 38 }, { month: 'Oct', sales: 30 },
{ month: 'Nov', sales: 25 }, { month: 'Dec', sales: 32 }
],
primaryXAxis: {
valueType: 'Category'
},
emptyPointSettings: {
mode: "Average",
fill: 'red',
border: { width: 2, color: 'violet' }
},
title: "Olympic Medals"
};
},
provide: {
chart: [ColumnSeries, LineSeries, Category]
}
};
</script>
<style>
#container {
height: 350px;
}
</style>