# 100% stacked bar chart with rounded ends

1. ##### Sarthak
9 posts
Member since:
Aug 2020

Posted 12 Aug Link to this post

How do I make both ends of a stacked bar chart round .attaching the current state of the developed chart and the expected design.kindly let me know how do I achieve this.
2. ##### Hetali
60 posts

Posted 12 Aug Link to this post

Hi Sarthak,

In order to show round edges on both the sides of the 100% Stacked Bar Chart, use the visual property of the SeriesItemComponent as seen below:

```<kendo-chart>
<kendo-chart-series>
<kendo-chart-series-item type="bar" [visual]="radiusStart" [stack]="{ type: '100%' }" [data]="[1]">
</kendo-chart-series-item>
</kendo-chart-series>
</kendo-chart>```

```public radiusStart = (e: SeriesVisualArgs) => {
var height = e.rect.size.height;
var width = e.rect.size.width;
var radius = height / 2;
var originY = e.rect.origin.y;
var originX = e.rect.origin.x;
var pointX = originX + radius;
var pointY = originY + radius;

const geometry = new GeomCircle([pointX, pointY], radius);
const circle = new Circle(geometry, {
stroke: { color: e.series.color, width: 1 },
fill: { color: e.series.color }
});

// Clipping of circle to draw an arc is optional

// const clipPath = new Path();
// clipPath
//   .moveTo(originX, originY)
//   .lineTo(pointX, originY)
//   .lineTo(pointX, originY + height)
//   .lineTo(originX, originY + height)
//   .close();

// circle.clip(clipPath);

const path = new Path({
stroke: { color: e.series.color, width: 1 },
fill: { color: e.series.color }
});
path
.moveTo(pointX, originY)
.lineTo(originX + width, originY)
.lineTo(originX + width, originY + height)
.lineTo(pointX, originY + height)
.close();

const group = new Group();
group.append(circle, path);

return group;
};```

In this StackBlitz example, the 100% Stacked Kendo UI Bar Chart has round egdes.

Please let me know if this helps or if you have any further questions.

Regards,
Hetali
Progress Telerik

3. ##### Sarthak
9 posts
Member since:
Aug 2020

Hi Hetali.

Thanks a lot for the quick response.one further query on top of it.there arises a situation where I have only one series item.in that case how do I add both radius start and radius end to that single chart item .

4. ##### Hetali
60 posts

Posted 13 Aug Link to this post

Hello Sarthak,

To add round edges on both the sides of a single series item, merge the functions as seen below:

```public radius = (e: SeriesVisualArgs) => {
var height = e.rect.size.height;
var width = e.rect.size.width;
var radius = height / 2;
var originY = e.rect.origin.y;
var originX = e.rect.origin.x;
var pointX = originX + radius;
var pointY = originY + radius;

const geometry = new GeomCircle([pointX, pointY], radius);
const circle = new Circle(geometry, {
stroke: { color: e.series.color, width: 1 },
fill: { color: e.series.color }
});

const circle1 = new Circle(geometry1, {
stroke: { color: e.series.color },
fill: { color: e.series.color }
});

const path = new Path({
stroke: { color: e.series.color, width: 1 },
fill: { color: e.series.color }
});
path
.moveTo(pointX, originY)
.lineTo(originX + width - radius, originY)
.lineTo(originX + width - radius, originY + height)
.lineTo(pointX, originY + height)
.close();

const group = new Group();
group.append(circle, path, circle1);

return group;
};```

In this updated StackBlitz example, a single series Bar Chart has round edges.

I hope this helps. Let me know in case you need any further assistance.

Regards,
Hetali
Progress Telerik

5. ##### Sarthak
9 posts
Member since:
Aug 2020

Can i pass additional parameters to this methods ?