The Range Bar Chart displays information as a range of data by plotting two Y-values (low and high) per data point.
These types of charts are categorized under the Comparison
category in the item panel.
Drag and drop a range bar chart from the item panel into the design area.
Now, the range bar chart will be rendered in the design area and the chart properties will be listed in the properties panel.
To present data in the chart, create a dataset and bind data to the chart data region. In this designing section, the following json data is used for dataset creation.
[
{
points:
[{Month: 'Jan', Highvalue: 6.1, Lowvalue: 0.7}, {Month: 'Feb', Highvalue: 6.3, Lowvalue: 1.3},
{Month: 'Mar', Highvalue: 8.5, Lowvalue: 1.9}, {Month: 'Apr', Highvalue: 10.8, Lowvalue: 3.1},
{Month: 'May', Highvalue: 14.4, Lowvalue: 5.7}, {Month: 'Jun', Highvalue: 16.9, Lowvalue: 8.4},
{Month: 'Jul', Highvalue: 19.2, Lowvalue: 10.6}, {Month: 'Aug', Highvalue: 16.5, Lowvalue: 10.5},
{Month: 'Sep', Highvalue: 16.1, Lowvalue: 8.5}, {Month: 'Oct', Highvalue: 12.5, Lowvalue: 6},
{Month: 'Nov', Highvalue: 6.9, Lowvalue: 1.5}, {Month: 'Dec', Highvalue: 12.1, Lowvalue: 5.1}],
Country: 'India'
},
{
points:
[{Month: 'Jan', Highvalue: 7.1, Lowvalue: 1.7}, {Month: 'Feb', Highvalue: 7.7, Lowvalue: 1.9},
{Month: 'Mar', Highvalue: 7.5, Lowvalue: 1.2}, {Month: 'Apr', Highvalue: 9.8, Lowvalue: 2.5},
{Month: 'May', Highvalue: 11.4, Lowvalue: 4.7}, {Month: 'Jun', Highvalue: 14.4, Lowvalue: 6.4},
{Month: 'Jul', Highvalue: 17.2, Lowvalue: 9.6}, {Month: 'Aug', Highvalue: 17.9, Lowvalue: 10.7},
{Month: 'Sep', Highvalue: 15.1, Lowvalue: 7.5}, {Month: 'Oct', Highvalue: 10.5, Lowvalue: 3},
{Month: 'Nov', Highvalue: 7.9, Lowvalue: 1.2}, {Month: 'Dec', Highvalue: 9.1, Lowvalue: 4.1}],
Country: 'Germany'
}
]
Refer to the Create Data section for more information. Here, we are going to create a dataset using JSON inline data to design the report.
The Range Bar Chart needs a minimum 2 value element and 1 column element to showcase. The measure or expression field that you would like to analyze can be dropped into the High(s)
or Low(s)
section. The dimension that you would like to categorize the measure can be dropped onto the Column
section. If you would like to categorize based on a series, then the respective dimension can be dropped onto the Row(s)
section in addition.
To configure data into a range bar chart, follow the steps:
To bind data to a chart report item placed in the design area, focus on that report item.
Click the Properties
icon in the configuration panel, the property pane opens. Now, switch to the DATA
tab.
The available data in the report will be listed in the dropdown, choose a data in the dropdown list.
The numeric columns and numeric expressions are listed under the Measures
section; other types of columns and dimension expressions are listed under the Dimensions
section.
Drag and Drop Measure Element:
Select and drag the Highvalue
or the numeric expression column from the Measures
section and drop it in the High(s)
section.
Now, the report item design will look like below:
Select and drag the Lowvalue
or the numeric expression column from the Measures
section and drop it in the Low(s)
section.
Now, the report item design will look like below:
Aggregate Options:
Click the Settings
icon (highlighted below) to open the aggregation type dropdown list.
You can set the aggregation type by which you can compute the selected column.
Drag and Drop Dimension Element:
Select and drag the dimension element from the Dimensions
section to measure against any of the selected numeric column(s) in High(s)
or Low(s)
section, and drop it into the Column
section.
Now, the report item design will look like below:
Grouping:
You can group the added column element with another column, by adding the respective dimension element into the Row(s)
section.
Now, the report item design will look like below.
Formatting Column and Row(s) sections:
You can also Filter, Sort, or Group the Column or Row(s) sections using expressions.
For example, here the Month
field is sorted using =Month(cdate("1-" & Fields!Month.Value))
expression.
You can format the range bar chart for better illustration of the view that you require, through the settings available in the Properties
tab.
To format a range bar chart, follow the below steps:
Drag and drop the range bar chart into the design area and resize it to the required size.
Configure the data for the range bar chart.
Focus on the range bar chart and click the Properties
icon in the configuration panel, the property pane opens.
You can see the list of properties available for the widget with the default value.
The Name property can be used to provide a unique name for the chart item in the report.
A Legend is a text used to describe the data plotted. This allows you to toggle the visibility of the legend in chart and also customize the legend text appearance. To set/reset legend properties, refer to the Show Legend property.
You can add multiple series to the chart and the available series will be listed in the Choose Series
dropdown. To customize the series appearance, choose the required series name in the dropdown.
Refer to the Series section, to customize each series using the properties panel.
The border style, color, width, and background color properties can be used to style the chart and customize its appearance in the report design. These properties are listed under the Appearance
category in the properties panel.
The Chart Area property can be used to customize the area of the chart design.
Use the Color Palette property to customize the color of the chart. Color Palette
are listed under the Chart Area
category.
Here, we have set the Color Palette
as Pacific
and the design is shown below.
To show/hide the chart title, toggle the Show Chart Title
checkbox. The chart title can be customized by editing the Title Text
property of the chart. You can customize the font color, font text, font style, border, background, and position of the title.
The No Data property is used to display static text when a dataset results with empty or zero rows at runtime.
To set/reset no data message properties, refer to the No Data Message property section.
The Category axis displays text labels instead of numbers. To use the categorical axis, toggle the Enable Axis
checkbox under the Category Axis
category in the chart properties.
To set/reset axis properties, refer to the Axis Properties property.
The Value axis uses a numerical scale and displays numbers as labels. To use the value axis, toggle the Enable Axis
checkbox under the Value Axis
category in the chart properties.
To set/reset axis properties, refer to the Axis Properties property.
The Grid line properties can be set to category and value axis.
To show the grid line for the category axis, enable the Category Axis
checkbox.
You can also enable the Minor Grid Lines
and customize the major and minor gridline style and color in the Advanced Options
menu.
To show the grid line for the value axis, enable the Value Axis
checkbox.
You can also enable the Minor Grid Lines
and customize the major and minor gridline style and color in the Advanced Options
menu.
The page break property can be used to control the amount of information on each page when you preview the report. Follow the below steps to apply the page break property to the chart report item.
The Break Location property specifies where the page break should occur. Choose any Break Location
type in the dropdown.
To prevent predefined page breaks from being applied during report preview, enable the Break Disabled
property checkbox. You can also control the application of page breaks during report preview by using expressions. For details on setting and resetting page breaks dynamically, refer to the Set Expression and Reset Expression sections.
To restart page numbering on each page, enable the Page Number Reset
property checkbox.
Data element can be used to control visibility of a report item when exporting the report in XML format. The Data element properties are listed in the properties panel, under the Data Element
category.
You can assign a custom name to the chart element using the Name
field. The chart report item will be exported with the provided name.
Note: The name cannot contain spaces, and it must begin with a letter followed by letters, numbers, or the underscore character (_).
On exporting the report, the visibility of the chart can be controlled using the Output
property. Choosing the following options for the Output
property will perform the respective operations:
The page name property is used to name the first worksheet of the Excel workbook when exporting the report to excel format.
You can set static or dynamic text as the page name. To set and reset dynamic text, refer to the Set Expression and Reset Expression section.
This property can be used to set the values for chart custom properties. To assign values to custom properties using the properties panel, refer to the Custom Properties section.
A document map is a navigational feature that displays a separate side pane with a set of navigational links in a hierarchical structure when you view a report. A user can click the content in the list to navigate to the report page that displays that item. Refer to the Document Map section to configure the document map in the report design.
You can set static or dynamic text as a value for the document map property. To set and reset dynamic text, refer to the Set Expression and Reset Expression section.
Bookmark links allow users to navigate to different parts of a SSRS report. You can add bookmarks to each textbox, image, table or chart, or to the unique group values displayed in a tablix, which can direct the users to specified locations in the report. The value of the bookmark property can be your own strings or an expression. Refer to the Bookmark section to configure bookmarks in the report design.
You can set static or dynamic text as the value for the bookmark property. To set and reset dynamic text, refer to the Set Expression and Reset Expression section.
The Tooltip property can be used to display informative text or values when the user hovers over the report item in the report preview. To set the tooltip for the chart item using the properties panel, refer to the Tooltip section.
To customize the tooltip property in the report preview, go to Series Properties, under the Miscellaneous Category, set tooltip as like below.
="Country: " & Fields!Country.Value + "<br>" + "Month: " & Fields!Month.Value + "<br>" + "High Value: " + Fields!Highvalue.Value + "<br>" + "Low Value: " + Fields!Lowvalue.Value
The final design view of the report is shown below.
Now, the report preview can be visualized as below.
Download the above report design from the link.