Edit this page

Render Element for Zero Bars

By default, bars with a zero value are not rendered because they have a zero size.

The following example demonstrates how to use the series.visual function to render an element for zero bars.

Example
    <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

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

close
Dummy