Custom Design for Bullet graph.
3 Oct 201724 minutes to read
<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
<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
<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
this.caption= {
enableTrim: true,
};
<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
this.caption = {
font: {
color: 'green',
}
};
<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
this.caption = {
font: {
fontFamily: 'Algerian',
}
};
<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
this.caption = {
font: {
fontStyle: 'italic',
}
};
<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
this.caption = {
font: {
fontWeight: 'lighter',
}
};
<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
this.caption = {
font: {
opacity:0.5,
}
};
<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
this.caption = {
font: {
size:'14px',
}
};
<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
this.caption = {
indicator: {
font: {
color:'green',
},
}
};
<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
this.caption = {
indicator: {
font: {
fontFamily:'Algerian',
},
}
};
<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
this.caption = {
indicator: {
font: {
fontStyle :'italic',
},
}
};
<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
this.caption = {
indicator: {
font: {
fontWeight :'lighter',
},
}
};
<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
this.caption = {
indicator: {
font: {
opacity : 0.5,
},
}
};
<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
this.caption = {
indicator: {
font: {
size :'14px',
},
}
};
<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
this.caption = {
indicator: {
location: {
x: 12
},
}
};
<ej-bulletgraph id="bullet1" [captionSettings]="caption">
</ej-bulletgraph>
captionSettings.indicator.location.y number
Specifies the vertical position of the indicator.
Default Value
- 60
Example
this.caption = {
indicator: {
location: {
y: 60
},
}
};
<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
this.caption = {
indicator: {
padding: 5
}
};
<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
this.caption = {
indicator: {
symbol:{
border:{
color:'green'
}
}
}
};
<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
this.caption = {
indicator: {
symbol:{
border:{
width:2
}
}
}
};
<ej-bulletgraph id="bullet1" [captionSettings]="caption">
</ej-bulletgraph>
captionSettings.indicator.symbol.color string
Specifies the color of indicator symbol.
Default Value
- null
Example
this.caption = {
indicator: {
symbol:{
color:'green'
}
}
};
<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
this.caption = {
indicator: {
symbol:{
imageURL :'../BulletIndicator.png'
}
}
};
<ej-bulletgraph id="bullet1" [captionSettings]="caption">
</ej-bulletgraph>
captionSettings.indicator.symbol.opacity number
Specifies the opacity of indicator symbol.
Default Value
- 1
Example
this.caption = {
indicator: {
symbol:{
opacity:0.5
}
}
};
<ej-bulletgraph id="bullet1" [captionSettings]="caption">
</ej-bulletgraph>
captionSettings.indicator.symbol.shape string
Specifies the shape of indicator symbol.
Default Value
- ””
Example
this.caption = {
indicator: {
symbol:{
shape:'triangle'
}
}
};
<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
this.caption = {
indicator: {
symbol:{
size:{
height:10
}
}
}
};
<ej-bulletgraph id="bullet1" [captionSettings]="caption">
</ej-bulletgraph>
captionSettings.indicator.symbol.size.width number
Specifies the width of indicator symbol.
Default Value
- 10
Example
this.caption = {
indicator: {
symbol:{
size:{
width:10
}
}
}
};
<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
this.caption = {
indicator: {
text:'Power Production'
}
};
<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
this.caption = {
indicator: {
textAlignment:'Far'
}
};
<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
this.caption = {
indicator: {
textAnchor:'end'
}
};
<ej-bulletgraph id="bullet1" [captionSettings]="caption">
</ej-bulletgraph>
captionSettings.indicator.textAngle number
indicator text render in the specified angle.
Default Value
- 0
Example
this.caption = {
indicator: {
textAngle :10
}
};
<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
this.caption = {
indicator: {
textPosition :'Top'
}
};
<ej-bulletgraph id="bullet1" [captionSettings]="caption">
</ej-bulletgraph>
captionSettings.indicator.textSpacing number
Specifies the space between indicator symbol and text.
Default Value
- 3
Example
this.caption = {
indicator: {
textSpacing :10
}
};
<ej-bulletgraph id="bullet1" [captionSettings]="caption">
</ej-bulletgraph>
captionSettings.indicator.visible boolean
Specifies whether indicator will be visible or not.
Default Value
- false
Example
this.caption = {
indicator: {
visible:true
}
};
<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
this.caption = {
location:{
x:15
}
};
<ej-bulletgraph id="bullet1" [captionSettings]="caption">
</ej-bulletgraph>
captionSettings.location.y number
Specifies the position in horizontal direction
Default Value
- 30
Example
this.caption = {
location:{
y:15
}
};
<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
this.caption = {
padding:2
};
<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
this.caption = {
subTitle: {
font: {
color:'green',
}
}
};
<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
this.caption = {
subTitle: {
font: {
fontFamily:'Algerian',
}
}
};
<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
this.caption = {
subTitle: {
font: {
fontStyle :'italic',
}
}
};
<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
this.caption = {
subTitle: {
font: {
fontWeight :'lighter',
}
}
};
<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
this.caption = {
subTitle: {
font: {
opacity :0.5,
}
}
};
<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
this.caption = {
subTitle: {
font: {
size :'14px',
}
}
};
<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
this.caption = {
subTitle: {
location:{
x:12
}
}
};
<ej-bulletgraph id="bullet1" [captionSettings]="caption">
</ej-bulletgraph>
captionSettings.subTitle.location.y number
Specifies the vertical position of the subtitle.
Default Value
- 45
Example
this.caption = {
subTitle: {
location:{
y:50
}
}
};
<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
this.caption = {
subTitle: {
padding:8
}
};
<ej-bulletgraph id="bullet1" [captionSettings]="caption">
</ej-bulletgraph>
captionSettings.subTitle.text string
Specifies the text to be displayed as subtitle.
Default Value
- ””
Example
this.caption = {
subTitle: {
text:'Power Production'
}
};
<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
this.caption = {
subTitle: {
textAlignment:'Far'
}
};
<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
this.caption = {
subTitle: {
textAnchor:'end'
}
};
<ej-bulletgraph id="bullet1" [captionSettings]="caption">
</ej-bulletgraph>
captionSettings.subTitle.textAngle number
Subtitle render in the specified angle.
Default Value
- 0
Example
this.caption = {
subTitle: {
textAngle:10
}
};
<ej-bulletgraph id="bullet1" [captionSettings]="caption">
</ej-bulletgraph>
captionSettings.subTitle.textPosition enum
Specifies where sub title text should be placed.
Default Value
- ‘float’
Example
this.caption = {
subTitle: {
textPosition:'Right'
}
};
<ej-bulletgraph id="bullet1" [captionSettings]="caption">
</ej-bulletgraph>
captionSettings.text string
Specifies the text to be displayed on bullet graph.
Default Value
- ””
Example
this.caption = {
text:'Production'
};
<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
this.caption = {
textAlignment:'Center'
};
<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
this.caption = {
textAnchor:'middle'
};
<ej-bulletgraph id="bullet1" [captionSettings]="caption">
</ej-bulletgraph>
captionSettings.textAngle number
Specifies the angel in which the caption is rendered.
Default Value
- 0
Example
this.caption = {
textAngle:5
};
<ej-bulletgraph id="bullet1" [captionSettings]="caption">
</ej-bulletgraph>
captionSettings.textPosition enum
Specifies how caption text should be placed.
Default Value
- ‘float’
Example
this.caption = {
textPosition:'Top'
};
<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
<ej-bulletgraph id="bullet1" [comparativeMeasureValue]=50>
</ej-bulletgraph>
enableAnimation boolean
Toggles the animation of bullet graph.
Default Value
- true
Example
<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
<ej-bulletgraph id="bullet1" flowDirection="backward">
</ej-bulletgraph>
height number
Specifies the height of the bullet graph.
Default Value
- 90
Example
<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
<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
<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
<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
<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
<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
<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
<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
this.quantitativeScale = {
comparativeMeasureSettings: {
stroke:'green'
}
};
<ej-bulletgraph id="bullet1" [quantitativeScaleSettings]="quantitativeScale">
</ej-bulletgraph>
quantitativeScaleSettings.comparativeMeasureSettings.width number
Specifies the width of the comparative measure.
Default Value
- 5
Example
this.quantitativeScale = {
comparativeMeasureSettings: {
width:6
}
};
<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
this.quantitativeScale = {
featureMeasureSettings: {
stroke:'green'
}
};
<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
this.quantitativeScale = {
featureMeasureSettings: {
width:3
}
};
<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
this.quantitativeScale = {
featureMeasures: [
{ category: 2010 },
]
};
<ej-bulletgraph id="bullet1" [quantitativeScaleSettings]="quantitativeScale">
</ej-bulletgraph>
quantitativeScaleSettings.featureMeasures.comparativeMeasureValue number
Comparative measure render till the specified value.
Default Value
- null
Example
this.quantitativeScale = {
featureMeasures: [
{ comparativeMeasureValue: 3 },
]
};
<ej-bulletgraph id="bullet1" [quantitativeScaleSettings]="quantitativeScale">
</ej-bulletgraph>
quantitativeScaleSettings.featureMeasures.value number
Feature measure render till the specified value.
Default Value
- null
Example
this.quantitativeScale = {
featureMeasures: [
{ value: 3 },
]
};
<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
this.quantitativeScale = {
fields: {
category: 'ProductId',
}
};
<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
this.quantitativeScale = {
fields: {
comparativeMeasure : 5,
}
};
<ej-bulletgraph id="bullet1" [quantitativeScaleSettings]="quantitativeScale">
</ej-bulletgraph>
quantitativeScaleSettings.fields.dataSource object
Specifies the dataSource for the bullet graph.
Default Value
- null
Example
this.quantitativeScale = {
fields: {
dataSource: data1 ,
}
};
<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
this.quantitativeScale = {
fields: {
featureMeasures: 'UnitPrice',
}
};
<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
this.quantitativeScale = {
fields: {
tableName: 'Product',
}
};
<ej-bulletgraph id="bullet1" [quantitativeScaleSettings]="quantitativeScale">
</ej-bulletgraph>
quantitativeScaleSettings.interval number
Specifies the interval for the Graph.
Default Value
- 1
Example
this.quantitativeScale = {
interval:2
};
<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
this.quatitativeScale = {
labelSettings:{
font:{
fontFamily:'Algerian'
}
}
};
<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
this.quatitativeScale = {
labelSettings:{
font:{
fontStyle:'italic'
}
}
};
<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
this.quatitativeScale = {
labelSettings:{
font:{
fontWeight:'lighter'
}
}
};
<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
this.quatitativeScale = {
labelSettings:{
font:{
opacity:0.5
}
}
};
<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
this.quatitativeScale = {
labelSettings:{
labelPlacement:'inside'
}
};
<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
this.quatitativeScale = {
labelSettings:{
labelPrefix:'$'
}
};
<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
this.quatitativeScale = {
labelSettings:{
labelSuffix:'K'
}
};
<ej-bulletgraph id="bullet1" [quantitativeScaleSettings]="quatitativeScale">
</ej-bulletgraph>
quantitativeScaleSettings.labelSettings.offset number
Specifies the horizontal/vertical padding of labels.
Default Value
- 15
Example
this.quatitativeScale = {
labelSettings:{
offset:10
}
};
<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
this.quatitativeScale = {
labelSettings:{
position:'above'
}
};
<ej-bulletgraph id="bullet1" [quantitativeScaleSettings]="quatitativeScale">
</ej-bulletgraph>
quantitativeScaleSettings.labelSettings.size number
Specifies the Size of the labels.
Default Value
- 12
Example
this.quatitativeScale = {
labelSettings:{
size:10
}
};
<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
this.quatitativeScale = {
labelSettings:{
stroke:'green'
}
};
<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
this.quatitativeScale = {
location:{
x:20
}
};
<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
this.quatitativeScale = {
location:{
y:200
}
};
<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
this.quatitativeScale = {
majorTickSettings:{
size:20
}
};
<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
this.quatitativeScale = {
majorTickSettings:{
stroke:'green'
}
};
<ej-bulletgraph id="bullet1" [quantitativeScaleSettings]="quatitativeScale">
</ej-bulletgraph>
quantitativeScaleSettings.majorTickSettings.width number
Specifies the width of the major tick lines.
Default Value
- 2
Example
this.quatitativeScale = {
majorTickSettings:{
width:2
}
};
<ej-bulletgraph id="bullet1" [quantitativeScaleSettings]="quatitativeScale">
</ej-bulletgraph>
quantitativeScaleSettings.maximum number
Specifies the maximum value of the Graph.
Default Value
- 10
Example
this.quatitativeScale = {
maximum:8
};
<ej-bulletgraph id="bullet1" [quantitativeScaleSettings]="quatitativeScale">
</ej-bulletgraph>
quantitativeScaleSettings.minimum number
Specifies the minimum value of the Graph.
Default Value
- 0
Example
this.quatitativeScale = {
minimum:1
};
<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
this.quatitativeScale = {
minorTickSettings:{
size:10
}
};
<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
this.quatitativeScale = {
minorTickSettings:{
stroke:'green'
}
};
<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
this.quatitativeScale = {
minorTickSettings:{
width:2
}
};
<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
this.quatitativeScale = {
minorTicksPerInterval:5
};
<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
this.quatitativeScale = {
tickPlacement:'inside'
};
<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
this.quatitativeScale = {
tickPosition:'near'
};
<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
<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
<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
<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
<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
<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
<ej-bulletgraph id="bullet1" [value]= 1>
</ej-bulletgraph>
width number
Specifies the width of the bullet graph.
Default Value
- 595
Example
<ej-bulletgraph id="bullet1" [width]= 600>
</ej-bulletgraph>
Methods
destroy ()
To destroy the bullet graph
Returns: void
Example
destroy(){
//Do something
this.bullet.widget.destroy();
}
redraw()
To redraw the bullet graph
Returns: void
Example
redraw(){
//Do something
this.bullet.widget.redraw();
}
setComparativeMeasureSymbol()
To set the value for comparative measure in bullet graph.
Name | Type | Description |
---|---|---|
|
number | value for the graph |
|
number | value for the graph |
Returns: void
Example
setComparativeMeasureSymbol(){
//Do something
this.range.widget.setComparativeMeasureSymbol();
}
setFeatureMeasureBarValue()
To set the value for feature measure bar.
Name | Type | Description |
---|---|---|
|
number | value for the graph |
|
number | value for the graph |
Returns: void
Example
setFeatureMeasureBarValue(){
//Do something
this.range.widget.setFeatureMeasureBarValue();
}
Events
drawCaption
Fires on rendering the caption of bullet graph.
Name | Type | Description |
---|---|---|
|
Object | returns the object of the bullet graph. |
|
Element | returns the options of the scale element. |
|
Element | returns the current captionSettings element. |
|
string | returns the type of the captionSettings. |
Example
ondrawcaption(sender){
//Do something
}
<ej-bulletgraph id="events" (drawCaption)="ondrawcaption($event)">
</ej-bulletgraph>
drawCategory
Fires on rendering the category.
Name | Type | Description |
---|---|---|
|
Object | returns the object of the bullet graph. |
|
Element | returns the options of the scale element. |
|
Element | returns the options of category element. |
|
string | returns the text value of the category that is drawn. |
Example
ondrawcategory(sender){
//Do something
}
<ej-bulletgraph id="events" (drawCategory)="ondrawcategory($event)">
</ej-bulletgraph>
drawComparativeMeasureSymbol
Fires on rendering the comparative measure symbol.
Name | Type | Description |
---|---|---|
|
Object | returns the object of the bullet graph. |
|
Element | returns the options of the scale element. |
|
Element | returns the options of comparative measure element. |
|
number | returns the value of the comparative measure symbol. |
Example
ondrawcomparativemeasuresymbol(sender){
//Do something
}
<ej-bulletgraph id="events" (drawComparativeMeasureSymbol)="ondrawcomparativemeasuresymbol($event)">
</ej-bulletgraph>
drawFeatureMeasureBar
Fires on rendering the feature measure bar.
Name | Type | Description |
---|---|---|
|
Object | returns the object of the bullet graph. |
|
Element | returns the options of the scale element. |
|
Element | returns the options of feature measure element. |
|
number | returns the value of the feature measure bar. |
Example
ondrawfeaturemeasurebar(sender){
//Do something
}
<ej-bulletgraph id="events" (drawFeatureMeasureBar)="ondrawfeaturemeasurebar($event)">
</ej-bulletgraph>
drawIndicator
Fires on rendering the indicator of bullet graph.
Name | Type | Description |
---|---|---|
|
Object | returns an object to customize bullet graph indicator text and symbol before rendering it. |
|
Object | returns the object of bullet graph. |
|
string | returns the type of event. |
|
boolean | for canceling the event. |
Example
ondrawindicator(sender){
//Do something
}
<ej-bulletgraph id="events" (drawIndicator)="ondrawindicator($event)">
</ej-bulletgraph>
drawLabels
Fires on rendering the labels.
Name | Type | Description |
---|---|---|
|
Object | returns the object of the bullet graph. |
|
Element | returns the options of the scale element. |
|
Element | returns the current label element. |
|
string | returns the label type. |
Example
ondrawlabels(sender){
//Do something
}
<ej-bulletgraph id="events" (drawLabels)="ondrawlabels($event)">
</ej-bulletgraph>
drawTicks
Fires on rendering the ticks.
Name | Type | Description |
---|---|---|
|
object | returns the model of the bullet graph. |
|
string | returns the name of the event. |
|
boolean | if the event should be canceled; otherwise, false. |
|
object | returns the settings for majorTicks. |
|
object | returns the settings for minorTicks. |
|
number | returns the maximum value. |
|
number | returns the minimum value. |
|
number | returns the interval value. |
|
number | returns the value of minorTicksPerInterval. |
Example
ondrawticks(sender){
//Do something
}
<ej-bulletgraph id="events" (drawTicks)="ondrawticks($event)">
</ej-bulletgraph>
drawQualitativeRanges
Fires on rendering the qualitative ranges.
Name | Type | Description |
---|---|---|
|
Object | returns the object of the bullet graph. |
|
number | returns the index of current range. |
|
Object | returns the settings for current range. |
|
number | returns the end value of current range. |
Example
ondrawqualitativeranges(sender){
//Do something
}
<ej-bulletgraph id="events" (drawQualitativeRanges)="ondrawqualitativeranges($event)">
</ej-bulletgraph>
load
Fires on loading bullet graph.
Name | Type | Description |
---|---|---|
|
object | returns the model of the bullet graph. |
|
string | returns the name of the event. |
|
boolean | if the event should be canceled; otherwise, false. |
Example
onload(sender){
//Do something
}
<ej-bulletgraph id="events" (load)="onload($event)">
</ej-bulletgraph>