-
Data Grid
- Overview
-
Data Binding
-
Paging and Scrolling
-
Editing
-
Grouping
-
Filtering and Sorting
- Focused Row
-
Row Drag & Drop
-
Selection
-
Columns
- State Persistence
-
Appearance
-
Templates
-
Data Summaries
-
Master-Detail
-
Export to PDF
-
Export to Excel
-
Adaptability
- Keyboard Navigation
-
Pivot Grid
- Overview
-
Data Binding
-
Field Chooser
-
Features
-
Export to Excel
-
Tree List
- Overview
-
Data Binding
- Sorting
- Paging
-
Editing
- Node Drag & Drop
- Focused Row
-
Selection
-
Filtering
-
Column Customization
- State Persistence
- Adaptability
- Keyboard Navigation
-
Scheduler
- Overview
-
Data Binding
-
Views
-
Features
- Virtual Scrolling
-
Grouping
-
Customization
- Adaptability
-
Html Editor
-
Chat
-
Diagram
- Overview
-
Data Binding
-
Featured Shapes
-
Custom Shapes
-
Document Capabilities
-
User Interaction
- UI Customization
- Adaptability
-
Charts
- Overview
-
Data Binding
-
Area Charts
-
Bar Charts
- Bullet Charts
-
Doughnut Charts
-
Financial Charts
-
Line Charts
-
Pie Charts
-
Point Charts
-
Polar and Radar Charts
-
Range Charts
-
Sparkline Charts
-
Tree Map
-
Funnel and Pyramid Charts
- Sankey Chart
-
Combinations
-
More Features
-
Export
-
Selection
-
Tooltips
-
Zooming
-
-
Gantt
- Overview
-
Data
-
UI Customization
- Strip Lines
- Export to PDF
- Sorting
-
Filtering
-
Reporting
- AI-powered Extensions
-
Interaction
-
Report Types
-
Data binding
-
Real-life Reports
-
Layout Features
-
Report Controls
-
Web-specific Features
-
Rich Text Editor
- Overview
- Load/Save
- Document Protection
-
Templates
- Autocorrect
-
Customization
- Simple View
-
Spreadsheet
- Overview
-
Open a Document
- Export And Printing
-
Features
-
UI Customization
-
Gauges
- Overview
-
Data Binding
-
Bar Gauge
-
Circular Gauge
-
Linear Gauge
-
Navigation
- Overview
- Accordion
-
Menu
- Multi View
-
Drawer
-
Tab Panel
-
Tabs
-
Toolbar
- Pagination
-
Tree View
- Right-to-Left Support
-
Layout
-
Tile View
- Splitter
-
Gallery
- Scroll View
- Resizable
-
-
Editors
- Overview
- Autocomplete
-
Calendar
- Check Box
- Color Box
- Date Box
-
Date Range Box
-
Drop Down Box
-
Number Box
-
Select Box
- Switch
-
Tag Box
- Text Area
- Text Box
- Validation
- Custom Text Editor Buttons
- Right-to-Left Support
- Editor Appearance Variants
-
Forms and Multi-Purpose
- Overview
- Button Group
- Field Set
-
Filter Builder
-
Form
- Radio Group
-
Range Selector
- Numeric Scale (Lightweight)
- Numeric Scale
- Date-Time Scale (Lightweight)
- Date-Time Scale
- Logarithmic Scale
- Discrete scale
- Custom Formatting
- Use Range Selection for Calculation
- Use Range Selection for Filtering
- Image on Background
- Chart on Background
- Customized Chart on Background
- Chart on Background with Series Template
- Range Slider
- Slider
-
Sortable
-
File Management
-
File Manager
- Overview
-
File System Types
-
Customization
-
File Uploader
-
-
Actions and Lists
-
Maps
- Overview
-
Map
-
Vector Map
-
Dialogs and Notifications
-
Localization
Charts - Bullets
Bullet charts are useful when you need to compare a single measure to a target value. A bullet bar indicates the measure and a vertical line indicates the target value. The bullet also includes a zero level line that indicates zero on the scale.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
<div class="long-title"><h3>Daily temperature</h3></div>
<div id="chart-demo">
<table class="demo-table">
<tr>
<th>
</th>
<th>June</th>
<th>July</th>
<th>August</th>
</tr>
<tr>
<th>First week</th>
<td>
@(Html.DevExtreme().Bullet()
.StartScaleValue(0)
.EndScaleValue(35)
.Tooltip(t => t.CustomizeTooltip("customizeTooltip"))
.ElementAttr("class", "bullet")
.Value(23)
.Target(20)
.Color("#ebdd8f")
)
</td>
<td>
@(Html.DevExtreme().Bullet()
.StartScaleValue(0)
.EndScaleValue(35)
.Tooltip(t => t.CustomizeTooltip("customizeTooltip"))
.ElementAttr("class", "bullet")
.Value(27)
.Target(24)
)
</td>
<td>
@(Html.DevExtreme().Bullet()
.StartScaleValue(0)
.EndScaleValue(35)
.Tooltip(t => t.CustomizeTooltip("customizeTooltip"))
.ElementAttr("class", "bullet")
.Value(20)
.Target(26)
.Color("#e55253")
)
</td>
</tr>
<tr>
<th>Second week</th>
<td>
@(Html.DevExtreme().Bullet()
.StartScaleValue(0)
.EndScaleValue(35)
.Tooltip(t => t.CustomizeTooltip("customizeTooltip"))
.ElementAttr("class", "bullet")
.Value(24)
.Target(22)
.Color("#ebdd8f")
)
</td>
<td>
@(Html.DevExtreme().Bullet()
.StartScaleValue(0)
.EndScaleValue(35)
.Tooltip(t => t.CustomizeTooltip("customizeTooltip"))
.ElementAttr("class", "bullet")
.Value(28)
.Target(24)
)
</td>
<td>
@(Html.DevExtreme().Bullet()
.StartScaleValue(0)
.EndScaleValue(35)
.Tooltip(t => t.CustomizeTooltip("customizeTooltip"))
.ElementAttr("class", "bullet")
.Value(30)
.Target(24)
.Color("#e55253")
)
</td>
</tr>
<tr>
<th>Third week</th>
<td>
@(Html.DevExtreme().Bullet()
.StartScaleValue(0)
.EndScaleValue(35)
.Tooltip(t => t.CustomizeTooltip("customizeTooltip"))
.ElementAttr("class", "bullet")
.Value(35)
.Target(24)
.Color("#ebdd8f")
)
</td>
<td>
@(Html.DevExtreme().Bullet()
.StartScaleValue(0)
.EndScaleValue(35)
.Tooltip(t => t.CustomizeTooltip("customizeTooltip"))
.ElementAttr("class", "bullet")
.Value(24)
.Target(26)
)
</td>
<td>
@(Html.DevExtreme().Bullet()
.StartScaleValue(0)
.EndScaleValue(35)
.Tooltip(t => t.CustomizeTooltip("customizeTooltip"))
.ElementAttr("class", "bullet")
.Value(28)
.Target(22)
.Color("#e55253")
)
</td>
</tr>
<tr>
<th>Fourth week</th>
<td>
@(Html.DevExtreme().Bullet()
.StartScaleValue(0)
.EndScaleValue(35)
.Tooltip(t => t.CustomizeTooltip("customizeTooltip"))
.ElementAttr("class", "bullet")
.Value(29)
.Target(25)
.Color("#ebdd8f")
)
</td>
<td>
@(Html.DevExtreme().Bullet()
.StartScaleValue(0)
.EndScaleValue(35)
.Tooltip(t => t.CustomizeTooltip("customizeTooltip"))
.ElementAttr("class", "bullet")
.Value(24)
.Target(27)
)
</td>
<td>
@(Html.DevExtreme().Bullet()
.StartScaleValue(0)
.EndScaleValue(35)
.Tooltip(t => t.CustomizeTooltip("customizeTooltip"))
.ElementAttr("class", "bullet")
.Value(21)
.Target(21)
.Color("#e55253")
)
</td>
</tr>
</table>
</div>
<script>
function customizeTooltip(arg) {
return {
text: 'Current t°: ' + arg.value + '°C<br>' + 'Average t°: ' + arg.target + '°C'
};
}
</script>
xxxxxxxxxx
xxxxxxxxxx
Configure the Bullet Bar
Specify the value property to set the length of the bullet bar. The value should be between the startScaleValue and endScaleValue. If you do not specify the scale range, the startScaleValue is 0 and the endScaleValue is calculated automatically based on measure and target values.
When you arrange several bullets in a column, set the same scale range for them so that their bullet bars can be compared visually.
To change the bar color, use the color property.
Configure the Target and Zero Level Lines
Set the target property to specify the target value. You can also use the targetColor and targetWidth properties to customize the target line appearance.
The zero level line indicates zero and has the same color as the target line. If you want to hide the zero level line, you can disable the showZeroLevel property.
Configure the Tooltip
A tooltip contains information about the measure and target values. To configure the tooltip, use the tooltip object. In this demo, the customizeTooltip function within this object customizes the tooltip content.
Use our DevExpress BI Dashboard to embed interactive business intelligence into your next web app.
The Web Dashboard is a data analysis UI component that you can embed into your ASP.NET Core or Angular, React, and Vue applications with .NET backend. Dashboards allow you to display multiple inter-connected data analysis elements such as grids, charts, maps, gauges, and others: all within an automatically-arranged layout.
The set of components allows you to deploy an all-in-one solution and switch between Viewer and Designer modes directly on the web client (includes adaptive layouts for tablet & mobile).
The Web Dashboard is available as a part of a Universal subscription.