# Render Element for Zero Chart Bars

## Environment

<table>
 <tr>
  <td>Product</td>
  <td>Progress® Kendo UI® Chart for jQuery</td>
 </tr>
 <tr>
  <td>Operating System</td>
  <td>Windows 10 64bit</td>
 </tr>
 <tr>
  <td>Visual Studio Version</td>
  <td>Visual Studio 2017</td>
 </tr>
 <tr>
  <td>Preferred Language</td>
  <td>JavaScript</td>
 </tr>
</table>

## 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`](https://www.telerik.com/kendo-jquery-ui/documentation/api/dataviz/ui/chart/configuration/series#seriesvisual) function to render an element for zero bars.

```dojo
    <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

* [Chart JavaScript API Reference](https://www.telerik.com/kendo-jquery-ui/documentation/api/dataviz/ui/chart)
* [Drawing API](https://www.telerik.com/kendo-jquery-ui/documentation/framework/drawing/overview)
* [Aggregate Data in Pie Charts](https://www.telerik.com/kendo-jquery-ui/documentation/knowledge-base/pie-chart-aggregates)
* [Draw on Scatter Plots Surface](https://www.telerik.com/kendo-jquery-ui/documentation/knowledge-base/draw-on-scatter-plots)
* [Expand Clickable Area of Points](https://www.telerik.com/kendo-jquery-ui/documentation/knowledge-base/expand-clickable-area)