Articles in this section
Category / Section

How to create an empty charts and graphs in js

2 mins read

How to create empty charts and graphs in js?

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. These are points with no Y value. These are used in cases where values are not available for a specific X value.

Let’s see, how to create simple empty chart in js.

Step-1: Adding Script file

First, you should create html file like emptyChart.html and then include ej2.min.js script file in head tag. It contains all dependencies to render the chart.

emptyChart.html
 
<html>
 
<head>
 
   // Adding ej2.min.js CDN link
    <script src="https://cdn.syncfusion.com/ej2/dist/ej2.min.js" type="text/javascript"></script>
 
</head>
</html>

 

Step-2: Creating Chart Container

Create a container for chart to get render.

emptyChart.html
 
<html>
<body>
    // Chart container
    <div id="container"></div>
</body>
</html>

 

Step-3: Creating the chart

 

Basic Empty Column Chart

 

Consider the following data to be rendered an empty column chart.

Annual Product-Wise Profit Analysis

x

y

Rice

80

Wheat

null

Oil

70

Corn

60

Gram

null

Milk

70

Peas

80

Fruit

60

Butter

null

 

Here are the steps for creating the chart:

  1. You should create js file like emptyChart.js and it is to be included in emprtyChart.html
  2. Create new chart instance by using new ej.charts.Chart().
  3. Assign the data using dataSource property in series.
  4. Bind the x and y values of data source with xName and yName properties
  5. You can select chart types (like line, column, area, bar etc..) using type property in series.
  6.  Now append the chart instance to the container to render the chart.

 

// emptyChart.html
 
<html>
<head>
   // Adding ej2.min.js CDN link
    <script src="https://cdn.syncfusion.com/ej2/dist/ej2.min.js" type="text/javascript"></script>
   // Adding emptyChart.js script file
    <script src="emptyChart.js" type="text/javascript"></script>
</head>
</html>

 

// emptyChart.js
 
var chart = new ej.charts.Chart({
    primaryXAxis: {
        title'Product', valueType'Category', interval1
    },
    primaryYAxis: {
        title'Profit', minimum0, maximum100, interval20,
        labelFormat'{value}%'
    },
    series: [
        {
            dataSource: [
                { x'Rice', y80 }, { x'Wheat', ynull },
                { x'Oil', y70 }, { x'Corn', y60 }, { x'Gram', ynull },
                { x'Milk', y70 }, { x'Peas', y80 },
                { x'Fruit', y60 }, { x'Butter', ynull }
            ],
            type'Column', xName'x', yName'y'
 
        },
    ],
    title'Annual Product-Wise Profit Analysis',
});
chart.appendTo("#container")

 

Screenshot

 

default-empty-chart

Empty point Modes

There are four types of empty point modes available. There are,

  1. Zero
  2. Drop
  3. Average

Zero Mode

You can set value is zero for empty/null points. Set mode property is Zero in emptyPointSettings property.

var chart = new ej.charts.Chart({
    //Initializing Chart Series
    series: [
        {
            dataSource: [
                { x'Rice', y80 }, { x'Wheat', ynull },
                { x'Oil', y70 }, { x'Corn', y60 }, { x'Gram', ynull },
                { x'Milk', y70 }, { x'Peas', y80 },
                { x'Fruit', y60 }, { x'Butter', ynull }
            ],
            type'Column', xName'x', yName'y',
            emptyPointSettings: {
                mode'Zero',
                fill'red'
            },
        },
    ],
});
chart.appendTo("#container")

 

zero-point

Drop Mode

You can ignore the empty/null points. Set mode property is Drop in emptyPointSettings property.

var chart = new ej.charts.Chart({
    //Initializing Chart Series
    series: [
        {
            dataSource: [
                { x'Rice', y80 }, { x'Wheat', ynull },
                { x'Oil', y70 }, { x'Corn', y60 }, { x'Gram', ynull },
                { x'Milk', y70 }, { x'Peas', y80 },
                { x'Fruit', y60 }, { x'Butter', ynull }
            ],
            type'Column', xName'x', yName'y',
            emptyPointSettings: {
                mode'Drop',
                fill'red'
            },
        },
    ],
});
chart.appendTo("#container")

 

drop-point

 

Average Mode

You can set the average value for the empty/null points based on previous and next point values. Set mode property is Average in emptyPointSettings property.

var chart = new ej.charts.Chart({
    //Initializing Chart Series
    series: [
        {
            dataSource: [
                { x'Rice', y80 }, { x'Wheat', ynull },
                { x'Oil', y70 }, { x'Corn', y60 }, { x'Gram', ynull },
                { x'Milk', y70 }, { x'Peas', y80 },
                { x'Fruit', y60 }, { x'Butter', ynull }
            ],
            type'Column', xName'x', yName'y',
            emptyPointSettings: {
                mode'Average',
                fill'red'
            },
        },
    ],
});
chart.appendTo("#container")

 

average-point

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (1)
Please  to leave a comment
HA
Harisul

How to change empty bar with text on chart js ?

enter image description here

Access denied
Access denied