This is a migrated thread and some comments may be shown as answers.

Bar chart - align at top, not center

3 Answers 91 Views
Charts
This is a migrated thread and some comments may be shown as answers.
Heiko
Top achievements
Rank 1
Veteran
Heiko asked on 06 May 2019, 03:48 PM

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

3 Answers, 1 is accepted

Sort by
0
Tsvetina
Telerik team
answered on 08 May 2019, 10:29 AM
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.
0
Heiko
Top achievements
Rank 1
Veteran
answered on 09 May 2019, 07:38 AM

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

0
Tsvetina
Telerik team
answered on 10 May 2019, 03:09 PM
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.
Tags
Charts
Asked by
Heiko
Top achievements
Rank 1
Veteran
Answers by
Tsvetina
Telerik team
Heiko
Top achievements
Rank 1
Veteran
Share this question
or