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

How to make the Target Line a dotted Line?

3 Answers 183 Views
BulletChart
This is a migrated thread and some comments may be shown as answers.
Rodney
Top achievements
Rank 2
Rodney asked on 03 Jan 2014, 06:47 PM
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. 

3 Answers, 1 is accepted

Sort by
0
Iliana Nikolova
Telerik team
answered on 06 Jan 2014, 08:58 AM
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!
0
Rodney
Top achievements
Rank 2
answered on 06 Jan 2014, 04:38 PM
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. 
0
Iliana Nikolova
Telerik team
answered on 07 Jan 2014, 08:01 AM
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!
Tags
BulletChart
Asked by
Rodney
Top achievements
Rank 2
Answers by
Iliana Nikolova
Telerik team
Rodney
Top achievements
Rank 2
Share this question
or