{% highlight html %}

{% endhighlight %}

Requires {:.require}

• module:jQuery.js

• module:ej.core.js

• module:ej.data.js

• module:ej.bulletgraph.js

{:#members:applyrangestroketolabels}

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

• false

{% highlight html %}

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

{% endhighlight %}

{:#members:applyrangestroketoticks}

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

• false

{% highlight html %}

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

{% endhighlight %}

{:#members:captionsettings}

Contains property to customize the caption in bullet graph.

{:#members:captionsettings-enabletrim}

Specifies whether trim the labels will be true or false.

• true

{% highlight ts %}

this.caption= { enableTrim: true,
};

{% endhighlight %}

{% highlight html %}

<ej-bulletgraph id="bullet1" [captionSettings]="caption">

{% endhighlight %}

{:#members:captionsettings-font}

Contains property to customize the font of caption.

{:#members:captionsettings-font-color}

Specifies the color of the text in caption.

• null

{% highlight ts %}

this.caption = {
font: { color: 'green',
}
};

{% endhighlight %}

{% highlight html %}

<ej-bulletgraph id="bullet1" [captionSettings]="caption">

{% endhighlight %}

{:#members:captionsettings-font-fontfamily}

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

• "Segoe UI"

{% highlight ts %}

this.caption = {
font: { fontFamily: 'Algerian',
}
};

{% endhighlight %}

{% highlight html %}

<ej-bulletgraph id="bullet1" [captionSettings]="caption">

{% endhighlight %}

{:#members:captionsettings-font-fontstyle}

Specifies the fontStyle of caption

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

• "Normal"

{% highlight ts %}

this.caption = {
font: { fontStyle: 'italic',
}
};

{% endhighlight %}

{% highlight html %}

<ej-bulletgraph id="bullet1" [captionSettings]="caption">

{% endhighlight %}

{:#members:captionsettings-font-fontweight}

Specifies the fontWeight of caption

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

• "regular"

{% highlight ts %}

this.caption = {
font: { fontWeight: 'lighter',
}
};

{% endhighlight %}

{% highlight html %}

<ej-bulletgraph id="bullet1" [captionSettings]="caption">

{% endhighlight %}

{:#members:captionsettings-font-opacity}

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

• 1

{% highlight ts %}

this.caption = {
font: { opacity:0.5,
}
};

{% endhighlight %}

{% highlight html %}

<ej-bulletgraph id="bullet1" [captionSettings]="caption">

{% endhighlight %}

{:#members:captionsettings-font-size}

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

• "12px"

{% highlight ts %}

this.caption = {
font: { size:'14px',
}
};

{% endhighlight %}

{% highlight html %}

<ej-bulletgraph id="bullet1" [captionSettings]="caption">

{% endhighlight %}

{:#members:captionsettings-indicator}

Contains property to customize the indicator.

{:#members:captionsettings-indicator-font}

Contains property to customize the font of indicator.

{:#members:captionsettings-indicator-font-color}

Specifies the color of the indicator's text.

• null

{% highlight ts %}

this.caption = { indicator: {
font: { color:'green',
}, } };

{% endhighlight %}

{% highlight html %}

<ej-bulletgraph id="bullet1" [captionSettings]="caption">

{% endhighlight %}

{:#members:captionsettings-indicator-font-fontfamily}

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

• "Segoe UI"

{% highlight ts %}

this.caption = { indicator: {
font: { fontFamily:'Algerian',
}, } };

{% endhighlight %}

{% highlight html %}

<ej-bulletgraph id="bullet1" [captionSettings]="caption">

{% endhighlight %}

{:#members:captionsettings-indicator-font-fontstyle}

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

• "Normal"

{% highlight ts %}

this.caption = { indicator: {
font: { fontStyle :'italic',
}, } };

{% endhighlight %}

{% highlight html %}

<ej-bulletgraph id="bullet1" [captionSettings]="caption">

{% endhighlight %}

{:#members:captionsettings-indicator-font-fontweight}

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

• "regular"

{% highlight ts %}

this.caption = { indicator: {
font: { fontWeight :'lighter',
}, } };

{% endhighlight %}

{% highlight html %}

<ej-bulletgraph id="bullet1" [captionSettings]="caption">

{% endhighlight %}

{:#members:captionsettings-indicator-font-opacity}

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

• 1

{% highlight ts %}

this.caption = { indicator: {
font: { opacity : 0.5,
}, } };

{% endhighlight %}

{% highlight html %}

<ej-bulletgraph id="bullet1" [captionSettings]="caption">

{% endhighlight %}

{:#members:captionsettings-indicator-font-size}

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

• "12px"

{% highlight ts %}

this.caption = { indicator: {
font: { size :'14px',
}, } };

{% endhighlight %}

{% highlight html %}

<ej-bulletgraph id="bullet1" [captionSettings]="caption">

{% endhighlight %}

{:#members:captionsettings-indicator-location}

Contains property to customize the location of indicator.

{:#members:captionsettings-indicator-location-x}

Specifies the horizontal position of the indicator.

• 10

{% highlight ts %}

this.caption = { indicator: {
location: { x: 12 }, } };

{% endhighlight %}

{% highlight html %}

<ej-bulletgraph id="bullet1" [captionSettings]="caption">

{% endhighlight %}

{:#members:captionsettings-indicator-location-y}

Specifies the vertical position of the indicator.

• 60

{% highlight ts %}

this.caption = { indicator: {
location: { y: 60 }, } };

{% endhighlight %}

{% highlight html %}

<ej-bulletgraph id="bullet1" [captionSettings]="caption">

{% endhighlight %}

{:#members:captionsettings-indicator-padding}

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

• 2

{% highlight ts %}

this.caption = { indicator: {
padding: 5 } };

{% endhighlight %}

{% highlight html %}

<ej-bulletgraph id="bullet1" [captionSettings]="caption">

{% endhighlight %}

{:#members:captionsettings-indicator-symbol}

Contains property to customize the symbol of indicator.

{:#members:captionsettings-indicator-symbol-border}

Contains property to customize the border of indicator symbol.

{:#members:captionsettings-indicator-symbol-border-color}

Specifies the border color of indicator symbol.

• null

{% highlight ts %}

this.caption = { indicator: {
symbol:{ border:{ color:'green' } } } };

{% endhighlight %}

{% highlight html %}

<ej-bulletgraph id="bullet1" [captionSettings]="caption">

{% endhighlight %}

{:#members:captionsettings-indicator-symbol-border-width}

Specifies the border width of indicator symbol.

• 1

{% highlight ts %}

this.caption = { indicator: {
symbol:{ border:{ width:2 } } } };

{% endhighlight %}

{% highlight html %}

<ej-bulletgraph id="bullet1" [captionSettings]="caption">

{% endhighlight %}

{:#members:captionsettings-indicator-symbol-color}

Specifies the color of indicator symbol.

• null

{% highlight ts %}

this.caption = { indicator: {
symbol:{ color:'green' } } };

{% endhighlight %}

{% highlight html %}

<ej-bulletgraph id="bullet1" [captionSettings]="caption">

{% endhighlight %}

{:#members:captionsettings-indicator-symbol-imageurl}

Specifies the URL of image that represents indicator symbol.

• ""

{% highlight ts %}

this.caption = { indicator: {
symbol:{ imageURL :'../BulletIndicator.png' } } };

{% endhighlight %}

{% highlight html %}

<ej-bulletgraph id="bullet1" [captionSettings]="caption">

{% endhighlight %}

{:#members:captionsettings-indicator-symbol-opacity}

Specifies the opacity of indicator symbol.

• 1

{% highlight ts %}

this.caption = { indicator: {
symbol:{ opacity:0.5 } } };

{% endhighlight %}

{% highlight html %}

<ej-bulletgraph id="bullet1" [captionSettings]="caption">

{% endhighlight %}

{:#members:captionsettings-indicator-symbol-shape}

Specifies the shape of indicator symbol.

• ""

{% highlight ts %}

this.caption = { indicator: {
symbol:{ shape:'triangle' } } };

{% endhighlight %}

{% highlight html %}

<ej-bulletgraph id="bullet1" [captionSettings]="caption">

{% endhighlight %}

{:#members:captionsettings-indicator-symbol-size}

Contains property to customize the size of indicator symbol.

{:#members:captionsettings-indicator-symbol-size-height}

Specifies the height of indicator symbol.

• 10

{% highlight ts %}

this.caption = { indicator: {
symbol:{ size:{ height:10 } } } };

{% endhighlight %}

{% highlight html %}

<ej-bulletgraph id="bullet1" [captionSettings]="caption">

{% endhighlight %}

{:#members:captionsettings-indicator-symbol-size-width}

Specifies the width of indicator symbol.

• 10

{% highlight ts %}

this.caption = { indicator: {
symbol:{ size:{ width:10 } } } };

{% endhighlight %}

{% highlight html %}

<ej-bulletgraph id="bullet1" [captionSettings]="caption">

{% endhighlight %}

{:#members:captionsettings-indicator-text}

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

• ""

{% highlight ts %}

this.caption = { indicator: {
text:'Power Production' } };

{% endhighlight %}

{% highlight html %}

<ej-bulletgraph id="bullet1" [captionSettings]="caption">

{% endhighlight %}

{:#members:captionsettings-indicator-textalignment}

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

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

• 'Near'

{% highlight ts %}

this.caption = { indicator: {
textAlignment:'Far' } };

{% endhighlight %}

{% highlight html %}

<ej-bulletgraph id="bullet1" [captionSettings]="caption">

{% endhighlight %}

{:#members:captionsettings-indicator-textanchor}

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.

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.

• 'start'

{% highlight ts %}

this.caption = { indicator: {
textAnchor:'end' } };

{% endhighlight %}

{% highlight html %}

<ej-bulletgraph id="bullet1" [captionSettings]="caption">

{% endhighlight %}

{:#members:captionsettings-indicator-textangle}

indicator text render in the specified angle.

• 0

{% highlight ts %}

this.caption = { indicator: {
textAngle :10 } };

{% endhighlight %}

{% highlight html %}

<ej-bulletgraph id="bullet1" [captionSettings]="caption">

{% endhighlight %}

{:#members:captionsettings-indicator-textposition}

Specifies where indicator should be placed

Specifies where indicator should be placed.

• 'float'

{% highlight ts %}

this.caption = { indicator: {
textPosition :'Top' } };

{% endhighlight %}

{% highlight html %}

<ej-bulletgraph id="bullet1" [captionSettings]="caption">

{% endhighlight %}

{:#members:captionsettings-indicator-textspacing}

Specifies the space between indicator symbol and text.

• 3

{% highlight ts %}

this.caption = { indicator: {
textSpacing :10 } };

{% endhighlight %}

{% highlight html %}

<ej-bulletgraph id="bullet1" [captionSettings]="caption">

{% endhighlight %}

{:#members:captionsettings-indicator-visible}

Specifies whether indicator will be visible or not.

• false

{% highlight ts %}

this.caption = { indicator: {
visible:true } };

{% endhighlight %}

{% highlight html %}

<ej-bulletgraph id="bullet1" [captionSettings]="caption">

{% endhighlight %}

{:#members:captionsettings-location}

Contains property to customize the location.

{:#members:captionsettings-location-x}

Specifies the position in horizontal direction

• 17

{% highlight ts %}

this.caption = { location:{ x:15 } };

{% endhighlight %}

{% highlight html %}

<ej-bulletgraph id="bullet1" [captionSettings]="caption">

{% endhighlight %}

{:#members:captionsettings-location-y}

Specifies the position in horizontal direction

• 30

{% highlight ts %}

this.caption = { location:{ y:15 } };

{% endhighlight %}

{% highlight html %}

<ej-bulletgraph id="bullet1" [captionSettings]="caption">

{% endhighlight %}

{:#members:captionsettings-padding}

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

• 5

{% highlight ts %}

this.caption = { padding:2 };

{% endhighlight %}

{% highlight html %}

<ej-bulletgraph id="bullet1" [captionSettings]="caption">

{% endhighlight %}

{:#members:captionsettings-subtitle}

Contains property to customize the subtitle.

{:#members:captionsettings-subtitle-font}

Contains property to customize the font of subtitle.

{:#members:captionsettings-subtitle-font-color}

Specifies the color of the subtitle's text.

• null

{% highlight ts %}

this.caption = { subTitle: {
font: { color:'green',
} } };

{% endhighlight %}

{% highlight html %}

<ej-bulletgraph id="bullet1" [captionSettings]="caption">

{% endhighlight %}

{:#members:captionsettings-subtitle-font-fontfamily}

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

• "Segoe UI"

{% highlight ts %}

this.caption = { subTitle: {
font: { fontFamily:'Algerian',
} } };

{% endhighlight %}

{% highlight html %}

<ej-bulletgraph id="bullet1" [captionSettings]="caption">

{% endhighlight %}

{:#members:captionsettings-subtitle-font-fontstyle}

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

• "Normal"

{% highlight ts %}

this.caption = { subTitle: {
font: { fontStyle :'italic',
} } };

{% endhighlight %}

{% highlight html %}

<ej-bulletgraph id="bullet1" [captionSettings]="caption">

{% endhighlight %}

{:#members:captionsettings-subtitle-font-fontweight}

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

• "regular"

{% highlight ts %}

this.caption = { subTitle: {
font: { fontWeight :'lighter',
} } };

{% endhighlight %}

{% highlight html %}

<ej-bulletgraph id="bullet1" [captionSettings]="caption">

{% endhighlight %}

{:#members:captionsettings-subtitle-font-opacity}

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

• 1

{% highlight ts %}

this.caption = { subTitle: {
font: { opacity :0.5,
} } };

{% endhighlight %}

{% highlight html %}

<ej-bulletgraph id="bullet1" [captionSettings]="caption">

{% endhighlight %}

{:#members:captionsettings-subtitle-font-size}

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

• "12px"

{% highlight ts %}

this.caption = { subTitle: {
font: { size :'14px',
} } };

{% endhighlight %}

{% highlight html %}

<ej-bulletgraph id="bullet1" [captionSettings]="caption">

{% endhighlight %}

{:#members:captionsettings-subtitle-location}

Contains property to customize the location of subtitle.

{:#members:captionsettings-subtitle-location-x}

Specifies the horizontal position of the subtitle.

• 10

{% highlight ts %}

this.caption = { subTitle: {
location:{ x:12 } } };

{% endhighlight %}

{% highlight html %}

<ej-bulletgraph id="bullet1" [captionSettings]="caption">

{% endhighlight %}

{:#members:captionsettings-subtitle-location-y}

Specifies the vertical position of the subtitle.

• 45

{% highlight ts %}

this.caption = { subTitle: {
location:{ y:50 } } };

{% endhighlight %}

{% highlight html %}

<ej-bulletgraph id="bullet1" [captionSettings]="caption">

{% endhighlight %}

{:#members:captionsettings-subtitle-padding}

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

• 5

{% highlight ts %}

this.caption = { subTitle: {
padding:8 } };

{% endhighlight %}

{% highlight html %}

<ej-bulletgraph id="bullet1" [captionSettings]="caption">

{% endhighlight %}

{:#members:captionsettings-subtitle-text}

Specifies the text to be displayed as subtitle.

• ""

{% highlight ts %}

this.caption = { subTitle: {
text:'Power Production' } };

{% endhighlight %}

{% highlight html %}

<ej-bulletgraph id="bullet1" [captionSettings]="caption">

{% endhighlight %}

{:#members:captionsettings-subtitle-textalignment}

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

• 'Near'

{% highlight ts %}

this.caption = { subTitle: {
textAlignment:'Far' } };

{% endhighlight %}

{% highlight html %}

<ej-bulletgraph id="bullet1" [captionSettings]="caption">

{% endhighlight %}

{:#members:captionsettings-subtitle-textanchor}

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.

• 'start'

{% highlight ts %}

this.caption = { subTitle: {
textAnchor:'end' } };

{% endhighlight %}

{% highlight html %}

<ej-bulletgraph id="bullet1" [captionSettings]="caption">

{% endhighlight %}

{:#members:captionsettings-subtitle-textangle}

Subtitle render in the specified angle.

• 0

{% highlight ts %}

this.caption = { subTitle: {
textAngle:10 } };

{% endhighlight %}

{% highlight html %}

<ej-bulletgraph id="bullet1" [captionSettings]="caption">

{% endhighlight %}

{:#members:captionsettings-subtitle-textposition}

Specifies where sub title text should be placed.

• 'float'

{% highlight ts %}

this.caption = { subTitle: {
textPosition:'Right' } };

{% endhighlight %}

{% highlight html %}

<ej-bulletgraph id="bullet1" [captionSettings]="caption">

{% endhighlight %}

{:#members:captionsettings-text}

Specifies the text to be displayed on bullet graph.

• ""

{% highlight ts %}

this.caption = { text:'Production' };

{% endhighlight %}

{% highlight html %}

<ej-bulletgraph id="bullet1" [captionSettings]="caption">

{% endhighlight %}

{:#members:captionsettings-textalignment}

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

• 'Near'

{% highlight ts %}

this.caption = {
textAlignment:'Center'
};

{% endhighlight %}

{% highlight html %}

<ej-bulletgraph id="bullet1" [captionSettings]="caption">

{% endhighlight %}

{:#members:captionsettings-textanchor}

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.

• 'start'

{% highlight ts %}

this.caption = {
textAnchor:'middle'
};

{% endhighlight %}

{% highlight html %}

<ej-bulletgraph id="bullet1" [captionSettings]="caption">

{% endhighlight %}

{:#members:captionsettings-textangle}

Specifies the angel in which the caption is rendered.

• 0

{% highlight ts %}

this.caption = {
textAngle:5 };

{% endhighlight %}

{% highlight html %}

<ej-bulletgraph id="bullet1" [captionSettings]="caption">

{% endhighlight %}

{:#members:captionsettings-textposition}

Specifies how caption text should be placed.

• 'float'

{% highlight ts %}

this.caption = {
textPosition:'Top'
};

{% endhighlight %}

{% highlight html %}

<ej-bulletgraph id="bullet1" [captionSettings]="caption">

{% endhighlight %}

{:#members:comparativemeasurevalue}

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

• 0

{% highlight html %}

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

{% endhighlight %}

{:#members:enableanimation}

Toggles the animation of bullet graph.

• true

{% highlight html %}

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

{% endhighlight %}

{:#members:flowdirection}

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

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

• "forward"

{% highlight html %}

{% endhighlight %}

{:#members:height}

Specifies the height of the bullet graph.

• 90

{% highlight html %}

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

{% endhighlight %}

{:#members:isresponsive}

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

• true

{% highlight html %}

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

{% endhighlight %}

{:#members:orientation}

Bullet graph will render in the specified orientation.

Bullet graph will render in the specified orientation.

• "horizontal"

{% highlight html %}

{% endhighlight %}

{:#members:qualitativeranges}

Contains property to customize the qualitative ranges.

{:#members:qualitativeranges-rangeend}

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

• 3

{% highlight html %}

{% endhighlight %}

{:#members:qualitativeranges-rangeopacity}

Specifies the opacity for the qualitative ranges.

• 1

{% highlight html %}

{% endhighlight %}

{:#members:qualitativeranges-rangestroke}

Specifies the stroke for the qualitative ranges.

• null

{% highlight html %}

{% endhighlight %}

{:#members:qualitativerangesize}

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

• 32

{% highlight html %}

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

{% endhighlight %}

{:#members:quantitativescalelength}

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

• 475

{% highlight html %}

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

{% endhighlight %}

{:#members:quantitativescalesettings}

Contains all the properties to customize quantitative scale.

{:#members:quantitativescalesettings-comparativemeasuresettings}

Contains property to customize the comparative measure.

{:#members:quantitativescalesettings-comparativemeasuresettings-stroke}

Specifies the stroke of the comparative measure.

• null

{% highlight ts %}

this.quantitativeScale = { comparativeMeasureSettings: { stroke:'green' } };

{% endhighlight %}

{% highlight html %}

<ej-bulletgraph id="bullet1" [quantitativeScaleSettings]="quantitativeScale">

{% endhighlight %}

{:#members:quantitativescalesettings-comparativemeasuresettings-width}

Specifies the width of the comparative measure.

• 5

{% highlight ts %}

this.quantitativeScale = { comparativeMeasureSettings: { width:6 } };

{% endhighlight %}

{% highlight html %}

<ej-bulletgraph id="bullet1" [quantitativeScaleSettings]="quantitativeScale">

{% endhighlight %}

{:#members:quantitativescalesettings-featuredmeasuresettings}

Contains property to customize the featured measure.

{:#members:quantitativescalesettings-featuredmeasuresettings-stroke}

Specifies the Stroke of the featured measure in bullet graph.

• null

{% highlight ts %}

this.quantitativeScale = { featureMeasureSettings: { stroke:'green' } };

{% endhighlight %}

{% highlight html %}

<ej-bulletgraph id="bullet1" [quantitativeScaleSettings]="quantitativeScale">

{% endhighlight %}

{:#members:quantitativescalesettings-featuredmeasuresettings-width}

Specifies the width of the featured measure in bullet graph.

• 2

{% highlight ts %}

this.quantitativeScale = { featureMeasureSettings: { width:3 } };

{% endhighlight %}

{% highlight html %}

<ej-bulletgraph id="bullet1" [quantitativeScaleSettings]="quantitativeScale">

{% endhighlight %}

{:#members:quantitativescalesettings-featuremeasures}

Contains property to customize the featured measure.

{:#members:quantitativescalesettings-featuremeasures-category}

Specifies the category of feature measure.

• null

{% highlight ts %}

this.quantitativeScale = { featureMeasures: [ { category: 2010 },
] };

{% endhighlight %}

{% highlight html %}

<ej-bulletgraph id="bullet1" [quantitativeScaleSettings]="quantitativeScale">

{% endhighlight %}

{:#members:quantitativescalesettings-featuremeasures-comparativemeasurevalue}

Comparative measure render till the specified value.

• null

{% highlight ts %}

this.quantitativeScale = { featureMeasures: [ { comparativeMeasureValue: 3 },
] };

{% endhighlight %}

{% highlight html %}

<ej-bulletgraph id="bullet1" [quantitativeScaleSettings]="quantitativeScale">

{% endhighlight %}

{:#members:quantitativescalesettings-featuremeasures-value}

Feature measure render till the specified value.

• null

{% highlight ts %}

this.quantitativeScale = { featureMeasures: [ { value: 3 },
] };

{% endhighlight %}

{% highlight html %}

<ej-bulletgraph id="bullet1" [quantitativeScaleSettings]="quantitativeScale">

{% endhighlight %}

{:#members:quantitativescalesettings-fields}

Contains property to customize the fields.

{:#members:quantitativescalesettings-fields-category}

Specifies the category of the bullet graph.

• null

{% highlight ts %}

this.quantitativeScale = { fields: { category: 'ProductId',
} };

{% endhighlight %}

{% highlight html %}

<ej-bulletgraph id="bullet1" [quantitativeScaleSettings]="quantitativeScale">

{% endhighlight %}

{:#members:quantitativescalesettings-fields-comparativemeasure}

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

• null

{% highlight ts %}

this.quantitativeScale = { fields: { comparativeMeasure : 5,
} };

{% endhighlight %}

{% highlight html %}

<ej-bulletgraph id="bullet1" [quantitativeScaleSettings]="quantitativeScale">

{% endhighlight %}

{:#members:quantitativescalesettings-fields-datasource}

Specifies the dataSource for the bullet graph.

• null

{% highlight ts %}

this.quantitativeScale = { fields: { dataSource: data1 ,
} };

{% endhighlight %}

{% highlight html %}

<ej-bulletgraph id="bullet1" [quantitativeScaleSettings]="quantitativeScale">

{% endhighlight %}

{:#members:quantitativescalesettings-fields-featuremeasures}

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

• null

{% highlight ts %}

this.quantitativeScale = { fields: { featureMeasures: 'UnitPrice',
} };

{% endhighlight %}

{% highlight html %}

<ej-bulletgraph id="bullet1" [quantitativeScaleSettings]="quantitativeScale">

{% endhighlight %}

{:#members:quantitativescalesettings-fields-query}

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

• null

{:#members:quantitativescalesettings-fields-tablename}

Specifies the name of the table.

• null

{% highlight ts %}

this.quantitativeScale = { fields: { tableName: 'Product',
} };

{% endhighlight %}

{% highlight html %}

<ej-bulletgraph id="bullet1" [quantitativeScaleSettings]="quantitativeScale">

{% endhighlight %}

{:#members:quantitativescalesettings-interval}

Specifies the interval for the Graph.

• 1

{% highlight ts %}

this.quantitativeScale = { interval:2 };

{% endhighlight %}

{% highlight html %}

<ej-bulletgraph id="bullet1" [quantitativeScaleSettings]="quantitativeScale">

{% endhighlight %}

{:#members:quantitativescalesettings-labelsettings}

Contains property to customize the labels.

{:#members:quantitativescalesettings-labelsettings-font}

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

{:#members:quantitativescalesettings-labelsettings-font-fontfamily}

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

• "Segoe UI"

{% highlight ts %}

this.quatitativeScale = { labelSettings:{ font:{ fontFamily:'Algerian' } } };

{% endhighlight %}

{% highlight html %}

<ej-bulletgraph id="bullet1" [quantitativeScaleSettings]="quatitativeScale">

{% endhighlight %}

{:#members:quantitativescalesettings-labelsettings-font-fontstyle}

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

• "Normal"

{% highlight ts %}

this.quatitativeScale = { labelSettings:{ font:{ fontStyle:'italic' } } };

{% endhighlight %}

{% highlight html %}

<ej-bulletgraph id="bullet1" [quantitativeScaleSettings]="quatitativeScale">

{% endhighlight %}

{:#members:quantitativescalesettings-labelsettings-font-fontweight}

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

• "regular"

{% highlight ts %}

this.quatitativeScale = { labelSettings:{ font:{ fontWeight:'lighter' } } };

{% endhighlight %}

{% highlight html %}

<ej-bulletgraph id="bullet1" [quantitativeScaleSettings]="quatitativeScale">

{% endhighlight %}

{:#members:quantitativescalesettings-labelsettings-font-opacity}

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

• 1

{% highlight ts %}

this.quatitativeScale = { labelSettings:{ font:{ opacity:0.5 } } };

{% endhighlight %}

{% highlight html %}

<ej-bulletgraph id="bullet1" [quantitativeScaleSettings]="quatitativeScale">

{% endhighlight %}

{:#members:quantitativescalesettings-labelsettings-labelplacement}

Specifies the placement of labels in bullet graph scale.

Specifies the placement of labels in bullet graph scale.

• outside

{% highlight ts %}

this.quatitativeScale = { labelSettings:{ labelPlacement:'inside' } };

{% endhighlight %}

{% highlight html %}

<ej-bulletgraph id="bullet1" [quantitativeScaleSettings]="quatitativeScale">

{% endhighlight %}

{:#members:quantitativescalesettings-labelsettings-labelprefix}

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

• Empty string

{% highlight ts %}

this.quatitativeScale = { labelSettings:{ labelPrefix:'$' } };

{% endhighlight %}

{% highlight html %}

<ej-bulletgraph id="bullet1" [quantitativeScaleSettings]="quatitativeScale">

{% endhighlight %}

{:#members:quantitativescalesettings-labelsettings-labelsuffix}

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

• Empty string

{% highlight ts %}

this.quatitativeScale = { labelSettings:{ labelSuffix:'K' } };

{% endhighlight %}

{% highlight html %}

<ej-bulletgraph id="bullet1" [quantitativeScaleSettings]="quatitativeScale">

{% endhighlight %}

{:#members:quantitativescalesettings-labelsettings-offset}

Specifies the horizontal/vertical padding of labels.

• 15

{% highlight ts %}

this.quatitativeScale = { labelSettings:{ offset:10 } };

{% endhighlight %}

{% highlight html %}

<ej-bulletgraph id="bullet1" [quantitativeScaleSettings]="quatitativeScale">

{% endhighlight %}

{:#members:quantitativescalesettings-labelsettings-position}

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

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

• "below"

{% highlight ts %}

this.quatitativeScale = { labelSettings:{ position:'above' } };

{% endhighlight %}

{% highlight html %}

<ej-bulletgraph id="bullet1" [quantitativeScaleSettings]="quatitativeScale">

{% endhighlight %}

{:#members:quantitativescalesettings-labelsettings-size}

Specifies the Size of the labels.

• 12

{% highlight ts %}

this.quatitativeScale = { labelSettings:{ size:10 } };

{% endhighlight %}

{% highlight html %}

<ej-bulletgraph id="bullet1" [quantitativeScaleSettings]="quatitativeScale">

{% endhighlight %}

{:#members:quantitativescalesettings-labelsettings-stroke}

Specifies the stroke color of the labels in bullet graph.

• null

{% highlight ts %}

this.quatitativeScale = { labelSettings:{ stroke:'green' } };

{% endhighlight %}

{% highlight html %}

<ej-bulletgraph id="bullet1" [quantitativeScaleSettings]="quatitativeScale">

{% endhighlight %}

{:#members:quantitativescalesettings-location}

Contains property to customize the position of the quantitative scale

{:#members:quantitativescalesettings-location-x}

This property specifies the x position for rendering quantitative scale.

• 10

{% highlight ts %}

this.quatitativeScale = { location:{ x:20 } };

{% endhighlight %}

{% highlight html %}

<ej-bulletgraph id="bullet1" [quantitativeScaleSettings]="quatitativeScale">

{% endhighlight %}

{:#members:quantitativescalesettings-location-y}

This property specifies the y position for rendering quantitative scale.

• 10

{% highlight ts %}

this.quatitativeScale = { location:{ y:200 } };

{% endhighlight %}

{% highlight html %}

<ej-bulletgraph id="bullet1" [quantitativeScaleSettings]="quatitativeScale">

{% endhighlight %}

{:#members:quantitativescalesettings-majorticksettings}

Contains property to customize the major tick lines.

{:#members:quantitativescalesettings-majorticksettings-size}

Specifies the size of the major ticks.

• 13

{% highlight ts %}

this.quatitativeScale = { majorTickSettings:{ size:20 } };

{% endhighlight %}

{% highlight html %}

<ej-bulletgraph id="bullet1" [quantitativeScaleSettings]="quatitativeScale">

{% endhighlight %}

{:#members:quantitativescalesettings-majorticksettings-stroke}

Specifies the stroke color of the major tick lines.

• null

{% highlight ts %}

this.quatitativeScale = { majorTickSettings:{ stroke:'green' } };

{% endhighlight %}

{% highlight html %}

<ej-bulletgraph id="bullet1" [quantitativeScaleSettings]="quatitativeScale">

{% endhighlight %}

{:#members:quantitativescalesettings-majorticksettings-width}

Specifies the width of the major tick lines.

• 2

{% highlight ts %}

this.quatitativeScale = { majorTickSettings:{ width:2 } };

{% endhighlight %}

{% highlight html %}

<ej-bulletgraph id="bullet1" [quantitativeScaleSettings]="quatitativeScale">

{% endhighlight %}

{:#members:quantitativescalesettings-maximum}

Specifies the maximum value of the Graph.

• 10

{% highlight ts %}

this.quatitativeScale = { maximum:8 };

{% endhighlight %}

{% highlight html %}

<ej-bulletgraph id="bullet1" [quantitativeScaleSettings]="quatitativeScale">

{% endhighlight %}

{:#members:quantitativescalesettings-minimum}

Specifies the minimum value of the Graph.

• 0

{% highlight ts %}

this.quatitativeScale = { minimum:1 };

{% endhighlight %}

{% highlight html %}

<ej-bulletgraph id="bullet1" [quantitativeScaleSettings]="quatitativeScale">

{% endhighlight %}

{:#members:quantitativescalesettings-minorticksettings}

Contains property to customize the minor ticks.

{:#members:quantitativescalesettings-minorticksettings-size}

Specifies the size of minor ticks.

• 7

{% highlight ts %}

this.quatitativeScale = { minorTickSettings:{ size:10 } };

{% endhighlight %}

{% highlight html %}

<ej-bulletgraph id="bullet1" [quantitativeScaleSettings]="quatitativeScale">

{% endhighlight %}

{:#members:quantitativescalesettings-minorticksettings-stroke}

Specifies the stroke color of minor ticks in bullet graph.

• null

{% highlight ts %}

this.quatitativeScale = { minorTickSettings:{ stroke:'green' } };

{% endhighlight %}

{% highlight html %}

<ej-bulletgraph id="bullet1" [quantitativeScaleSettings]="quatitativeScale">

{% endhighlight %}

{:#members:quantitativescalesettings-minorticksettings-width}

Specifies the width of the minor ticks in bullet graph.

• 2

{% highlight ts %}

this.quatitativeScale = { minorTickSettings:{ width:2 } };

{% endhighlight %}

{% highlight html %}

<ej-bulletgraph id="bullet1" [quantitativeScaleSettings]="quatitativeScale">

{% endhighlight %}

{:#members:quantitativescalesettings-minorticksperinterval}

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

• 4

{% highlight ts %}

this.quatitativeScale = { minorTicksPerInterval:5 };

{% endhighlight %}

{% highlight html %}

<ej-bulletgraph id="bullet1" [quantitativeScaleSettings]="quatitativeScale">

{% endhighlight %}

{:#members:quantitativescalesettings-tickplacement}

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

• ej.datavisualization.BulletGraph.TickPlacement.Outside

{% highlight ts %}

this.quatitativeScale = { tickPlacement:'inside' };

{% endhighlight %}

{% highlight html %}

<ej-bulletgraph id="bullet1" [quantitativeScaleSettings]="quatitativeScale">

{% endhighlight %}

{:#members:quantitativescalesettings-tickposition}

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

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

• ej.datavisualization.BulletGraph.TickPosition.Far

{% highlight ts %}

this.quatitativeScale = { tickPosition:'near' };

{% endhighlight %}

{% highlight html %}

<ej-bulletgraph id="bullet1" [quantitativeScaleSettings]="quatitativeScale">

{% endhighlight %}

{:#members:theme}

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

• "flatlight"

{% highlight html %}

{% endhighlight %}

{:#members:tooltipsettings}

Contains all the properties to customize tooltip.

{:#members:tooltipsettings-captiontemplate}

Specifies template for caption tooltip

• null

{% highlight html %}

{% endhighlight %}

{:#members:tooltipsettings-enablecaptiontooltip}

Toggles the visibility of caption tooltip

• false

{% highlight html %}

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

{% endhighlight %}

{:#members:tooltipsettings-template}

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

• null

{% highlight html %}

{% endhighlight %}

{:#members:tooltipsettings-visible}

Toggles the visibility of tooltip

• true

{% highlight html %}

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

{% endhighlight %}

{:#members:value}

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

• 0

{% highlight html %}

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

{% endhighlight %}

{:#members:width}

Specifies the width of the bullet graph.

• 595

{% highlight html %}

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

{% endhighlight %}

{:#methods:destroy}

To destroy the bullet graph

{% highlight ts %}

destroy(){

 //Do something
 this.bullet.widget.destroy();

}

{% endhighlight %}

{:#methods:redraw}

To redraw the bullet graph

{% highlight ts %}

redraw(){

 //Do something
 this.bullet.widget.redraw();

}

{% endhighlight %}

{:#methods:setcomparativemeasuresymbol}

To set the value for comparative measure in bullet graph.

{% highlight ts %}

setComparativeMeasureSymbol(){

 //Do something
 this.range.widget.setComparativeMeasureSymbol();

}

{% endhighlight %}

{:#methods:setfeaturemeasurebarvalue}

To set the value for feature measure bar.

{% highlight ts %}

setFeatureMeasureBarValue(){

 //Do something
 this.range.widget.setFeatureMeasureBarValue();

}

{% endhighlight %}

{:#events:drawcaption}

Fires on rendering the caption of bullet graph.

{% highlight ts %}

ondrawcaption(sender){

 //Do something

}

{% endhighlight %}

{% highlight html %}

<ej-bulletgraph id="events" (drawCaption)="ondrawcaption($event)">

{% endhighlight %}

{:#events:drawcategory}

Fires on rendering the category.

{% highlight ts %}

ondrawcategory(sender){

 //Do something

}

{% endhighlight %}

{% highlight html %}

<ej-bulletgraph id="events" (drawCategory)="ondrawcategory($event)">

{% endhighlight %}

{:#events:drawcomparativemeasuresymbol}

Fires on rendering the comparative measure symbol.

{% highlight ts %}

ondrawcomparativemeasuresymbol(sender){

 //Do something

}

{% endhighlight %}

{% highlight html %}

<ej-bulletgraph id="events" (drawComparativeMeasureSymbol)="ondrawcomparativemeasuresymbol($event)">

{% endhighlight %}

{:#events:drawfeaturemeasurebar}

Fires on rendering the feature measure bar.

{% highlight ts %}

ondrawfeaturemeasurebar(sender){

 //Do something

}

{% endhighlight %}

{% highlight html %}

<ej-bulletgraph id="events" (drawFeatureMeasureBar)="ondrawfeaturemeasurebar($event)">

{% endhighlight %}

{:#events:drawindicator}

Fires on rendering the indicator of bullet graph.

{% highlight ts %}

ondrawindicator(sender){

 //Do something

}

{% endhighlight %}

{% highlight html %}

<ej-bulletgraph id="events" (drawIndicator)="ondrawindicator($event)">

{% endhighlight %}

{:#events:drawlabels}

Fires on rendering the labels.

{% highlight ts %}

ondrawlabels(sender){

 //Do something

}

{% endhighlight %}

{% highlight html %}

<ej-bulletgraph id="events" (drawLabels)="ondrawlabels($event)">

{% endhighlight %}

{:#events:drawticks}

Fires on rendering the ticks.

{% highlight ts %}

ondrawticks(sender){

 //Do something

}

{% endhighlight %}

{% highlight html %}

<ej-bulletgraph id="events" (drawTicks)="ondrawticks($event)">

{% endhighlight %}

{:#events:drawqualitativeranges}

Fires on rendering the qualitative ranges.

{% highlight ts %}

ondrawqualitativeranges(sender){

 //Do something

}

{% endhighlight %}

{% highlight html %}

<ej-bulletgraph id="events" (drawQualitativeRanges)="ondrawqualitativeranges($event)">

{% endhighlight %}

{:#events:load}

Fires on loading bullet graph.

{% highlight ts %}

onload(sender){

 //Do something

}

{% endhighlight %}

{% highlight html %}

<ej-bulletgraph id="events" (load)="onload($event)">

{% endhighlight %}