Empty points in Vue Accumulation chart component
5 Sep 202522 minutes to read
The data points those uses the null or undefined as value are considered as empty points. The empty data points are ignored and not plotted in the chart. You can customize those points, using the emptyPointSettings property in
series. The default mode of the empty point is Gap. Other supported modes are Average and Zero.
<template>
<div id="app">
<ejs-accumulationchart id="container">
<e-accumulation-series-collection>
<e-accumulation-series :dataSource='seriesData' xName='x' yName='y' :emptyPointSettings='emptyPointSettings'>
</e-accumulation-series>
</e-accumulation-series-collection>
</ejs-accumulationchart>
</div>
</template>
<script setup>
import { provide } from "vue";
import { AccumulationChartComponent as EjsAccumulationchart, AccumulationSeriesCollectionDirective as EAccumulationSeriesCollection, AccumulationSeriesDirective as EAccumulationSeries, PieSeries, AccumulationDataLabel } from "@syncfusion/ej2-vue-charts";
const seriesData = [
{ x: 'Jan', y: 3, text: 'Jan: 3' }, { x: 'Feb', y: 3.5, text: 'Feb: 3.5' },
{ x: 'Mar', y: null, text: 'Mar: 7' }, { x: 'Apr', y: 13.5, text: 'Apr: 13.5' },
{ x: 'May', y: 19, text: 'May: 19' }, { x: 'Jun', y: 23.5, text: 'Jun: 23.5' },
{ x: 'Jul', y: 26, text: 'Jul: 26' }, { x: 'Aug', y: undefined, text: 'Aug: 25' },
{ x: 'Sep', y: 21, text: 'Sep: 21' }, { x: 'Oct', y: 15, text: 'Oct: 15' }];
const emptyPointSettings = { mode: 'Zero', fill: 'pink' };
provide('accumulationchart', [PieSeries, AccumulationDataLabel]);
</script>
<style>
#container {
height: 350px;
}
</style><template>
<div id="app">
<ejs-accumulationchart id="container">
<e-accumulation-series-collection>
<e-accumulation-series :dataSource='seriesData' xName='x' yName='y' :emptyPointSettings='emptyPointSettings'>
</e-accumulation-series>
</e-accumulation-series-collection>
</ejs-accumulationchart>
</div>
</template>
<script>
import { AccumulationChartComponent, AccumulationSeriesCollectionDirective, AccumulationSeriesDirective, PieSeries, AccumulationDataLabel } from "@syncfusion/ej2-vue-charts";
export default {
name: "App",
components: {
"ejs-accumulationchart": AccumulationChartComponent,
"e-accumulation-series-collection": AccumulationSeriesCollectionDirective,
"e-accumulation-series": AccumulationSeriesDirective
},
data() {
return {
seriesData: [
{ x: 'Jan', y: 3, text: 'Jan: 3' }, { x: 'Feb', y: 3.5, text: 'Feb: 3.5' },
{ x: 'Mar', y: null, text: 'Mar: 7' }, { x: 'Apr', y: 13.5, text: 'Apr: 13.5' },
{ x: 'May', y: 19, text: 'May: 19' }, { x: 'Jun', y: 23.5, text: 'Jun: 23.5' },
{ x: 'Jul', y: 26, text: 'Jul: 26' }, { x: 'Aug', y: undefined, text: 'Aug: 25' },
{ x: 'Sep', y: 21, text: 'Sep: 21' }, { x: 'Oct', y: 15, text: 'Oct: 15' }],
emptyPointSettings: { mode: 'Zero', fill: 'pink' },
};
},
provide: {
accumulationchart: [PieSeries, AccumulationDataLabel]
}
};
</script>
<style>
#container {
height: 350px;
}
</style>Customization
Specific color for an empty point can be set by using the fill property in emptyPointSettings and the
border for an empty point can be set by using the border property.
<template>
<div id="app">
<ejs-accumulationchart id="container">
<e-accumulation-series-collection>
<e-accumulation-series :dataSource='seriesData' xName='x' yName='y' :emptyPointSettings='emptyPointSettings'>
</e-accumulation-series>
</e-accumulation-series-collection>
</ejs-accumulationchart>
</div>
</template>
<script setup>
import { provide } from "vue";
import { AccumulationChartComponent as EjsAccumulationchart, AccumulationSeriesCollectionDirective as EAccumulationSeriesCollection, AccumulationSeriesDirective as EAccumulationSeries, PieSeries } from "@syncfusion/ej2-vue-charts";
const seriesData = [
{ x: 'Jan', y: 3, text: 'Jan: 3' }, { x: 'Feb', y: 3.5, text: 'Feb: 3.5' },
{ x: 'Mar', y: null, text: 'Mar: 7' }, { x: 'Apr', y: 13.5, text: 'Apr: 13.5' },
{ x: 'May', y: 19, text: 'May: 19' }, { x: 'Jun', y: 23.5, text: 'Jun: 23.5' },
{ x: 'Jul', y: 26, text: 'Jul: 26' }, { x: 'Aug', y: undefined, text: 'Aug: 25' },
{ x: 'Sep', y: 21, text: 'Sep: 21' }, { x: 'Oct', y: 15, text: 'Oct: 15' }];
const emptyPointSettings = { mode: 'Average', fill: 'red' };
provide('accumulationchart', [PieSeries]);
</script>
<style>
#container {
height: 350px;
}
</style><template>
<div id="app">
<ejs-accumulationchart id="container">
<e-accumulation-series-collection>
<e-accumulation-series :dataSource='seriesData' xName='x' yName='y' :emptyPointSettings='emptyPointSettings'>
</e-accumulation-series>
</e-accumulation-series-collection>
</ejs-accumulationchart>
</div>
</template>
<script>
import { AccumulationChartComponent, AccumulationSeriesCollectionDirective, AccumulationSeriesDirective, PieSeries } from "@syncfusion/ej2-vue-charts";
export default {
name: "App",
components: {
"ejs-accumulationchart": AccumulationChartComponent,
"e-accumulation-series-collection": AccumulationSeriesCollectionDirective,
"e-accumulation-series": AccumulationSeriesDirective
},
data() {
return {
seriesData: [
{ x: 'Jan', y: 3, text: 'Jan: 3' }, { x: 'Feb', y: 3.5, text: 'Feb: 3.5' },
{ x: 'Mar', y: null, text: 'Mar: 7' }, { x: 'Apr', y: 13.5, text: 'Apr: 13.5' },
{ x: 'May', y: 19, text: 'May: 19' }, { x: 'Jun', y: 23.5, text: 'Jun: 23.5' },
{ x: 'Jul', y: 26, text: 'Jul: 26' }, { x: 'Aug', y: undefined, text: 'Aug: 25' },
{ x: 'Sep', y: 21, text: 'Sep: 21' }, { x: 'Oct', y: 15, text: 'Oct: 15' }],
emptyPointSettings: { mode: 'Average', fill: 'red' }
};
},
provide: {
accumulationchart: [PieSeries]
}
};
</script>
<style>
#container {
height: 350px;
}
</style>Handling No Data
When no data is available to render in the accumulation chart, the noDataTemplate property can be used to display a custom layout within the chart area. This layout may include a message indicating the absence of data, a relevant image, or a button to initiate data loading. Styled text, images, or interactive elements can be incorporated to maintain design consistency and improve user guidance. Once data becomes available, the chart automatically updates to display the appropriate visualization.
<template>
<div id="app">
<ejs-accumulationchart id="container" ref='chart' :load='load' :loaded='loaded' :noDataTemplate='noDataTemplate'>
<e-accumulation-series-collection>
<e-accumulation-series :dataSource='seriesData' xName='x' yName='y'> </e-accumulation-series>
</e-accumulation-series-collection>
</ejs-accumulationchart>
<div v-if="!hasData" class="no-data-button-overlay">
<ejs-button content="Load Data" iconCss="e-icons e-refresh" cssClass="load-data-btn e-outline" :isPrimary="false"
@click="loadData"></ejs-button>
</div>
</div>
</template>
<script setup>
import { provide } from "vue";
import { AccumulationChartComponent as EjsAccumulationchart, AccumulationSeriesCollectionDirective as EAccumulationSeriesCollection, AccumulationSeriesDirective as EAccumulationSeries, PieSeries } from "@syncfusion/ej2-vue-charts";
import { ButtonComponent } from "@syncfusion/ej2-vue-buttons";
let hasData = false;
let seriesData = [];
const load = (args) => {
seriesData = hasData ? [
{ x: 'Jan', y: 3, fill: '#498fff', text: 'January' }, { x: 'Feb', y: 3.5, fill: '#ffa060', text: 'February' },
{ x: 'Mar', y: 7, fill: '#ff68b6', text: 'March' }, { x: 'Apr', y: 13.5, fill: '#81e2a1', text: 'April' }
] : [];
};
const loadData = (args) => {
seriesData = [
{ x: 'Jan', y: 3, fill: '#498fff', text: 'January' }, { x: 'Feb', y: 3.5, fill: '#ffa060', text: 'February' },
{ x: 'Mar', y: 7, fill: '#ff68b6', text: 'March' }, { x: 'Apr', y: 13.5, fill: '#81e2a1', text: 'April' }
];
hasData = true;
const chart = this.$refs.chart.ej2Instances;
chart.refresh();
};
const noDataTemplate = `
<div id="noDataTemplateContainer" class="light-bg">
<div class="template-align">
<img src="no-data.png" alt="No Data"/>
</div>
<div class="template-align">
<p style="font-size: 15px; margin: 10px 0 10px;"><strong>No data available to display.</strong></p>
</div>
</div>`;
provide('accumulationchart', [PieSeries]);
</script>
<style>
#container {
height: 350px;
}
#noDataTemplateContainer {
height: inherit;
width: inherit;
}
.no-data-button-overlay {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
margin-top: 60px;
/* Adjust this to position below the no-data message */
z-index: 10;
}
.load-data-btn {
border-radius: 4px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
margin-top: 50px;
}
.light-bg {
background-color: #fafafa;
color: #000000;
}
.template-align img {
max-width: 150px;
/* Adjust size as needed */
max-height: 150px;
margin-top: 55px;
}
.template-align {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}
</style><template>
<div id="app">
<ejs-accumulationchart id="container" ref='chart' :load='load' :loaded='loaded' :noDataTemplate='noDataTemplate'>
<e-accumulation-series-collection>
<e-accumulation-series :dataSource='seriesData' xName='x' yName='y'> </e-accumulation-series>
</e-accumulation-series-collection>
</ejs-accumulationchart>
<div v-if="!hasData" class="no-data-button-overlay">
<ejs-button content="Load Data" iconCss="e-icons e-refresh" cssClass="load-data-btn e-outline" :isPrimary="false"
@click="loadData"></ejs-button>
</div>
</div>
</template>
<script>
import { AccumulationChartComponent, AccumulationSeriesCollectionDirective, AccumulationSeriesDirective, PieSeries } from "@syncfusion/ej2-vue-charts";
import { ButtonComponent } from "@syncfusion/ej2-vue-buttons";
export default {
name: "App",
components: {
'ejs-accumulationchart': AccumulationChartComponent,
'ejs-button': ButtonComponent,
'e-accumulation-series-collection': AccumulationSeriesCollectionDirective,
'e-accumulation-series': AccumulationSeriesDirective
},
data() {
return {
hasData: false,
noDataTemplate: `
<div id="noDataTemplateContainer" class="light-bg">
<div class="template-align">
<img src="no-data.png" alt="No Data"/>
</div>
<div class="template-align">
<p style="font-size: 15px; margin: 10px 0 10px;"><strong>No data available to display.</strong></p>
</div>
</div>`,
seriesData: []
};
},
provide: {
accumulationchart: [PieSeries]
},
methods: {
load(args) {
this.seriesData = this.hasData ? [
{ x: 'Jan', y: 3, fill: '#498fff', text: 'January' }, { x: 'Feb', y: 3.5, fill: '#ffa060', text: 'February' },
{ x: 'Mar', y: 7, fill: '#ff68b6', text: 'March' }, { x: 'Apr', y: 13.5, fill: '#81e2a1', text: 'April' }
] : [];
},
loaded(args) {
},
loadData() {
this.seriesData = [
{ x: 'Jan', y: 3, fill: '#498fff', text: 'January' }, { x: 'Feb', y: 3.5, fill: '#ffa060', text: 'February' },
{ x: 'Mar', y: 7, fill: '#ff68b6', text: 'March' }, { x: 'Apr', y: 13.5, fill: '#81e2a1', text: 'April' }
];
this.hasData = true;
const chart = this.$refs.chart.ej2Instances;
chart.series[0].animation.enable = true;
chart.refresh();
}
}
};
</script>
<style>
#container {
height: 350px;
}
#noDataTemplateContainer {
height: inherit;
width: inherit;
}
.no-data-button-overlay {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
margin-top: 60px;
/* Adjust this to position below the no-data message */
z-index: 10;
}
.load-data-btn {
border-radius: 4px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
margin-top: 50px;
}
.light-bg {
background-color: #fafafa;
color: #000000;
}
.template-align img {
max-width: 150px;
/* Adjust size as needed */
max-height: 150px;
margin-top: 55px;
}
.template-align {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}
</style>