Edit this page

Show Message When Chart Has No Data

You can configure the Kendo UI Chart to display a message when its data source is empty.

The example below demonstrates how to achieve such behavior. Note that the <div> element of the message is positioned and decorated through CSS.

    <div class="container">
      <div id="chart"></div>
      <div class="overlay"><div>No data available</div></div>

        dataSource: {
          transport: {
            read: function(e) {
              setTimeout(function() {
                  value: 1
                }, {
                  value: 2
              }, 2000);
        seriesDefaults: {
          type: "pie"
        series: [{
          field: "value",
          name: "Foo"
        dataBound: function(e) {
          var view = e.sender.dataSource.view();
          $(".overlay").toggle(view.length === 0);

      .container {
        position: relative;

      .overlay {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        opacity: .2;
        filter: alpha(opacity=60);
        background-color: #6495ed;      
        text-align: center;

      .overlay div {
        position: relative;
        font-size: 34px;
        margin-top: -17px;
        top: 50%;

See Also

For more runnable examples on Kendo UI Charts, browse the How To documentation folder.

Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article