Bar chart - align at top, not center

4 posts, 0 answers
  1. Heiko
    Heiko avatar
    6 posts
    Member since:
    Nov 2018

    Posted 06 May Link to this post

    On my website I have three charts of type "Bar" displayed side by side. Each chart has a different count of data. What I like to achieve:

    1. each chart area should have the same height no matter if there are 1 or 10 bars in it

    2. the bars should align on top, not center inside the chart area

    How can I achieve that?

    Regards
    Heiko

  2.
  3. Tsvetina
    Admin
    Tsvetina avatar
    2481 posts

    Posted 08 May Link to this post

    Hello Heiko,

    To make the Charts equally high, just set a width to their wrapper elements. As for aligning the bars on top, this is not possible out of the box but you can achieve it by using a custom visual function for the bars that draws them offset to the top:
    function barVisual(e) {
      var origin = e.rect.origin;
      var center = e.rect.center();
      var bottomRight = e.rect.bottomRight();
      var offset = e.rect.size.height / 2;
     
      console.log(e.rect);
      var path = new kendo.drawing.Path({
        fill: {
          color: e.options.color
        },
        stroke: {
          width: 0.6,
          color: "gray"
        }
      })
      .moveTo(origin.x, bottomRight.y - offset)
      .lineTo(bottomRight.x, bottomRight.y - offset)
      .lineTo(bottomRight.x, origin.y - offset)
      .lineTo(origin.x, origin.y - offset)
      .close();
     
      return path;
    }

    Here is a full runnable example showing my suggestions:
    https://dojo.telerik.com/EGiTiBiL

    Regards,
    Tsvetina
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  5. Heiko
    Heiko avatar
    6 posts
    Member since:
    Nov 2018

    Posted 09 May in reply to Tsvetina Link to this post

    Hello Tsvetina,

    thanks for your help. In my case it is not working. See attached file, this is the result using your code. Maybe it's because I use Bootstrap 4 and flex design. - Besides labels are no longer positioned inside the bar (I use "insideBase" position).

    Regards
    Heiko

  7. Tsvetina
    Admin
    Tsvetina avatar
    2481 posts

    Posted 10 May Link to this post

    Hi Heiko,

    Could you try modifying my example to reproduce the behavior? I was getting such results with the distorted bars when I wasn't providing correct coordinates to the Path drawing the Bars. Usually, the theme would not be related to the layout of the Chart, as it is created using SVG/canvas, not regular HTML elements.

    If you can't reproduce the bars size issue in my example, please paste your most current code related to the Chart and the custom visual.

    Regards,
    Tsvetina
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  8.
Back to Top