How to do Labels on the Vertical Bullet Chart?

7 posts, 0 answers
  1. Rodney
    Rodney avatar
    24 posts
    Member since:
    Jan 2011

    Posted 03 Jan 2014 Link to this post

    Marketing has specific design in mind for my bullet chart. I'm using a vertical Bullet Chart. I want Labels on the top like the Bar Graph.  Oh did I mention I'm using ICENUM to do the bullet chart on the phone. 

    I've tried to add the labels property found in the documentation;

     series: [
                        labels:
                       { 
                           visible: true,
                          format: "{0}",
                          font: "14px Arial",
                     },

    It's not working for me. 

    Here is my complete script: 

    $("#bar-chart").kendoChart({
                    theme: global.app.chartsTheme,
                    renderAs: "svg",
                    legend: {
                        position: "bottom"
                    },
                    seriesDefaults: {
                        type: "column"
                    },
                    series: [
                        {   
                            type: "verticalBullet",
                            color: "#d87635",
                            currentField: "score",
                            targetField: "average",
                            labels:
                           {
                               visible: true,
                               format: "{0}",
                               font: "14px Arial",
                           },
                            target: {
                                color: "#444",
                                dashType: "dot",    // I want a dotted line too. That isn't working either.
                                line: {
                                  width: 1,
                                }        
                            },                       
                            data: [
                               {
                                    score: 93.7,
                                    average: 65.2,                              
                                }, {
                                    score: 80.2,
                                    average: 22.2,
                                }, {
                                    score: 60.8,
                                    average: 35.2,
                                }, {    
                                    score: 82.1,
                                    average: 45.2,                                
                                }, {
                                    score: 74.2,
                                    average: 55.2,
                                }
                            ]
                        }
                    ],
                    categoryAxis: {
                        labels: { rotation: -45 },
                        categories: ["Sales & Contracting", "Implementation & Training", "Functionality & Upgrades", "Service & Support", "General"],
                        line: {
                            visible: false
                        },
                        color: "#444", 
                        axisCrossingValue: [0, 0, 100, 100]
                    },
                     tooltip: {
                        visible: false
                    }
                }).data("kendoChart");

    Any Help would be greatly appreciated. 
  2. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2621 posts

    Posted 06 Jan 2014 Link to this post

    Hi Rodney,

    At this point showing series labels for Kendo UI Bullet Chart is not supported and there is no a suitable workaround I can suggest. We will appreciate it if you submit this idea as a feature request at our UserVoice page - this way the community would be able to evaluate it and if the suggestion gains popularity we will consider its implementation for future releases.

    Regards,
    Iliana Nikolova
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Rodney
    Rodney avatar
    24 posts
    Member since:
    Jan 2011

    Posted 06 Jan 2014 Link to this post

    I suggested a new feature to 'Add support for Labels for Bullet Charts' In Kendo DataViz in the User Voice. http://uservoice.com/a/3r1Zp Vote this up.
  4. Nathan
    Nathan avatar
    2 posts
    Member since:
    Apr 2014

    Posted 27 Mar in reply to Rodney Link to this post

    Hi,

    Is there an option to add labels to bullet graphs yet?

     

  5. Preslav
    Admin
    Preslav avatar
    181 posts

    Posted 29 Mar Link to this post

    Hello Nathan,

    You can use the valueAxis.labels.format configuration option to apply the required formatting of the labels:

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

    Regards,
    Preslav
    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.
  6. Nathan
    Nathan avatar
    2 posts
    Member since:
    Apr 2014

    Posted 29 Mar in reply to Preslav Link to this post

    That's not what I'm after.  I have the value axis labels, that's fine but I want labels on the plot area for the data point value and that doesn't work for the bullet graph.  Works for all other types except that one.
  7. Preslav
    Admin
    Preslav avatar
    181 posts

    Posted 31 Mar Link to this post

    Hello Nathan,

    Thank you for elaborating on the subject.

    Due to lack of interest in such functionality from the community, we did not include it in our immediate plans for development. You can vote for the feature in our feedback portal:

    http://kendoui-feedback.telerik.com/forums/127393-kendo-ui-feedback/suggestions/5313895-add-support-for-labels-for-bullet-charts

    Once it gather enough traction, we will consider including it in our roadmap.

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