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

9 posts, 0 answers
  1. Gunjan
    Gunjan avatar
    4 posts
    Member since:
    Dec 2016

    Posted 11 Apr 2017 Link to this post

    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.

  2. Stamo Gochev
    Admin
    Stamo Gochev avatar
    208 posts

    Posted 13 Apr 2017 Link to this post

    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.
  3. Gunjan
    Gunjan avatar
    4 posts
    Member since:
    Dec 2016

    Posted 14 Apr 2017 in reply to Stamo Gochev Link to this post

    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

     

     

  4. Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    2061 posts

    Posted 18 Apr 2017 Link to this post

    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.
  5. Gunjan
    Gunjan avatar
    4 posts
    Member since:
    Dec 2016

    Posted 18 May 2017 in reply to Boyan Dimitrov Link to this post

     

    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;
        }

     

     

  6. Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    2061 posts

    Posted 22 May 2017 Link to this post

    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.
  7. Vamshi
    Vamshi avatar
    3 posts
    Member since:
    Nov 2018

    Posted 24 Nov 2018 in reply to Boyan Dimitrov Link to this post

    Hi,
    Is there is a clean solution for this this without a workaround?
  8. Vamshi
    Vamshi avatar
    3 posts
    Member since:
    Nov 2018

    Posted 24 Nov 2018 in reply to Gunjan Link to this post

    Hi Gunjan,

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

    Thanks

    Vamshi

  9. Stamo Gochev
    Admin
    Stamo Gochev avatar
    208 posts

    Posted 27 Nov 2018 Link to this post

    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.
Back to Top