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