Custom Design for Bullet graph.

  • html
  • <ej-bulletgraph id="bullet1">             
    </ej-bulletgraph>

    Example

    Requires

    • module:jQuery.js

    • module:ej.core.js

    • module:ej.data.js

    • module:ej.bulletgraph.js

    Members

    applyRangeStrokeToLabels boolean

    Toggles the visibility of the range stroke color of the labels.

    Default Value

    • false

    Example

  • html
  • <ej-bulletgraph id="bullet1" [applyRangeStrokeToLabels]="true">             
    </ej-bulletgraph>

    applyRangeStrokeToTicks boolean

    Toggles the visibility of the range stroke color of the ticks.

    Default Value

    • false

    Example

  • html
  • <ej-bulletgraph id="bullet1" [applyRangeStrokeToTicks]="true">             
    </ej-bulletgraph>

    captionSettings object

    Contains property to customize the caption in bullet graph.

    captionSettings.enableTrim boolean

    Specifies whether trim the labels will be true or false.

    Default Value

    • true

    Example

  • ts
  • this.caption= {
        enableTrim: true,         
    };
  • html
  • <ej-bulletgraph id="bullet1"  [captionSettings]="caption">                   
       </ej-bulletgraph>

    captionSettings.font object

    Contains property to customize the font of caption.

    captionSettings.font.color string

    Specifies the color of the text in caption.

    Default Value

    • null

    Example

  • ts
  • this.caption = {   
        font: {
            color: 'green',        
        }   
    };
  • html
  • <ej-bulletgraph id="bullet1"  [captionSettings]="caption">         
              
    </ej-bulletgraph>

    captionSettings.font.fontFamily string

    Specifies the fontFamily of caption. Caption text render with this fontFamily

    Default Value

    • “Segoe UI”

    Example

  • ts
  • this.caption = {   
        font: {
            fontFamily: 'Algerian',        
        }   
    };
  • html
  • <ej-bulletgraph id="bullet1"  [captionSettings]="caption">         
              
    </ej-bulletgraph>

    captionSettings.font.fontStyle enum

    Specifies the fontStyle of caption

    Name Type Description
    Normal string The texts are displayed in the default format
    Italic string The texts are displayed in italic format
    Oblique string The texts are displayed in the oblique format

    Specifies the fontStyle of caption. Caption text render with this fontStyle. See FontStyle

    Default Value

    • “Normal”

    Example

  • ts
  • this.caption = {   
        font: {
            fontStyle: 'italic',        
        }   
    };
  • html
  • <ej-bulletgraph id="bullet1"  [captionSettings]="caption">         
              
    </ej-bulletgraph>

    captionSettings.font.fontWeight enum

    Specifies the fontWeight of caption

    Name Type Description
    Normal string The texts are displayed in the default manner
    Bold string The texts are displayed in the Bold
    Bolder string The texts are displayed with increased boldness compared to the bold option
    Lighter string The texts are displayed with the decreased lightness

    Specifies the fontWeight of caption. Caption text render with this fontWeight. See FontWeight

    Default Value

    • “regular”

    Example

  • ts
  • this.caption = {   
        font: {
            fontWeight: 'lighter',        
        }   
    };
  • html
  • <ej-bulletgraph id="bullet1"  [captionSettings]="caption">         
              
    </ej-bulletgraph>

    captionSettings.font.opacity number

    Specifies the opacity of caption. Caption text render with this opacity.

    Default Value

    • 1

    Example

  • ts
  • this.caption = {   
        font: {
            opacity:0.5,        
        }   
    };
  • html
  • <ej-bulletgraph id="bullet1"  [captionSettings]="caption">         
              
    </ej-bulletgraph>

    captionSettings.font.size string

    Specifies the size of caption. Caption text render with this size

    Default Value

    • “12px”

    Example

  • ts
  • this.caption = {   
        font: {
            size:'14px',        
        }   
    };
  • html
  • <ej-bulletgraph id="bullet1"  [captionSettings]="caption">         
              
    </ej-bulletgraph>

    captionSettings.indicator object

    Contains property to customize the indicator.

    captionSettings.indicator.font object

    Contains property to customize the font of indicator.

    captionSettings.indicator.font.color string

    Specifies the color of the indicator’s text.

    Default Value

    • null

    Example

  • ts
  • this.caption = {
        indicator: {               
            font: {
                color:'green',            
            },
        }
    };
  • html
  • <ej-bulletgraph id="bullet1" [captionSettings]="caption">         
              
    </ej-bulletgraph>

    captionSettings.indicator.font.fontFamily string

    Specifies the fontFamily of indicator. Indicator text render with this fontFamily.

    Default Value

    • “Segoe UI”

    Example

  • ts
  • this.caption = {
        indicator: {               
            font: {
                fontFamily:'Algerian',            
            },
        }
    };
  • html
  • <ej-bulletgraph id="bullet1" [captionSettings]="caption">         
              
    </ej-bulletgraph>

    captionSettings.indicator.font.fontStyle enum

    Specifies the fontStyle of indicator. Indicator text render with this fontStyle. See FontStyle

    Default Value

    • “Normal”

    Example

  • ts
  • this.caption = {
        indicator: {               
            font: {
                fontStyle :'italic',            
            },
        }
    };
  • html
  • <ej-bulletgraph id="bullet1" [captionSettings]="caption">         
              
    </ej-bulletgraph>

    captionSettings.indicator.font.fontWeight enum

    Specifies the fontWeight of indicator. Indicator text render with this fontWeight. See FontWeight

    Default Value

    • “regular”

    Example

  • ts
  • this.caption = {
        indicator: {               
            font: {
                fontWeight :'lighter',            
            },
        }
    };
  • html
  • <ej-bulletgraph id="bullet1" [captionSettings]="caption">         
              
    </ej-bulletgraph>

    captionSettings.indicator.font.opacity number

    Specifies the opacity of indicator text. Indicator text render with this Opacity.

    Default Value

    • 1

    Example

  • ts
  • this.caption = {
        indicator: {               
            font: {
                opacity : 0.5,            
            },
        }
    };
  • html
  • <ej-bulletgraph id="bullet1" [captionSettings]="caption">         
              
    </ej-bulletgraph>

    captionSettings.indicator.font.size string

    Specifies the size of indicator. Indicator text render with this size.

    Default Value

    • “12px”

    Example

  • ts
  • this.caption = {
        indicator: {               
            font: {
                size :'14px',            
            },
        }
    };
  • html
  • <ej-bulletgraph id="bullet1" [captionSettings]="caption">         
              
    </ej-bulletgraph>

    captionSettings.indicator.location object

    Contains property to customize the location of indicator.

    captionSettings.indicator.location.x number

    Specifies the horizontal position of the indicator.

    Default Value

    • 10

    Example

  • ts
  • this.caption = {
        indicator: {               
           location: { 
               x: 12 
            },
        }
    };
  • html
  • <ej-bulletgraph id="bullet1" [captionSettings]="caption">         
              
    </ej-bulletgraph>

    captionSettings.indicator.location.y number

    Specifies the vertical position of the indicator.

    Default Value

    • 60

    Example

  • ts
  • this.caption = {
        indicator: {               
           location: { 
               y: 60 
            },
        }
    };
  • html
  • <ej-bulletgraph id="bullet1" [captionSettings]="caption">         
              
    </ej-bulletgraph>

    captionSettings.indicator.padding number

    Specifies the padding to be applied when text position is used.

    Default Value

    • 2

    Example

  • ts
  • this.caption = {
        indicator: {               
           padding: 5
        }
    };
  • html
  • <ej-bulletgraph id="bullet1" [captionSettings]="caption">         
              
    </ej-bulletgraph>

    captionSettings.indicator.symbol object

    Contains property to customize the symbol of indicator.

    captionSettings.indicator.symbol.border object

    Contains property to customize the border of indicator symbol.

    captionSettings.indicator.symbol.border.color string

    Specifies the border color of indicator symbol.

    Default Value

    • null

    Example

  • ts
  • this.caption = {
        indicator: {               
           symbol:{
               border:{
                   color:'green'
               }
           }
        }
    };
  • html
  • <ej-bulletgraph id="bullet1" [captionSettings]="caption">         
              
    </ej-bulletgraph>

    captionSettings.indicator.symbol.border.width number

    Specifies the border width of indicator symbol.

    Default Value

    • 1

    Example

  • ts
  • this.caption = {
        indicator: {               
           symbol:{
               border:{
                   width:2
               }
           }
        }
    };
  • html
  • <ej-bulletgraph id="bullet1" [captionSettings]="caption">         
              
    </ej-bulletgraph>

    captionSettings.indicator.symbol.color string

    Specifies the color of indicator symbol.

    Default Value

    • null

    Example

  • ts
  • this.caption = {
        indicator: {               
           symbol:{
               color:'green'
           }
        }
    };
  • html
  • <ej-bulletgraph id="bullet1" [captionSettings]="caption">         
              
    </ej-bulletgraph>

    captionSettings.indicator.symbol.imageURL string

    Specifies the URL of image that represents indicator symbol.

    Default Value

    • ””

    Example

  • ts
  • this.caption = {
        indicator: {               
           symbol:{
             imageURL :'../BulletIndicator.png'
           }
        }
    };
  • html
  • <ej-bulletgraph id="bullet1" [captionSettings]="caption">         
              
    </ej-bulletgraph>

    captionSettings.indicator.symbol.opacity number

    Specifies the opacity of indicator symbol.

    Default Value

    • 1

    Example

  • ts
  • this.caption = {
        indicator: {               
           symbol:{
             opacity:0.5
           }
        }
    };
  • html
  • <ej-bulletgraph id="bullet1" [captionSettings]="caption">         
              
    </ej-bulletgraph>

    captionSettings.indicator.symbol.shape string

    Specifies the shape of indicator symbol.

    Default Value

    • ””

    Example

  • ts
  • this.caption = {
        indicator: {               
           symbol:{
             shape:'triangle'
           }
        }
    };
  • html
  • <ej-bulletgraph id="bullet1" [captionSettings]="caption">         
              
    </ej-bulletgraph>

    captionSettings.indicator.symbol.size object

    Contains property to customize the size of indicator symbol.

    captionSettings.indicator.symbol.size.height number

    Specifies the height of indicator symbol.

    Default Value

    • 10

    Example

  • ts
  • this.caption = {
        indicator: {               
           symbol:{
                size:{
                    height:10
                }
            }
        }
    };
  • html
  • <ej-bulletgraph id="bullet1" [captionSettings]="caption">         
              
    </ej-bulletgraph>

    captionSettings.indicator.symbol.size.width number

    Specifies the width of indicator symbol.

    Default Value

    • 10

    Example

  • ts
  • this.caption = {
        indicator: {               
           symbol:{
                size:{
                    width:10
                }
            }
        }
    };
  • html
  • <ej-bulletgraph id="bullet1" [captionSettings]="caption">         
              
    </ej-bulletgraph>

    captionSettings.indicator.text string

    Specifies the text to be displayed as indicator text. By default difference between current value and target will be displayed

    Default Value

    • ””

    Example

  • ts
  • this.caption = {
        indicator: {               
           text:'Power Production'
        }
    };
  • html
  • <ej-bulletgraph id="bullet1" [captionSettings]="caption">         
              
    </ej-bulletgraph>

    captionSettings.indicator.textAlignment enum

    Specifies the alignment of indicator with respect to scale based on text position

    Name Type Description
    Near string The text is aligned near to the scale
    Far string The text is aligned far from the scale
    Center string The text is aligned center of the scale

    Specifies the alignment of indicator with respect to scale based on text position. Alignment will not be applied for float position.

    Default Value

    • ‘Near’

    Example

  • ts
  • this.caption = {
        indicator: {               
           textAlignment:'Far'
        }
    };
  • html
  • <ej-bulletgraph id="bullet1" [captionSettings]="caption">         
              
    </ej-bulletgraph>

    captionSettings.indicator.textAnchor enum

    Specifies where indicator text should be anchored when indicator overlaps with other caption group text. Text will be anchored when overlapping caption group text are at same position. Anchoring is not applicable for float position.

    Name Type Description
    Start string The Start is used to anchor the text from beginning
    Middle string The Middle is used to anchor the text from the center
    End string The End is used to anchor the text from the end

    Specifies where indicator text should be anchored when indicator overlaps with other caption group text. Text will be anchored when overlapping caption group text are at same position. Anchoring is not applicable for float position.

    Default Value

    • ‘start’

    Example

  • ts
  • this.caption = {
        indicator: {               
          textAnchor:'end'
        }
    };
  • html
  • <ej-bulletgraph id="bullet1" [captionSettings]="caption">         
              
    </ej-bulletgraph>

    captionSettings.indicator.textAngle number

    indicator text render in the specified angle.

    Default Value

    • 0

    Example

  • ts
  • this.caption = {
        indicator: {               
          textAngle :10
        }
    };
  • html
  • <ej-bulletgraph id="bullet1" [captionSettings]="caption">         
              
    </ej-bulletgraph>

    captionSettings.indicator.textPosition enum

    Specifies where indicator should be placed

    Name Type Description
    Top string The texts are positioned on the top of the quantitative scales
    Right string The texts are positioned to the right of the quantitative scales
    Left string The texts are positioned to the left of the quantitative scales
    Bottom string The texts are positioned to the bottom of the quantitative scales
    Float string The text can be placed at any location using the float property

    Specifies where indicator should be placed.

    Default Value

    • ‘float’

    Example

  • ts
  • this.caption = {
        indicator: {               
          textPosition :'Top'
        }
    };
  • html
  • <ej-bulletgraph id="bullet1" [captionSettings]="caption">         
              
    </ej-bulletgraph>

    captionSettings.indicator.textSpacing number

    Specifies the space between indicator symbol and text.

    Default Value

    • 3

    Example

  • ts
  • this.caption = {
        indicator: {               
          textSpacing :10
        }
    };
  • html
  • <ej-bulletgraph id="bullet1" [captionSettings]="caption">         
              
    </ej-bulletgraph>

    captionSettings.indicator.visible boolean

    Specifies whether indicator will be visible or not.

    Default Value

    • false

    Example

  • ts
  • this.caption = {
        indicator: {               
          visible:true
        }
    };
  • html
  • <ej-bulletgraph id="bullet1" [captionSettings]="caption">         
              
    </ej-bulletgraph>

    captionSettings.location object

    Contains property to customize the location.

    captionSettings.location.x number

    Specifies the position in horizontal direction

    Default Value

    • 17

    Example

  • ts
  • this.caption = {
        location:{
            x:15
        }
    };
  • html
  • <ej-bulletgraph id="bullet1" [captionSettings]="caption">         
              
    </ej-bulletgraph>

    captionSettings.location.y number

    Specifies the position in horizontal direction

    Default Value

    • 30

    Example

  • ts
  • this.caption = {
        location:{
            y:15
        }
    };
  • html
  • <ej-bulletgraph id="bullet1" [captionSettings]="caption">         
              
    </ej-bulletgraph>

    captionSettings.padding number

    Specifies the padding to be applied when text position is used.

    Default Value

    • 5

    Example

  • ts
  • this.caption = {
       padding:2
    };
  • html
  • <ej-bulletgraph id="bullet1" [captionSettings]="caption">         
              
    </ej-bulletgraph>

    captionSettings.subTitle object

    Contains property to customize the subtitle.

    captionSettings.subTitle.font object

    Contains property to customize the font of subtitle.

    captionSettings.subTitle.font.color string

    Specifies the color of the subtitle’s text.

    Default Value

    • null

    Example

  • ts
  • this.caption = {
       subTitle: {           
            font: {
                color:'green',                
            }
        } 
    };
  • html
  • <ej-bulletgraph id="bullet1" [captionSettings]="caption">         
              
    </ej-bulletgraph>

    captionSettings.subTitle.font.fontFamily string

    Specifies the fontFamily of subtitle. Subtitle text render with this fontFamily.

    Default Value

    • “Segoe UI”

    Example

  • ts
  • this.caption = {
       subTitle: {           
            font: {
                fontFamily:'Algerian',                
            }
        } 
    };
  • html
  • <ej-bulletgraph id="bullet1" [captionSettings]="caption">         
              
    </ej-bulletgraph>

    captionSettings.subTitle.font.fontStyle enum

    Specifies the fontStyle of subtitle. Subtitle text render with this fontStyle. See FontStyle

    Default Value

    • “Normal”

    Example

  • ts
  • this.caption = {
       subTitle: {           
            font: {
                fontStyle :'italic',                
            }
        } 
    };
  • html
  • <ej-bulletgraph id="bullet1" [captionSettings]="caption">         
              
    </ej-bulletgraph>

    captionSettings.subTitle.font.fontWeight enum

    Specifies the fontWeight of subtitle. Subtitle text render with this fontWeight. See FontWeight

    Default Value

    • “regular”

    Example

  • ts
  • this.caption = {
       subTitle: {           
            font: {
                fontWeight :'lighter',                
            }
        } 
    };
  • html
  • <ej-bulletgraph id="bullet1" [captionSettings]="caption">         
              
    </ej-bulletgraph>

    captionSettings.subTitle.font.opacity number

    Specifies the opacity of subtitle. Subtitle text render with this opacity.

    Default Value

    • 1

    Example

  • ts
  • this.caption = {
       subTitle: {           
            font: {
                opacity :0.5,                
            }
        } 
    };
  • html
  • <ej-bulletgraph id="bullet1" [captionSettings]="caption">         
              
    </ej-bulletgraph>

    captionSettings.subTitle.font.size string

    Specifies the size of subtitle. Subtitle text render with this size.

    Default Value

    • “12px”

    Example

  • ts
  • this.caption = {
       subTitle: {           
            font: {
                size :'14px',                
            }
        } 
    };
  • html
  • <ej-bulletgraph id="bullet1" [captionSettings]="caption">         
              
    </ej-bulletgraph>

    captionSettings.subTitle.location object

    Contains property to customize the location of subtitle.

    captionSettings.subTitle.location.x number

    Specifies the horizontal position of the subtitle.

    Default Value

    • 10

    Example

  • ts
  • this.caption = {
       subTitle: {           
            location:{
                x:12
            }
        } 
    };
  • html
  • <ej-bulletgraph id="bullet1" [captionSettings]="caption">         
              
    </ej-bulletgraph>

    captionSettings.subTitle.location.y number

    Specifies the vertical position of the subtitle.

    Default Value

    • 45

    Example

  • ts
  • this.caption = {
       subTitle: {           
            location:{
                y:50
            }
        } 
    };
  • html
  • <ej-bulletgraph id="bullet1" [captionSettings]="caption">         
              
    </ej-bulletgraph>

    captionSettings.subTitle.padding number

    Specifies the padding to be applied when text position is used.

    Default Value

    • 5

    Example

  • ts
  • this.caption = {
       subTitle: {           
            padding:8
        } 
    };
  • html
  • <ej-bulletgraph id="bullet1" [captionSettings]="caption">         
              
    </ej-bulletgraph>

    captionSettings.subTitle.text string

    Specifies the text to be displayed as subtitle.

    Default Value

    • ””

    Example

  • ts
  • this.caption = {
       subTitle: {           
           text:'Power Production'
        } 
    };
  • html
  • <ej-bulletgraph id="bullet1" [captionSettings]="caption">         
              
    </ej-bulletgraph>

    captionSettings.subTitle.textAlignment enum

    Specifies the alignment of sub title text with respect to scale. Alignment will not be applied in float position.

    Default Value

    • ‘Near’

    Example

  • ts
  • this.caption = {
       subTitle: {           
           textAlignment:'Far'
        } 
    };
  • html
  • <ej-bulletgraph id="bullet1" [captionSettings]="caption">         
              
    </ej-bulletgraph>

    captionSettings.subTitle.textAnchor enum

    Specifies where subtitle text should be anchored when sub title text overlaps with other caption group text. Text will be anchored when overlapping caption group text are at same position. Anchoring is not applicable for float position.

    Default Value

    • ‘start’

    Example

  • ts
  • this.caption = {
       subTitle: {           
           textAnchor:'end'
        } 
    };
  • html
  • <ej-bulletgraph id="bullet1" [captionSettings]="caption">         
              
    </ej-bulletgraph>

    captionSettings.subTitle.textAngle number

    Subtitle render in the specified angle.

    Default Value

    • 0

    Example

  • ts
  • this.caption = {
       subTitle: {           
           textAngle:10
        } 
    };
  • html
  • <ej-bulletgraph id="bullet1" [captionSettings]="caption">         
              
    </ej-bulletgraph>

    captionSettings.subTitle.textPosition enum

    Specifies where sub title text should be placed.

    Default Value

    • ‘float’

    Example

  • ts
  • this.caption = {
       subTitle: {           
          textPosition:'Right'
        } 
    };
  • html
  • <ej-bulletgraph id="bullet1" [captionSettings]="caption">         
              
    </ej-bulletgraph>

    captionSettings.text string

    Specifies the text to be displayed on bullet graph.

    Default Value

    • ””

    Example

  • ts
  • this.caption = {
       text:'Production'
    };
  • html
  • <ej-bulletgraph id="bullet1" [captionSettings]="caption">         
              
    </ej-bulletgraph>

    captionSettings.textAlignment enum

    Specifies the alignment of caption text with respect to scale. This property will not be applied when text position is float.

    Default Value

    • ‘Near’

    Example

  • ts
  • this.caption = {             
          textAlignment:'Center'    
    };
  • html
  • <ej-bulletgraph id="bullet1" [captionSettings]="caption">         
              
    </ej-bulletgraph>

    captionSettings.textAnchor enum

    Specifies caption text anchoring when caption text overlaps with other caption group text. Text will be anchored when overlapping caption group text are at same position. Anchoring is not applicable for float position.

    Default Value

    • ‘start’

    Example

  • ts
  • this.caption = {             
          textAnchor:'middle'    
    };
  • html
  • <ej-bulletgraph id="bullet1" [captionSettings]="caption">         
              
    </ej-bulletgraph>

    captionSettings.textAngle number

    Specifies the angel in which the caption is rendered.

    Default Value

    • 0

    Example

  • ts
  • this.caption = {          
          textAngle:5
    };
  • html
  • <ej-bulletgraph id="bullet1" [captionSettings]="caption">         
              
    </ej-bulletgraph>

    captionSettings.textPosition enum

    Specifies how caption text should be placed.

    Default Value

    • ‘float’

    Example

  • ts
  • this.caption = {           
          textPosition:'Top'    
    };
  • html
  • <ej-bulletgraph id="bullet1" [captionSettings]="caption">         
              
    </ej-bulletgraph>

    comparativeMeasureValue number

    Comparative measure bar in bullet graph render till the specified value.

    Default Value

    • 0

    Example

  • html
  • <ej-bulletgraph id="bullet1" [comparativeMeasureValue]=50>         
    </ej-bulletgraph>

    enableAnimation boolean

    Toggles the animation of bullet graph.

    Default Value

    • true

    Example

  • html
  • <ej-bulletgraph id="bullet1" [enableAnimation]="true">         
    </ej-bulletgraph>

    flowDirection enum

    Specifies the direction of flow in bullet graph. Neither it may be backward nor forward.

    Name Type Description
    Forward string The BulletGraph is rendered from left to right
    Backward string The BulletGraph is rendered from right to left

    Specifies the direction of flow in bullet graph. Neither it may be backward nor forward.

    Default Value

    • “forward”

    Example

  • html
  • <ej-bulletgraph id="bullet1" flowDirection="backward">                   
    </ej-bulletgraph>

    height number

    Specifies the height of the bullet graph.

    Default Value

    • 90

    Example

  • html
  • <ej-bulletgraph id="bullet1" [height]=100>                   
    </ej-bulletgraph>

    isResponsive boolean

    Sets a value whether to make the bullet graph responsive on resize.

    Default Value

    • true

    Example

  • html
  • <ej-bulletgraph id="bullet1" [isResponsive]="false">                   
    </ej-bulletgraph>

    orientation enum

    Bullet graph will render in the specified orientation.

    Name Type Description
    Horizontal string The BulletGraph is oriented in horizontal direction
    Vertical string The BulletGraph is oriented in vertical direction

    Bullet graph will render in the specified orientation.

    Default Value

    • “horizontal”

    Example

  • html
  • <ej-bulletgraph id="bullet1" orientation="vertical">                   
    </ej-bulletgraph>

    qualitativeRanges array

    Contains property to customize the qualitative ranges.

    qualitativeRanges.rangeEnd number

    Specifies the ending range to which the qualitative ranges will render.

    Default Value

    • 3

    Example

  • html
  • <ej-bulletgraph id="bullet1">       
         <e-qualitativeranges>
             <e-qualitativerange rangeEnd="4.5"></e-qualitativerange>         
         </e-qualitativeranges>        
    </ej-bulletgraph>

    qualitativeRanges.rangeOpacity number

    Specifies the opacity for the qualitative ranges.

    Default Value

    • 1

    Example

  • html
  • <ej-bulletgraph id="bullet1">       
         <e-qualitativeranges>
             <e-qualitativerange [rangeOpacity]=0.5></e-qualitativerange>         
         </e-qualitativeranges>        
    </ej-bulletgraph>

    qualitativeRanges.rangeStroke string

    Specifies the stroke for the qualitative ranges.

    Default Value

    • null

    Example

  • html
  • <ej-bulletgraph id="bullet1">       
         <e-qualitativeranges>
             <e-qualitativerange rangeStroke="darkred"></e-qualitativerange>         
         </e-qualitativeranges>        
    </ej-bulletgraph>

    qualitativeRangeSize number

    Size of the qualitative range depends up on the specified value.

    Default Value

    • 32

    Example

  • html
  • <ej-bulletgraph id="bullet1" [qualitativeRangeSize]="35">                 
    </ej-bulletgraph>

    quantitativeScaleLength number

    Length of the quantitative range depends up on the specified value.

    Default Value

    • 475

    Example

  • html
  • <ej-bulletgraph id="bullet1" [quantitativeScaleLength]="500">                 
    </ej-bulletgraph>

    quantitativeScaleSettings object

    Contains all the properties to customize quantitative scale.

    quantitativeScaleSettings.comparativeMeasureSettings object

    Contains property to customize the comparative measure.

    quantitativeScaleSettings.comparativeMeasureSettings.stroke number

    Specifies the stroke of the comparative measure.

    Default Value

    • null

    Example

  • ts
  • this.quantitativeScale = {
        comparativeMeasureSettings: {
            stroke:'green'
        }
    };
  • html
  • <ej-bulletgraph id="bullet1" [quantitativeScaleSettings]="quantitativeScale">                
    </ej-bulletgraph>

    quantitativeScaleSettings.comparativeMeasureSettings.width number

    Specifies the width of the comparative measure.

    Default Value

    • 5

    Example

  • ts
  • this.quantitativeScale = {
        comparativeMeasureSettings: {
            width:6
        }
    };
  • html
  • <ej-bulletgraph id="bullet1" [quantitativeScaleSettings]="quantitativeScale">                
    </ej-bulletgraph>

    quantitativeScaleSettings.featuredMeasureSettings object

    Contains property to customize the featured measure.

    quantitativeScaleSettings.featuredMeasureSettings.stroke number

    Specifies the Stroke of the featured measure in bullet graph.

    Default Value

    • null

    Example

  • ts
  • this.quantitativeScale = {
        featureMeasureSettings: {
            stroke:'green'
        }
    };
  • html
  • <ej-bulletgraph id="bullet1" [quantitativeScaleSettings]="quantitativeScale">                
    </ej-bulletgraph>

    quantitativeScaleSettings.featuredMeasureSettings.width number

    Specifies the width of the featured measure in bullet graph.

    Default Value

    • 2

    Example

  • ts
  • this.quantitativeScale = {
        featureMeasureSettings: {
            width:3
        }
    };
  • html
  • <ej-bulletgraph id="bullet1" [quantitativeScaleSettings]="quantitativeScale">                
    </ej-bulletgraph>

    quantitativeScaleSettings.featureMeasures array

    Contains property to customize the featured measure.

    quantitativeScaleSettings.featureMeasures.category string

    Specifies the category of feature measure.

    Default Value

    • null

    Example

  • ts
  • this.quantitativeScale = {
        featureMeasures: [
            { category: 2010 },        
        ]
    };
  • html
  • <ej-bulletgraph id="bullet1" [quantitativeScaleSettings]="quantitativeScale">               
    </ej-bulletgraph>

    quantitativeScaleSettings.featureMeasures.comparativeMeasureValue number

    Comparative measure render till the specified value.

    Default Value

    • null

    Example

  • ts
  • this.quantitativeScale = {
        featureMeasures: [
            { comparativeMeasureValue: 3 },        
        ]
    };
  • html
  • <ej-bulletgraph id="bullet1" [quantitativeScaleSettings]="quantitativeScale">               
    </ej-bulletgraph>

    quantitativeScaleSettings.featureMeasures.value number

    Feature measure render till the specified value.

    Default Value

    • null

    Example

  • ts
  • this.quantitativeScale = {
        featureMeasures: [
            { value: 3 },        
        ]
    };
  • html
  • <ej-bulletgraph id="bullet1" [quantitativeScaleSettings]="quantitativeScale">               
    </ej-bulletgraph>

    quantitativeScaleSettings.fields object

    Contains property to customize the fields.

    quantitativeScaleSettings.fields.category string

    Specifies the category of the bullet graph.

    Default Value

    • null

    Example

  • ts
  • this.quantitativeScale = {
        fields: {
             category: 'ProductId',        
        }
    };
  • html
  • <ej-bulletgraph id="bullet1" [quantitativeScaleSettings]="quantitativeScale">               
    </ej-bulletgraph>

    quantitativeScaleSettings.fields.comparativeMeasure string

    Comparative measure render based on the values in the specified field.

    Default Value

    • null

    Example

  • ts
  • this.quantitativeScale = {
        fields: {
             comparativeMeasure : 5,        
        }
    };
  • html
  • <ej-bulletgraph id="bullet1" [quantitativeScaleSettings]="quantitativeScale">               
    </ej-bulletgraph>

    quantitativeScaleSettings.fields.dataSource object

    Specifies the dataSource for the bullet graph.

    Default Value

    • null

    Example

  • ts
  • this.quantitativeScale = {
        fields: {
             dataSource: data1 ,        
        }
    };
  • html
  • <ej-bulletgraph id="bullet1" [quantitativeScaleSettings]="quantitativeScale">               
    </ej-bulletgraph>

    quantitativeScaleSettings.fields.featureMeasures string

    Feature measure render based on the values in the specified field.

    Default Value

    • null

    Example

  • ts
  • this.quantitativeScale = {
        fields: {
             featureMeasures: 'UnitPrice',        
        }
    };
  • html
  • <ej-bulletgraph id="bullet1" [quantitativeScaleSettings]="quantitativeScale">               
    </ej-bulletgraph>

    quantitativeScaleSettings.fields.query string

    Specifies the query for fetching the values form data source to render the bullet graph.

    Default Value

    • null

    quantitativeScaleSettings.fields.tableName string

    Specifies the name of the table.

    Default Value

    • null

    Example

  • ts
  • this.quantitativeScale = {
        fields: {
             tableName: 'Product',        
        }
    };
  • html
  • <ej-bulletgraph id="bullet1" [quantitativeScaleSettings]="quantitativeScale">               
    </ej-bulletgraph>

    quantitativeScaleSettings.interval number

    Specifies the interval for the Graph.

    Default Value

    • 1

    Example

  • ts
  • this.quantitativeScale = {
       interval:2
    };
  • html
  • <ej-bulletgraph id="bullet1" [quantitativeScaleSettings]="quantitativeScale">               
    </ej-bulletgraph>

    quantitativeScaleSettings.labelSettings object

    Contains property to customize the labels.

    quantitativeScaleSettings.labelSettings.font object

    Contains property to customize the font of the labels in bullet graph.

    quantitativeScaleSettings.labelSettings.font.fontFamily string

    Specifies the fontFamily of labels in bullet graph. Labels render with this fontFamily.

    Default Value

    • “Segoe UI”

    Example

  • ts
  • this.quatitativeScale = {
        labelSettings:{
            font:{
                fontFamily:'Algerian'
            }
        }
    };
  • html
  • <ej-bulletgraph id="bullet1" [quantitativeScaleSettings]="quatitativeScale">               
    </ej-bulletgraph>

    quantitativeScaleSettings.labelSettings.font.fontStyle enum

    Specifies the fontStyle of labels in bullet graph. Labels render with this fontStyle. See FontStyle

    Default Value

    • “Normal”

    Example

  • ts
  • this.quatitativeScale = {
        labelSettings:{
            font:{
                fontStyle:'italic'
            }
        }
    };
  • html
  • <ej-bulletgraph id="bullet1" [quantitativeScaleSettings]="quatitativeScale">  
    </ej-bulletgraph>

    quantitativeScaleSettings.labelSettings.font.fontWeight enum

    Specifies the fontWeight of labels in bullet graph. Labels render with this fontWeight. See FontWeight

    Default Value

    • “regular”

    Example

  • ts
  • this.quatitativeScale = {
        labelSettings:{
            font:{
                fontWeight:'lighter'
            }
        }
    };
  • html
  • <ej-bulletgraph id="bullet1" [quantitativeScaleSettings]="quatitativeScale">
    </ej-bulletgraph>

    quantitativeScaleSettings.labelSettings.font.opacity number

    Specifies the opacity of labels in bullet graph. Labels render with this opacity

    Default Value

    • 1

    Example

  • ts
  • this.quatitativeScale = {
        labelSettings:{
            font:{
                opacity:0.5
            }
        }
    };
  • html
  • <ej-bulletgraph id="bullet1" [quantitativeScaleSettings]="quatitativeScale">
    </ej-bulletgraph>

    quantitativeScaleSettings.labelSettings.labelPlacement enum

    Specifies the placement of labels in bullet graph scale.

    Name Type Description
    Inside string The Quantitative Scale Labels are placed inside the scale
    Outside string The Quantitative Scale labels are placed outside the scale

    Specifies the placement of labels in bullet graph scale.

    Default Value

    • outside

    Example

  • ts
  • this.quatitativeScale = {
        labelSettings:{
           labelPlacement:'inside'
        }
    };
  • html
  • <ej-bulletgraph id="bullet1" [quantitativeScaleSettings]="quatitativeScale">
    </ej-bulletgraph>

    quantitativeScaleSettings.labelSettings.labelPrefix string

    Specifies the prefix to be added with labels in bullet graph.

    Default Value

    • Empty string

    Example

  • ts
  • this.quatitativeScale = {
        labelSettings:{
           labelPrefix:'$'
        }
    };
  • html
  • <ej-bulletgraph id="bullet1" [quantitativeScaleSettings]="quatitativeScale">
    </ej-bulletgraph>

    quantitativeScaleSettings.labelSettings.labelSuffix string

    Specifies the suffix to be added after labels in bullet graph.

    Default Value

    • Empty string

    Example

  • ts
  • this.quatitativeScale = {
        labelSettings:{
           labelSuffix:'K'
        }
    };
  • html
  • <ej-bulletgraph id="bullet1" [quantitativeScaleSettings]="quatitativeScale">                
    </ej-bulletgraph>

    quantitativeScaleSettings.labelSettings.offset number

    Specifies the horizontal/vertical padding of labels.

    Default Value

    • 15

    Example

  • ts
  • this.quatitativeScale = {
        labelSettings:{
          offset:10
        }
    };
  • html
  • <ej-bulletgraph id="bullet1" [quantitativeScaleSettings]="quatitativeScale">                
    </ej-bulletgraph>

    quantitativeScaleSettings.labelSettings.position enum

    Specifies the position of the labels to render either above or below the graph. See Position

    Name Type Description
    Above string The labels are placed above the graph
    Below string The labels are placed below the graph

    Specifies the position of the labels to render either above or below the graph. See Position

    Default Value

    • “below”

    Example

  • ts
  • this.quatitativeScale = {
        labelSettings:{
            position:'above'
        }
    };
  • html
  • <ej-bulletgraph id="bullet1" [quantitativeScaleSettings]="quatitativeScale">
    </ej-bulletgraph>

    quantitativeScaleSettings.labelSettings.size number

    Specifies the Size of the labels.

    Default Value

    • 12

    Example

  • ts
  • this.quatitativeScale = {
        labelSettings:{
            size:10
        }
    };
  • html
  • <ej-bulletgraph id="bullet1" [quantitativeScaleSettings]="quatitativeScale">
    </ej-bulletgraph>

    quantitativeScaleSettings.labelSettings.stroke string

    Specifies the stroke color of the labels in bullet graph.

    Default Value

    • null

    Example

  • ts
  • this.quatitativeScale = {
        labelSettings:{
            stroke:'green'
        }
    };
  • html
  • <ej-bulletgraph id="bullet1" [quantitativeScaleSettings]="quatitativeScale">
    </ej-bulletgraph>

    quantitativeScaleSettings.location object

    Contains property to customize the position of the quantitative scale

    quantitativeScaleSettings.location.x number

    This property specifies the x position for rendering quantitative scale.

    Default Value

    • 10

    Example

  • ts
  • this.quatitativeScale = {
        location:{
            x:20
        }
    };
  • html
  • <ej-bulletgraph id="bullet1" [quantitativeScaleSettings]="quatitativeScale">
    </ej-bulletgraph>

    quantitativeScaleSettings.location.y number

    This property specifies the y position for rendering quantitative scale.

    Default Value

    • 10

    Example

  • ts
  • this.quatitativeScale = {
        location:{
            y:200
        }
    };
  • html
  • <ej-bulletgraph id="bullet1" [quantitativeScaleSettings]="quatitativeScale">                
    </ej-bulletgraph>

    quantitativeScaleSettings.majorTickSettings object

    Contains property to customize the major tick lines.

    quantitativeScaleSettings.majorTickSettings.size number

    Specifies the size of the major ticks.

    Default Value

    • 13

    Example

  • ts
  • this.quatitativeScale = {
        majorTickSettings:{
            size:20
        }
    };
  • html
  • <ej-bulletgraph id="bullet1" [quantitativeScaleSettings]="quatitativeScale">
    </ej-bulletgraph>

    quantitativeScaleSettings.majorTickSettings.stroke string

    Specifies the stroke color of the major tick lines.

    Default Value

    • null

    Example

  • ts
  • this.quatitativeScale = {
        majorTickSettings:{
            stroke:'green'
        }
    };
  • html
  • <ej-bulletgraph id="bullet1" [quantitativeScaleSettings]="quatitativeScale">
    </ej-bulletgraph>

    quantitativeScaleSettings.majorTickSettings.width number

    Specifies the width of the major tick lines.

    Default Value

    • 2

    Example

  • ts
  • this.quatitativeScale = {
        majorTickSettings:{
            width:2
        }
    };
  • html
  • <ej-bulletgraph id="bullet1" [quantitativeScaleSettings]="quatitativeScale">
    </ej-bulletgraph>

    quantitativeScaleSettings.maximum number

    Specifies the maximum value of the Graph.

    Default Value

    • 10

    Example

  • ts
  • this.quatitativeScale = {
        maximum:8
    };
  • html
  • <ej-bulletgraph id="bullet1" [quantitativeScaleSettings]="quatitativeScale">
    </ej-bulletgraph>

    quantitativeScaleSettings.minimum number

    Specifies the minimum value of the Graph.

    Default Value

    • 0

    Example

  • ts
  • this.quatitativeScale = {
        minimum:1
    };
  • html
  • <ej-bulletgraph id="bullet1" [quantitativeScaleSettings]="quatitativeScale">
    </ej-bulletgraph>

    quantitativeScaleSettings.minorTickSettings object

    Contains property to customize the minor ticks.

    quantitativeScaleSettings.minorTickSettings.size number

    Specifies the size of minor ticks.

    Default Value

    • 7

    Example

  • ts
  • this.quatitativeScale = {
        minorTickSettings:{
            size:10
        }
    };
  • html
  • <ej-bulletgraph id="bullet1" [quantitativeScaleSettings]="quatitativeScale">
    </ej-bulletgraph>

    quantitativeScaleSettings.minorTickSettings.stroke string

    Specifies the stroke color of minor ticks in bullet graph.

    Default Value

    • null

    Example

  • ts
  • this.quatitativeScale = {
        minorTickSettings:{
            stroke:'green'
        }
    };
  • html
  • <ej-bulletgraph id="bullet1" [quantitativeScaleSettings]="quatitativeScale">
    </ej-bulletgraph>

    quantitativeScaleSettings.minorTickSettings.width number

    Specifies the width of the minor ticks in bullet graph.

    Default Value

    • 2

    Example

  • ts
  • this.quatitativeScale = {
        minorTickSettings:{
            width:2
        }
    };
  • html
  • <ej-bulletgraph id="bullet1" [quantitativeScaleSettings]="quatitativeScale">
    </ej-bulletgraph>

    quantitativeScaleSettings.minorTicksPerInterval number

    The specified number of minor ticks will be rendered per interval.

    Default Value

    • 4

    Example

  • ts
  • this.quatitativeScale = {
        minorTicksPerInterval:5
    };
  • html
  • <ej-bulletgraph id="bullet1" [quantitativeScaleSettings]="quatitativeScale">
    </ej-bulletgraph>

    quantitativeScaleSettings.tickPlacement enum

    Specifies the placement of ticks to render either inside or outside the scale.

    Name Type Description
    Inside string The quantitative scale ticks are placed inside the scale
    Outside string The quantitative scale ticks are placed outside the scale

    Specifies the placement of ticks to render either inside or outside the scale. See LabelPlacement

    Default Value

    • ej.datavisualization.BulletGraph.TickPlacement.Outside

    Example

  • ts
  • this.quatitativeScale = {
        tickPlacement:'inside'
    };
  • html
  • <ej-bulletgraph id="bullet1" [quantitativeScaleSettings]="quatitativeScale">
    </ej-bulletgraph>

    quantitativeScaleSettings.tickPosition enum

    Specifies the position of the ticks to render either above,below or inside

    Name Type Description
    Below string The ticks are positioned below the Quantitative scale
    Above string The ticks are positioned above the Quantitative scale
    Cross string The ticks are placed inside the Quantitative scale

    Specifies the position of the ticks to render either above, below or inside the graph. See LabelPosition

    Default Value

    • ej.datavisualization.BulletGraph.TickPosition.Far

    Example

  • ts
  • this.quatitativeScale = {
        tickPosition:'near'
    };
  • html
  • <ej-bulletgraph id="bullet1" [quantitativeScaleSettings]="quatitativeScale">
    </ej-bulletgraph>

    theme string

    By specifying this property the user can change the theme of the bullet graph.

    Default Value

    • “flatlight”

    Example

  • html
  • <ej-bulletgraph id="bullet1" theme ="flatdark">                
    </ej-bulletgraph>

    tooltipSettings object

    Contains all the properties to customize tooltip.

    tooltipSettings.captionTemplate string

    Specifies template for caption tooltip

    Default Value

    • null

    Example

  • html
  • <div id="BulletGraphTooltip" style="display:none; width:125px; padding-top: 10px; padding-bottom:10px; color: blue"> 
        <div align="center" style="color:blue; font-weight:bold"> Sales </div> 
        <table style="color:green"> <tr> <td> Current </td> <td> : </td> </tr> <tr> <td> Target </td> <td> : </td> </tr> </table> 
    </div>
    
    <ej-bulletgraph id="bullet1" tooltipSettings.captionTemplate="BulletGraphTooltip">
    </ej-bulletgraph>

    tooltipSettings.enableCaptionTooltip boolean

    Toggles the visibility of caption tooltip

    Default Value

    • false

    Example

  • html
  • <ej-bulletgraph id="bullet1" [tooltipSettings.enableCaptionTooltip]="true">
    </ej-bulletgraph>

    tooltipSettings.template string

    Specifies the ID of a div, which is to be displayed as tooltip.

    Default Value

    • null

    Example

  • html
  • <div id="BulletGraphTooltip" style="display:none; width:125px; padding-top: 10px; padding-bottom:10px; color: blue"> 
        <div align="center" style="color:blue; font-weight:bold"> Sales </div> 
        <table style="color:green"> <tr> <td> Current </td> <td> : </td> </tr> <tr> <td> Target </td> <td> : </td> </tr> </table> 
    </div>
    
    <ej-bulletgraph id="bullet1" tooltipSettings.template="BulletGraphTooltip">         
           
    </ej-bulletgraph>

    tooltipSettings.visible boolean

    Toggles the visibility of tooltip

    Default Value

    • true

    Example

  • html
  • <ej-bulletgraph id="bullet1" [tooltipSettings.visible]="true">         
    </ej-bulletgraph>

    value number

    Feature measure bar in bullet graph render till the specified value.

    Default Value

    • 0

    Example

  • html
  • <ej-bulletgraph id="bullet1" [value]= 1>          
    </ej-bulletgraph>

    width number

    Specifies the width of the bullet graph.

    Default Value

    • 595

    Example

  • html
  • <ej-bulletgraph id="bullet1" [width]= 600>          
    </ej-bulletgraph>

    Methods

    destroy ()

    To destroy the bullet graph

    Returns: void

    Example

  • ts
  • destroy(){
         
         //Do something
         this.bullet.widget.destroy();
    
    }

    redraw()

    To redraw the bullet graph

    Returns: void

    Example

  • ts
  • redraw(){
         
         //Do something
         this.bullet.widget.redraw();
    
    }

    setComparativeMeasureSymbol()

    To set the value for comparative measure in bullet graph.

    Name Type Description
  • html
  • argument.Index
    number value for the graph
  • html
  • argument.Measure
    number value for the graph

    Returns: void

    Example

  • ts
  • setComparativeMeasureSymbol(){
         
         //Do something
         this.range.widget.setComparativeMeasureSymbol();
    
    }

    setFeatureMeasureBarValue()

    To set the value for feature measure bar.

    Name Type Description
  • html
  • argument.Index
    number value for the graph
  • html
  • argument.Measure
    number value for the graph

    Returns: void

    Example

  • ts
  • setFeatureMeasureBarValue(){
         
         //Do something
         this.range.widget.setFeatureMeasureBarValue();
    
    }

    Events

    drawCaption

    Fires on rendering the caption of bullet graph.

    Name Type Description
  • html
  • Object
    Object returns the object of the bullet graph.
  • html
  • scaleElement
    Element returns the options of the scale element.
  • html
  • captionElement
    Element returns the current captionSettings element.
  • html
  • captionType
    string returns the type of the captionSettings.

    Example

  • ts
  • ondrawcaption(sender){
         
         //Do something
    
    }
  • html
  • <ej-bulletgraph id="events" (drawCaption)="ondrawcaption($event)"> 
    </ej-bulletgraph>

    drawCategory

    Fires on rendering the category.

    Name Type Description
  • html
  • Object
    Object returns the object of the bullet graph.
  • html
  • scaleElement
    Element returns the options of the scale element.
  • html
  • categoryElement
    Element returns the options of category element.
  • html
  • Value
    string returns the text value of the category that is drawn.

    Example

  • ts
  • ondrawcategory(sender){
         
         //Do something
    
    }
  • html
  • <ej-bulletgraph id="events" (drawCategory)="ondrawcategory($event)"> 
    </ej-bulletgraph>

    drawComparativeMeasureSymbol

    Fires on rendering the comparative measure symbol.

    Name Type Description
  • html
  • Object
    Object returns the object of the bullet graph.
  • html
  • scaleElement
    Element returns the options of the scale element.
  • html
  • targetElement
    Element returns the options of comparative measure element.
  • html
  • Value
    number returns the value of the comparative measure symbol.

    Example

  • ts
  • ondrawcomparativemeasuresymbol(sender){
         
         //Do something
    
    }
  • html
  • <ej-bulletgraph id="events" (drawComparativeMeasureSymbol)="ondrawcomparativemeasuresymbol($event)"> 
    </ej-bulletgraph>

    drawFeatureMeasureBar

    Fires on rendering the feature measure bar.

    Name Type Description
  • html
  • Object
    Object returns the object of the bullet graph.
  • html
  • scaleElement
    Element returns the options of the scale element.
  • html
  • currentElement
    Element returns the options of feature measure element.
  • html
  • Value
    number returns the value of the feature measure bar.

    Example

  • ts
  • ondrawfeaturemeasurebar(sender){
         
         //Do something
    
    }
  • html
  • <ej-bulletgraph id="events" (drawFeatureMeasureBar)="ondrawfeaturemeasurebar($event)"> 
    </ej-bulletgraph>

    drawIndicator

    Fires on rendering the indicator of bullet graph.

    Name Type Description
  • html
  • indicatorSettings
    Object returns an object to customize bullet graph indicator text and symbol before rendering it.
  • html
  • model
    Object returns the object of bullet graph.
  • html
  • type
    string returns the type of event.
  • html
  • cancel
    boolean for canceling the event.

    Example

  • ts
  • ondrawindicator(sender){
         
         //Do something
    
    }
  • html
  • <ej-bulletgraph id="events" (drawIndicator)="ondrawindicator($event)"> 
    </ej-bulletgraph>

    drawLabels

    Fires on rendering the labels.

    Name Type Description
  • html
  • Object
    Object returns the object of the bullet graph.
  • html
  • scaleElement
    Element returns the options of the scale element.
  • html
  • tickElement
    Element returns the current label element.
  • html
  • labelType
    string returns the label type.

    Example

  • ts
  • ondrawlabels(sender){
         
         //Do something
    
    }
  • html
  • <ej-bulletgraph id="events" (drawLabels)="ondrawlabels($event)"> 
    </ej-bulletgraph>

    drawTicks

    Fires on rendering the ticks.

    Name Type Description
  • html
  • model
    object returns the model of the bullet graph.
  • html
  • type
    string returns the name of the event.
  • html
  • cancel
    boolean if the event should be canceled; otherwise, false.
  • html
  • majorTickSettings
    object returns the settings for majorTicks.
  • html
  • minorTickSettings
    object returns the settings for minorTicks.
  • html
  • maximum
    number returns the maximum value.
  • html
  • minimum
    number returns the minimum value.
  • html
  • interval
    number returns the interval value.
  • html
  • minorTickPerInterval
    number returns the value of minorTicksPerInterval.

    Example

  • ts
  • ondrawticks(sender){
         
         //Do something
    
    }
  • html
  • <ej-bulletgraph id="events" (drawTicks)="ondrawticks($event)"> 
    </ej-bulletgraph>

    drawQualitativeRanges

    Fires on rendering the qualitative ranges.

    Name Type Description
  • html
  • Object
    Object returns the object of the bullet graph.
  • html
  • rangeIndex
    number returns the index of current range.
  • html
  • rangeOptions
    Object returns the settings for current range.
  • html
  • rangeEndValue
    number returns the end value of current range.

    Example

  • ts
  • ondrawqualitativeranges(sender){
         
         //Do something
    
    }
  • html
  • <ej-bulletgraph id="events" (drawQualitativeRanges)="ondrawqualitativeranges($event)"> 
    </ej-bulletgraph>

    load

    Fires on loading bullet graph.

    Name Type Description
  • html
  • model
    object returns the model of the bullet graph.
  • html
  • type
    string returns the name of the event.
  • html
  • cancel
    boolean if the event should be canceled; otherwise, false.

    Example

  • ts
  • onload(sender){
         
         //Do something
    
    }
  • html
  • <ej-bulletgraph id="events" (load)="onload($event)"> 
    </ej-bulletgraph>