Add a range bar chart in the Bold Reports^® Web Report Designer

You add a Range Bar Chart to a report in the Bold Reports^® Web Report Designer by dragging it from the item panel. Use it to display a range of data by plotting two Y-values (low and high) per data point.

How do I add a range bar chart to the report?

The Web Report Designer lists the range bar chart under the Comparison category in the item panel.

Drag and drop the range bar chart from the item panel into the design area.

The range bar chart is rendered in the design area, and the chart properties are listed in the properties panel.

How do I create data for the range bar chart?

To present data in the range bar chart in the Web Report Designer, create a dataset and bind data to the chart data region. This example uses the following JSON data 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. This example creates a dataset using JSON inline data to design the report.

How do I assign data to the range bar chart?

The Range Bar Chart in the Web Report Designer needs a minimum of 2 value elements and 1 column element to showcase. Drop the measure or expression field that you want to analyze into the High(s) or Low(s) section. Drop the dimension that categorizes the measure onto the Column section. To categorize based on a series, also drop the respective dimension onto the Row(s) section.

To configure data in a range bar chart, follow these steps:

1. To bind data to a chart report item placed in the design area, focus on that report item.

2. Click the Properties icon in the configuration panel to open the property pane. Then, switch to the DATA tab.

   

3. The available data in the report is listed in the dropdown. Choose a data in the dropdown list.

   

4. 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.

   

5. 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.

   

   The report item design looks like the following image.

   

   Select and drag the Lowvalue or the numeric expression column from the Measures section and drop it in the Low(s) section.

   

   The report item design looks like the following image.

   

6. Aggregate Options:

   Click the Settings icon (highlighted in the following image) to open the aggregation type dropdown list.

   

   Set the aggregation type used to compute the selected column.

   

7. 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.

   

   The report item design looks like the following image.

   

8. Grouping:

   Group the added column element with another column by adding the respective dimension element into the Row(s) section.

   

   The report item design looks like the following image.

   

9. 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 the =Month(cdate("1-" & Fields!Month.Value)) expression.

   

   

   

How do I format the range bar chart?

You format the range bar chart in the Web Report Designer through the settings available in the Properties tab, for better illustration of the view that you require.

To format a range bar chart, follow these steps:

1. Drag and drop the range bar chart into the design area and resize it to the required size.

2. Configure the data for the range bar chart.

3. Focus on the range bar chart and click the Properties icon in the configuration panel to open the property pane.

   

The property pane lists the properties available for the report item with their default values.

Name

The Name property in the Web Report Designer provides a unique name for the chart item in the report.

Basic Settings

The Basic Settings category in the Web Report Designer holds the Show Legend and Choose Series properties of the range bar chart.

Show Legend

A legend in a Bold Reports^® chart is text used to describe the data plotted. You can toggle the visibility of the legend in the chart and customize the legend text appearance. To set or reset legend properties, refer to the Show Legend property.

Choose Series

The Choose Series dropdown in the Web Report Designer lists the available series when you add multiple series to the chart. To customize a series appearance, choose the required series name in the dropdown.

Refer to the Series section to customize each series using the properties panel.

Appearance

The Appearance properties in the Web Report Designer, such as border style, color, width, and background color, style the chart and customize its appearance in the report design. These properties are listed under the Appearance category in the properties panel.

Chart Area

The Chart Area property in the Web Report Designer customizes the area of the chart design.

Use the Color Palette property to customize the color of the chart. The Color Palette is listed under the Chart Area category.

In this example, the Color Palette is set to Pacific, and the design is shown in the following image.

Title

The range bar chart title in the Web Report Designer is shown or hidden by toggling the Show Chart Title checkbox. You customize the chart title 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.

No Data

The No Data property in the Web Report Designer displays static text when a dataset returns empty or zero rows at runtime.

To set or reset no data message properties, refer to the No Data Message property section.

Category Axis

The Category axis in a Bold Reports^® chart 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 or reset axis properties, refer to the Axis Properties property.

Value Axis

The Value axis in a Bold Reports^® chart 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 or reset axis properties, refer to the Axis Properties property.

Grid line

The Grid line properties in the Web Report Designer can be set for the category and value axis of the range bar chart.

Category 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.

Value Axis

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.

Page break

The page break property in the Web Report Designer controls the amount of information on each page when you preview the report. To apply the page break property to the chart report item, follow these steps.

1. The Break Location property specifies where the page break should occur. Choose any Break Location type in the dropdown.

   

2. 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.

   

3. To restart page numbering on each page, enable the Page Number Reset property checkbox.

   

Data Element

The Data element properties in the Web Report Designer control the visibility of a report item when you export the report in XML format. The Data element properties are listed in the properties panel under the Data Element category.

Name

The Data Element Name field assigns a custom name to the chart element. The chart report item is 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 (_).

Output

The Output property controls the visibility of the chart when you export the report. Choosing the following options for the Output property performs the respective operations:

• Auto or Output - Exports the chart report item.
• NoOutput - Does not export the chart report item.

Miscellaneous

The Miscellaneous category in the Web Report Designer holds the page name, custom attributes, document map, bookmark, tooltip, and custom style properties of the chart.

Page name

The page name property names the first worksheet of the Excel workbook when you export 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 sections.

Custom attributes

The custom attributes property sets the values for chart custom properties. To assign values to custom properties using the properties panel, refer to the Custom Properties section.

Document Map

A document map in a Bold Reports^® report 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 the value for the document map property. To set and reset dynamic text, refer to the Set Expression and Reset Expression sections.

Bookmark

Bookmark links in a Bold Reports^® report let users navigate to different parts of an SSRS report. You can add bookmarks to each textbox, image, table, or chart, or to the unique group values displayed in a tablix, to direct 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 sections.

Tooltip

The Tooltip property displays 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 the tooltip as shown below. ="Country: " & Fields!Country.Value + "<br>" + "Month: " & Fields!Month.Value + "<br>" + "High Value: " + Fields!Highvalue.Value + "<br>" + "Low Value: " + Fields!Lowvalue.Value

Custom Style

The Custom Style property enables the use of external CSS for styling report items, providing enhanced flexibility beyond the built-in styling options. Use this property to meet specific design requirements and maintain consistent styling across multiple reports. For a step-by-step guide on setting up custom styles in your report, check the How To section of this guide.

How do I preview the range bar chart report?

To preview the range bar chart report in the Web Report Designer, review the final design and then open the preview:

1. The final design view of the report is shown in the following image.

   

2. The report preview appears as shown in the following image.

   

Download the range bar chart report design file from GitHub.

Frequently asked questions

What data does a range bar chart need?

A range bar chart needs a minimum of 2 value elements in the High(s) and Low(s) sections and 1 column element in the Column section.

Can I show minor grid lines on a range bar chart?

Yes. Enable the Minor Grid Lines in the Advanced Options menu of the category or value axis grid line, and customize the gridline style and color.

See also

• Range column chart
• Range area chart
• Chart axis properties