Edit this page

Implement Color-Coded Ranges in Bars

Color ranges can be used to convey additional information—for example, value composition.

This behavior is usually achieved through stacked bar series. However, if you need to convey more flexibility, consider the following Chart.

Figure 1: Color ranges in a Kendo UI Chart

Color-coded ranges

To implement this functionality, define a series.visual that draws the ranges dynamically. Note that the visual remains in use until the next render event. This allows you to update it asynchronously or in real-time.

The example below demonstrates how to implement color-coded ranges (stripes) in bars when working with Kendo UI Charts.

Example
    <div id="chart" />
    <script>
      var WIDTH = 5;
      var draw = kendo.drawing;
      var geom = kendo.geometry;

      $("#chart").kendoChart({
        series: [{
          type: "bar",
          data: [10, 20, 30],
          // http://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart#configuration-series.visual
          visual: function(e) {
            // http://docs.telerik.com/kendo-ui/api/javascript/geometry/rect
            var left = e.rect.topLeft();
            var right = e.rect.topRight();
            var bottom = e.rect.bottomLeft();

            // http://docs.telerik.com/kendo-ui/api/javascript/drawing/group
            var group = new draw.Group();

            for (var x = left.x; x < right.x; x += WIDTH) {
              var rect = new geom.Rect([x, left.y], [WIDTH, e.rect.height()])

              // http://docs.telerik.com/kendo-ui/api/javascript/drawing/path
              var value = Math.random();
              var path = draw.Path.fromRect(rect, {
                fill: {
                  color: value > 0.5 ? "green" : "lightgreen"
                },
                stroke: null,

                // Custom field
                value: value
              });

              group.append(path);
            }

            return group;
          }
        }]
      });
    </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