New to Kendo UI for jQuery? Download free 30-day trial

Show an Empty Pie in the Chart When No Data Is Available


Product Version 2018.1.221
Product Progress® Kendo UI® Chart for jQuery


When my dataset is empty the pie chart is not showing. I want to show a blank pie chart when no data is found(i.e dataset is empty). What can I do?


We have a how-to article which shows a similar case - when there is no data, an overlay is displayed.

  1. Modify the article above to use a circle with some text in using any CSS styles to alter it.
  2. Add a handler to the dataBound event of the chart and check if there is any data(the article uses the data source view() method).
  3. If there is data, hide the overlay:

        dataBound: function (e) {
          var view = e.sender.dataSource.view();
          $(".overlay").toggle(view.length === 0);

The following example demonstrates how to toggle a circle overlay when there is no data in the Pie Chart.

    <div id="container">
      <div id="chart"></div>
      <div class="overlay">
        <div id="circle"><div id="no-data-text">No data available</div></div>
        title: {
          text: "Exam Details"
        legend: {
          visible: true,
          position: "top"
        dataSource: {
          transport: {
            read: function(e) {
              setTimeout(function() {
              }, 1500);
          aggregate: { field: "ModalityCount", aggregate: "sum" }
        seriesDefaults: {
          labels: {
            position: "center",
            visible: true,
            background: "transparent",
            template: "#= category # \n #= value#"
        series: [{
          type: "pie",
          field: "ModalityCount",
          categoryField: "PrimaryModality"
        tooltip: {
          visible: true,
          template: "${ category } - ${ value }%"
        dataBound: function (e) {
          var view = e.sender.dataSource.view();
          $(".overlay").toggle(view.length === 0);
      #circle {
        height: 222px;
        width: 222px;
        font-size: 20px;
        border-radius: 50%;
        line-height: 200px;
        margin: 0 auto;
        cursor: default;
        border: 1px solid #999;
        position: relative;
        top: 10%;
        background-color: lightgrey;
      .container {
        position: relative;
      .overlay {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;     
        text-align: center;
In this article