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

Justify Kendo Bar Chart

3 Answers 79 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
asyrafuddin
Top achievements
Rank 1
asyrafuddin asked on 06 Oct 2020, 11:53 AM
<div id="chart"></div>
<script>
$("#chart").kendoChart({
  categoryAxis: [{
    justified: true,
    categories: ["2012", "2013"]
  }],
  series: [
    { type: "line", data: [1, 2, 3] },
    { type: "bar", data: [1, 2, 3] }
  ]
});
</script>

 

What I'm trying to do here is I want to justify both line and bar chart so that there is no space in the beginning and also at the end. But I cannot use justify since categoryAxis.justified is only works with line chart. Is there any other option I can use to that both line and bar chart can justify.

3 Answers, 1 is accepted

Sort by
0
Tsvetomir
Telerik team
answered on 08 Oct 2020, 06:33 AM

Hi,

It is correct that the justified option would be applied only to the line chart series. It will not occur for the bar and column chart types. The default position of the bars is in the center and there is no option out-of-the-box for cutting out the space only between the first and last series. 

What I can recommend as an alternative would be for you to evaluate the following configuration option:

https://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart/configuration/series.gap

 

Regards,
Tsvetomir
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
asyrafuddin
Top achievements
Rank 1
answered on 09 Oct 2020, 10:01 AM
Thanks for reply, gap indeed can remove the space but it also effect the width of the bar. Set gap to 0 will remove the space but the bar will be too wide.
0
Tsvetomir
Telerik team
answered on 12 Oct 2020, 05:02 PM

Hi,

It is correct that clearing the gap in front of the bar would affect the width of the grid. At present, there is no other option that could be undertaken to reduce the empty space.

 

Kind regards,
Tsvetomir
Progress Telerik

Five days of Blazor, Angular, React, and Xamarin experts live-coding on twitch.tv/CodeItLive, special prizes, and more, for FREE?! Register now for DevReach 2.0(20).

Tags
General Discussions
Asked by
asyrafuddin
Top achievements
Rank 1
Answers by
Tsvetomir
Telerik team
asyrafuddin
Top achievements
Rank 1
Share this question
or