How to make the Target Line a dotted Line?

[Rodney]

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. 

[Iliana Dyankova]

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:

• set series.target.line.width 0;
• set series.target.border.dashType dot. Keep in mind that in order to display border you should set series.target.border.width too.

Regards,
Iliana Nikolova
Telerik

[Rodney]

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. 

[Iliana Dyankova]

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