Bar chart - align at top, not center

[Heiko]

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

[Tsvetina]

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

[Heiko]

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

[Tsvetina]

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