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

Render Element for Zero Chart Bars

Environment

Product Progress Kendo UI Chart for jQuery
Operating System Windows 10 64bit
Visual Studio version Visual Studio 2017
Preferred Language JavaScript

Description

How can I render bars with a zero value in the Chart?

Solution

By default, these are not rendered because they have a zero size.

To overwrite this limitation, refer to the following example. It demonstrates how to use the series.visual function to render an element for zero bars.

    <div id="chart"></div>
    <script>
        var ZERO_BAR_SIZE = 2;

        $("#chart").kendoChart({
          seriesDefaults: {
            type: "column",
            visual: function(e) {
              var visual;
              if (e.value === 0) {
                e.rect.origin.y -= ZERO_BAR_SIZE;
                e.rect.size.height = ZERO_BAR_SIZE;

                visual = new kendo.drawing.Rect(e.rect, {
                  fill: {
                    color: e.options.color
                  },
                  stroke: null
                });
              } else {
                visual = e.createVisual();
              }

              return visual;
            }
          },
          series: [{
            data: [1, 0, 1]
          }, {
            data: [0, 1, 1]
          }]
        });
    </script>

See Also

In this article