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

How to show two labels for each bar group using Kendo-ui chart bar

8 Answers 1064 Views
Chart
This is a migrated thread and some comments may be shown as answers.
Gunjan
Top achievements
Rank 1
Gunjan asked on 11 Apr 2017, 01:37 PM

This is the code :

 

$("#chart").kendoChart({
            title: {
                text: "Distribution of roles per total number of articles(per selected levels)"
            },
            chartArea: {
                width: 800,
                heigth: 800,
                stack: { type: "100%" }
            },
            legend: {
                visible: true
            },
            seriesDefaults: {
                type: "column"

            },
            series: [
                {
                    name: "A",
                    //  order: 1,
                    stack: "Chart",
                    data: chart_Profiling//[76067, 0, 0]
                },
                 {
                     name: "B",
                     //  order: 2,
                     stack: "Chart",
                     data: chart_Compulsory//[14183, 0, 0]
                 },
                  {
                      name: "C",
                      // order: 3,
                      stack: "Chart",
                      data: chart_Complement//[1197, 465606, 6567]
                  },
                   {
                       name: "HWW",
                       visibleInLegend: false,
                       stack: "Chart1",
                       data: chart_Profiling_1//[76067, 0, 0]
                   },

                 {
                     name: "HWW",
                     visibleInLegend: false,
                     stack: "Chart1",
                     data: chart_Compulsory_1 //[14183, 0, 0]
                 },
                   {
                       name: "HWW",
                       visibleInLegend: false,
                       stack: "Chart1",
                       data: chart_Complement_1//[1197, 465606, 6567]
                   },
                   {
                       name: "OHA E",
                       visibleInLegend: false,
                       stack: "Chart2",
                       data: chart_Profiling_All_SomeArticles//[76067, 0, 0]
                   },

                 {
                     name: "OHA E",
                     visibleInLegend: false,
                     stack: "Chart2",
                     data: chart_Compulsory_All_SomeArticles //[14183, 0, 0]
                 },
                    {
                        name: "OHA E",
                        visibleInLegend: false,
                        stack: "Chart2",
                        data: chart_Complement_All_SomeArticles//[1197, 465606, 6567]

                    },


            ],
            seriesColors: ["rgb(214,186,114)", "rgb(197,200,203)", "rgb(170,115,80)"],

            valueAxis: {
                // majorUnit: (max7 / 10),
                //max: (max7 + (max7 / 6)),
                min: 0,
                max: max7,
                labels: {
                    template: "#= kendo.format('{0:N0}', value ) # "
                },
                line: {
                    visible: true
                }
            },
            categoryAxis: {
                categories: [Category1,Category2,Category3,Category4],
                majorGridLines: {
                    visible: true
                },
                labels: {
                    template: labelTemplate,
                    rotation: -45
                }
            },
            tooltip: {
                visible: true,
                template: "#= series.name #: #= value #"
            }
            ,
            pannable: {
                // lock: "y",
                // lock: "x"
            },
            zoomable: {
                mousewheel: {
                    //lock: "y"
                },
                selection: {
                    // lock: "y"
                }
            }
        });

    }

 

I need to show the chart as shown in uploaded image.

8 Answers, 1 is accepted

Sort by
0
Stamo Gochev
Telerik team
answered on 13 Apr 2017, 12:03 PM
Hello Gunjan,

You can rotate the labels using the categoryAxis.labels.rotation option:

http://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart#configuration-categoryAxis.labels.rotation

Regards,
Stamo Gochev
Telerik by Progress
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Gunjan
Top achievements
Rank 1
answered on 14 Apr 2017, 06:25 AM

Hello Stamo,

You did not got my question.I need label for each bar. Please refer image (Mychart.png) for my current code where i can place only single label for two bars(group) where as i need each label for each bar. Refer  image(Stack Bar.png) which is my requirement.

Regards,

Gunjan

 

 

0
Boyan Dimitrov
Telerik team
answered on 18 Apr 2017, 08:57 AM

Hello,

Have you tried to use the categoryAxis.labels.visual function? This is a function that can be used to create a custom visual for the labels. Please refer to the arguments list and the example below the article for more information. 

Regards,
Boyan Dimitrov
Telerik by Progress
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Gunjan
Top achievements
Rank 1
answered on 18 May 2017, 03:22 PM

 

Hi Boyan,

Where is the arguments list and the example?

Again I am elaborating my question in more detail for your understanding please refer image (MyRequirement.png).

I need 3 labels for each bar group as shown in image(MyReqiurement.png).

 

Below is my code:

 

$("#chart").kendoChart({
            title: {
                text: "Distribution of roles per total number of articles per selected levels"
            },
            chartArea: {
                width: 800,
                heigth: 500,
                stack: { type: "100%" }
            },
            legend: {
                visible: true
            },
            seriesDefaults: {
                type: "column"

            },
            series: [
                {
                    name: "A",
                    stack: "Chart",
                    data: [700, 750, 400]

                },
                 {
                     name: "B",
                     stack: "Chart",
                     data: [1000,800,200]

                 },
                 {
                     name: "C",
                     stack: "Chart",
                     data: [1000, 800,200]

                 },
                  {
                      name: "A",
                      visibleInLegend: false,
                      stack: "Chart1",
                      data: [750,500,250]

                  },
                 {
                     name: "B",
                     visibleInLegend: false,
                     stack: "Chart1",
                     data: [700,400,400]

                 },
                 {
                     name: "C",
                     visibleInLegend: false,
                     stack: "Chart1",
                     data: [750,500,250]

                 },

            ],
            seriesColors: ["rgb(214,186,114)", "rgb(197,200,203)", "rgb(170,115,80)"],

            valueAxis: {
             
                max: 5000,
                min: 0,
                labels: {
                    template: "#= kendo.format('{0:N0}', value ) # "
                },
                line: {
                    visible: true
                }
            },
            categoryAxis: {
                categories: [Category 1,Category 2,Category 3,Category 4],
                majorGridLines: {
                    visible: true
                },
                labels: {
                    template: labelTemplate
                }
            },
            tooltip: {
                visible: true,
                template: "#= series.name #: #= value #"
            }, pannable: {
                // lock: "y"
            },
            zoomable: {
                mousewheel: {
                    // lock: "y"
                },
                selection: {
                    // lock: "y"
                }
            }
        });

    }

 

 function labelTemplate(e) {
        var str = e.value;
        var len = str.length;
        var halflength = len / 2;
        var index = str.indexOf(" ", halflength);
        var rest = str.substring(0, index);
        var last = str.substring(index, len);
        return rest + "\n" + last;
    }

 

 

0
Boyan Dimitrov
Telerik team
answered on 22 May 2017, 03:51 PM

Hello Gunjan,

In general there is no built-in way to achieve the desired behavior. However I have implemented something similar to the desired scenario, but the column labels are position below the categories labels. Please refer to the http://dojo.telerik.com/AHIya example. 

I am afraid that there is no solution which will place the column (bar) labels at the top as shown in the attached image. 

Regards,
Boyan Dimitrov
Telerik by Progress
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Vamshi
Top achievements
Rank 1
answered on 24 Nov 2018, 03:42 PM
Hi,
Is there is a clean solution for this this without a workaround?
0
Vamshi
Top achievements
Rank 1
answered on 24 Nov 2018, 03:43 PM

Hi Gunjan,

Were you able to solve this issue ? If so, I would really appreciate if you can share the code here.

Thanks

Vamshi

0
Stamo Gochev
Telerik team
answered on 27 Nov 2018, 08:45 AM
Hi,

I want to clarify that there is a default chart functionality that provides a way to display labels for each category/bar. However, if you want to get a different appearance, you can check out how customizing the options for the labels can yield something similar to the expected final result, so technically this is not a "workaround", but rather a custom implementation depending on the exact project requirements. Still, if you want to suggest improvements regarding this, please post them in the Feedback Portal:

https://feedback.telerik.com/aspnet-mvc 

I want to add that (by design) a single category on the axis has only one label. If more than one is required, then an additional axis can be used to display the other information. Here is a modified version of the example from my colleague Boyan, which moves the second axis (the one with two labels for each category) above the main axis, which is what I suppose that you want to achieve:

https://dojo.telerik.com/ImuzOJet

If the rotation of the labels is still a requirement, then the "align: center" option should be set on the axis:

https://dojo.telerik.com/oWEciPiH

On the other hand, the alternative approach that was suggested by Boyan in a previous answer - using categoryAxis.labels.visual - is also an option that you can consider.

Regards,
Stamo Gochev
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
Chart
Asked by
Gunjan
Top achievements
Rank 1
Answers by
Stamo Gochev
Telerik team
Gunjan
Top achievements
Rank 1
Boyan Dimitrov
Telerik team
Vamshi
Top achievements
Rank 1
Share this question
or