how to create rounded corner for column chart

[Benjamin]

can't seems to find an example for creating column chart looking similar to the image

[Nikolay]

Hello Benjamin,

This can be achieved with a custom visual function for the series.

Here is an example logic:

series: [{
            type: "column",
            data: [1, 2],
            visual: function (e) {
              var rect = e.rect,
                options = e.options.color;

              var curveDistance = rect.size.width / 4;
              var x = rect.origin.x;
              var y = rect.origin.y;
              var bottomRight = rect.bottomRight();
              var bottomRightX = bottomRight.x;
              var bottomRightY = bottomRight.y;
              var gradient = new kendo.drawing.LinearGradient({
                start: [0.5, 0],
                end: [0.5, 1],
                stops: [
                  {
                    offset: 0.3,
                    color: "#2587d0",
                    opacity: 0.6,
                  },
                  {
                    offset: 1,
                    color: "#2587d0",
                    opacity: 1,
                  },
                ],
              });

              var roundedRectPath = new kendo.drawing.Path({
                fill: gradient,
                stroke: {
                  color: "none",
                },
              })
                .moveTo(bottomRightX - curveDistance, y)
                .curveTo(
                  [bottomRightX, y],
                  [bottomRightX, y],
                  [bottomRightX, y + curveDistance],
                )
                .lineTo([bottomRightX, bottomRightY - curveDistance])
                .curveTo(bottomRight, bottomRight, [
                  bottomRightX - curveDistance,
                  bottomRightY,
                ])
                .lineTo([x + curveDistance, bottomRightY])
                .curveTo(
                  [x, bottomRightY],
                  [x, bottomRightY],
                  [x, bottomRightY - curveDistance],
                )
                .lineTo(x, y + curveDistance)
                .curveTo([x, y], [x, y], [x + curveDistance, y])
                .close();

              return roundedRectPath;
            }
          }]

Dojo demo: https://dojo.telerik.com/VZSjIgoF

Regards,
Nikolay
Progress Telerik