100% stacked bar chart with rounded ends

6 posts, 0 answers
  1. Sarthak
    Sarthak avatar
    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
    Admin
    Hetali avatar
    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
    Sarthak avatar
    9 posts
    Member since:
    Aug 2020

    Posted 13 Aug in reply to Hetali Link to this post

    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
    Admin
    Hetali avatar
    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 geometry1 = new GeomCircle([originX + width - radius, pointY], radius);
      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
    Sarthak avatar
    9 posts
    Member since:
    Aug 2020

    Posted 17 Aug in reply to Hetali Link to this post

    Can i pass additional parameters to this methods ?
  6. Hetali
    Admin
    Hetali avatar
    60 posts

    Posted 18 Aug Link to this post

    Hello Sarthak,

    The visual property of the SeriesItemComponent in the Kendo UI Chart passes the built-in arguments, SeriesVisualArgs, to the function and no additional parameters can be passed to the function.

    Let me know if this information helps or if you have any further questions.

    Regards,
    Hetali
    Progress Telerik

Back to Top