How to make the Target Line a dotted Line?

4 posts, 1 answers
  1. Answer
    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 need the target line to be a dotted line.  Oh did I mention I'm using ICENUM to do the bullet chart on the phone. It's looking good.

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

     series: [
                        {   
                            target: {
                                color: "#444",
                                dashType: "dot",
                                line: {
                                  width: 1,
                                }
                            }    
                            
    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:   // Did I mention that the labels are not working for me?
                           {
                               visible: true,
                               format: "{0}",
                               font: "14px Arial",
                           },
                            target: {
                                color: "#444",
                                dashType: "dot",    
                                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
    2593 posts

    Posted 06 Jan 2014 Link to this post

    Hello Rodney,

    There is no a built-in option for this requirement in Kendo UI Bullet Chart. As a possible workaround I can suggest the following:
    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. Kendo UI is VS 2017 Ready
  4. Rodney
    Rodney avatar
    24 posts
    Member since:
    Jan 2011

    Posted 06 Jan 2014 Link to this post

    Thank you. Here is a JSFiddle of my solution if anyone else needs this.  

    http://jsfiddle.net/rodneyhickman/fWG9R/2/

    Is there a way to set the width of the target? I'd like the target line to be shorter. See my JSFiddle. 
  5. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2593 posts

    Posted 07 Jan 2014 Link to this post

    Hello Rodney,

    I am afraid this requirement is also not supported by Kendo UI Bullet Chart and there is no a workaround I can suggest. Please accept my apologies for the inconvenience caused.

    Regards,
    Iliana Nikolova
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top
Kendo UI is VS 2017 Ready