Chart of the Week: Creating a WPF Range Bar Chart to Visualize the Hearing Range of Living Beings
Tags: wpf, chart, desktop, datavisualization
Published: 2024-07-11 16:55:14

---
title: Chart of the Week: Creating a WPF Range Bar Chart to Visualize the Hearing Range of Living Beings
published: true
date: 2024-07-10 14:39:37 UTC
tags: wpf, chart, desktop, datavisualization
canonical_url: https://www.syncfusion.com/blogs/post/wpf-range-bar-chart-hearing-range
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hhnoub3kvdvrmt3ygbjh.png
---
**TL;DR:** The human hearing range spans from 20 Hz to 20 kHz. Similarly, we’ll visualize the hearing ranges of various living beings by customizing the Syncfusion WPF Range Column Chart to create a Range Bar Chart.

Welcome to the **Chart of the Week** blog series!

Today, we’ll explore how to visualize the hearing range of various living beings, from humans to animals, by creating a Range Bar Chart ([Transposed Column Chart](https://www.syncfusion.com/wpf-controls/charts/wpf-range-column-chart "WPF Range Column Chart")) using the [Syncfusion WPF Charts](https://www.syncfusion.com/wpf-controls/charts/ "WPF Charts control") control. We’ll also customize the series and marker appearance of the range bar to achieve the dumbbell chart appearance.

The Range Bar Chart is a horizontal range column chart that uses range bars to display values for one or more items based on high and low values. It is also called a dumbbell chart. Using this chart, we’ll visualize the hearing range from Hertz (Hz) to kilohertz (kHz) for various living beings on Earth. 

Refer to the following image.[![Visualizing the hearing range of living beings using Syncfusion WPF Range Bar Chart](https://www.syncfusion.com/blogs/wp-content/uploads/2024/07/Visualizing-the-hearing-range-of-living-beings-using-Syncfusion-WPF-Range-Bar-Chart.png)](https://www.syncfusion.com/blogs/wp-content/uploads/2024/07/Visualizing-the-hearing-range-of-living-beings-using-Syncfusion-WPF-Range-Bar-Chart.png)

Let’s explore the steps to showcase these details using the WPF Range Bar Chart!

## Step 1: Gather hearing range data

Before creating the chart, we need to gather data on the hearing range of various living beings from [Wikipedia](https://en.wikipedia.org/wiki/Hearing_range#:~:text=Several%20animal%20species%20can%20hear,as%20low%20as%207%20Hz "Wikipedia Link: Hearing range").

## Step 2: Populate the data for the chart

Define the **HearingRangeModel** class with the **LivingBeings**, **HighValue**, and **LowValue** properties to store the hearing capacity data for our chart.

```csharp
public class HearingRangeModel
{
    public string LivingBeings { get; set; }
    public double HighValue { get; set; }
    public double LowValue { get; set; }
    public HearingRangeModel(string livingBeings, double highValue, double lowValue)
    {
        LivingBeings = livingBeings;
        HighValue = highValue;
        LowValue = lowValue;
    }
}
```

Now, generate the data collection that illustrates the hearing capacity sources using the **HearingRangeData** class with the **Data** property.

```csharp
public class HearingRangeData
{
    public ObservableCollection<HearingRangeModel> Data { get; set; }
    public HearingRangeData()
    {
        Data = new ObservableCollection<HearingRangeModel>()
        {
            new HearingRangeModel("Tuna",50,1100),
            new HearingRangeModel("Chicken", 125,2000),
            new HearingRangeModel("Goldfish", 20, 3000),
            new HearingRangeModel("Bullfrog",100,3000),
            new HearingRangeModel("Catfish",50,4000),
            new HearingRangeModel("Treefrog",50, 4000),
            new HearingRangeModel("Canary",250, 8000),
            new HearingRangeModel("Cockatiel",250,8000),
            new HearingRangeModel("Parakeet",200,8500),
            new HearingRangeModel("Elephant",17,10500),
            new HearingRangeModel("Owl",200,12000),
            new HearingRangeModel("Human",31,19000),
            new HearingRangeModel("Chinchilla",52,33000),
            new HearingRangeModel("Horse",55,33500),
            new HearingRangeModel("Cow",23,35000),
            new HearingRangeModel("Raccoon",100,40000),
            new HearingRangeModel("Sheep",125,42500),
            new HearingRangeModel("Dog",64,44000),
            new HearingRangeModel("Ferret",16,44000),
            new HearingRangeModel("Hedgehog",250,45000),
            new HearingRangeModel("Guinea-pig",47,49000),
            new HearingRangeModel("Rabbit",96,49000),
            new HearingRangeModel("Sealion",200,50000),
            new HearingRangeModel("Gerbil",56,60000),
            new HearingRangeModel("Opossum",500,64000),
            new HearingRangeModel("Albinorat", 390, 72000),
            new HearingRangeModel("Hoodedrat",530,75000),
            new HearingRangeModel("Cat",55,77000),
            new HearingRangeModel("Mouse",900, 79000),
            new HearingRangeModel("Little-brown-bat",10300,115000),
            new HearingRangeModel("Belugawhale",1000,123000),
            new HearingRangeModel("Bottlenosedolphin",150,150000),
            new HearingRangeModel("Porpoise", 75, 150000),
       };
   }
}
```

## Step 3: Configure the Syncfusion WPF Charts

Let’s configure the Syncfusion WPF Charts control using this [documentation](https://help.syncfusion.com/wpf/charts/getting-started "Getting started with WPF Charts").

Refer to the following code example.

```xml
<chart:SfChart>
           
 <chart:SfChart.PrimaryAxis>
  <chart:CategoryAxis>
  </chart:CategoryAxis>
 </chart:SfChart.PrimaryAxis>
 
 <chart:SfChart.SecondaryAxis>
  <chart:NumericalAxis>
  </chart:NumericalAxis>                             
 </chart:SfChart.SecondaryAxis>

</chart:SfChart>
```

## Step 4: Binding data to WPF Range Bar Chart

To visualize the hearing range data, we will use the Syncfusion [RangeColumnSeries](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.RangeColumnSeries.html "RangeColumnSeries class for the WPF Charts"). We will set the **IsTransposed** property to **True** to design it to replicate the Range Bar Chart.

Refer to the following code example. Here, we have bound the **ItemSource**, **XBindingPath**, **High**, and **Low** properties with the **Data**, **LivingBeings**, **HighValue**, and **LowValue** properties, respectively.

```xml
<chart:RangeColumnSeries ItemsSource="{Binding Data}" High="HighValue" Low="LowValue" XBindingPath="LivingBeings" IsTransposed="True">
               
</chart:RangeColumnSeries>
```

## Step 5: Customize the chart appearance

We can enhance the appearance of the WPF Range Bar Chart by customizing its elements, such as the title, axis, data labels, and marker.

### Customizing the chart title

Adding a title can help make the data presented in the chart more easily understood. Refer to the following code example to customize the chart title.

```xml
<chart:SfChart HorizontalHeaderAlignment="Left" >
 
 <chart:SfChart.Header>
  <Grid Margin="0,0,0,10">
   <Grid.ColumnDefinitions>
     <ColumnDefinition Width="13"/>
     <ColumnDefinition Width="*"/>
   </Grid.ColumnDefinitions>
   <StackPanel Orientation="Vertical" Margin="0,5,0,0" Background="#2582a4"/>
   <StackPanel Grid.Column="1" Margin="3,0,0,0">
    <TextBlock Text="Hearing Range Among Different Living Beings" FontSize="25" FontWeight="SemiBold" Foreground="Black"/>
    <TextBlock Text="Frequency Spectrum from Hertz (Hz) to Kilohertz (kHz)" FontSize="18" Foreground="Gray"/>
   </StackPanel>
  </Grid>
 </chart:SfChart.Header>
            
</chart:SfChart>
```

### Customizing the chart axis

You can customize the chart axis using the following properties:

- **ShowGridLines:** To adjust the visibility of the major grid lines.
- **LabelStyle:** To modify the style of the axis labels.
- **LabelPlacement:** To place the axis label at the desired position.
- **LabelCreated:** To customize the label format for a specific or whole label.

Refer to the following code example.

**XAML**

```xml
<chart:SfChart.PrimaryAxis>
 <chart:CategoryAxis AutoScrollingMode="End" AutoScrollingDelta="13" ShowGridLines="False" Interval="1" LabelPlacement="BetweenTicks">
  <chart:CategoryAxis.LabelStyle>
   <chart:LabelStyle FontSize="12"/>
  </chart:CategoryAxis.LabelStyle>
 </chart:CategoryAxis>
</chart:SfChart.PrimaryAxis>

<chart:SfChart.SecondaryAxis>
 <chart:NumericalAxis Minimum="-10000" Maximum="180000" ShowGridLines="False" LabelCreated="LabelCreated">
  <chart:NumericalAxis.LabelStyle>
   <chart:LabelStyle FontSize="12"/>
  </chart:NumericalAxis.LabelStyle>
 </chart:NumericalAxis>                             
</chart:SfChart.SecondaryAxis>
```

**C#**

```csharp
private void LabelCreated(object sender, LabelCreatedEventArgs e)
{
    double position = e.AxisLabel.Position;
    if (position >= 1000 && position <= 180000)
    {
        string text = (position / 1000).ToString("N0");
        e.AxisLabel.LabelContent = $"{text}kHz";
    }
    else
    {
        e.AxisLabel.LabelContent = $"{position:N0}Hz";
    }
}
```

### Customizing the chart color and size

The following code example shows how to customize the chart’s size and color using the **SegmentSpacing** and **Interior** properties, respectively.

```xml
<chart:RangeColumnSeries SegmentSpacing="0.9">
 
 <chart:RangeColumnSeries.Interior>
  <LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
    <GradientStop Color="#2582a4" Offset="0"/>
    <GradientStop Color="#ae3de0" Offset="0.5"/>
    <GradientStop Color="#292F2E" Offset="1"/>
  </LinearGradientBrush>
 </chart:RangeColumnSeries.Interior>
                
</chart:RangeColumnSeries>
```

### Customize the data label and marker appearance

To improve readability, we can activate and customize the chart data labels and markers using the [AdornmentsInfo](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.AdornmentSeries.html#Syncfusion_UI_Xaml_Charts_AdornmentSeries_AdornmentsInfo "AdornmentsInfo property for the WPF Charts") property.

```xml
<chart:RangeColumnSeries>
 
 <chart:RangeColumnSeries.AdornmentsInfo>
  <chart:ChartAdornmentInfo ShowLabel="True" AdornmentsPosition="TopAndBottom" Background="Transparent" LabelPosition="Outer" ShowMarker="True" Symbol="VerticalLine">
   <chart:ChartAdornmentInfo.LabelTemplate>
    <DataTemplate>
     <Label Content="{Binding Converter={StaticResource valueToRangeConverter}}" FontSize="10"/>
    </DataTemplate>
   </chart:ChartAdornmentInfo.LabelTemplate>
  </chart:ChartAdornmentInfo>
 </chart:RangeColumnSeries.AdornmentsInfo>

</chart:RangeColumnSeries>
```

### Enabling the panning interactivity

To improve the visualization, we can enable panning to scroll through series within a particular range using the [ChartZoomPanBehavior](https://help.syncfusion.com/wpf/charts/interactive-features/zoompan "ChartZoomPanBehavior property for the WPF Charts") and [AutoScrollingDelta](https://help.syncfusion.com/wpf/charts/axis#autoscrollingdelta "AutoScrollingDelta property for the WPF Charts") properties.

```xml
<chart:SfChart.PrimaryAxis>
 <chart:CategoryAxis AutoScrollingMode="End" AutoScrollingDelta="13">
 </chart:CategoryAxis>
</chart:SfChart.PrimaryAxis>

<chart:SfChart.Behaviors>
 <chart:ChartZoomPanBehavior EnablePinchZooming="False" ResetOnDoubleTap="False" EnablePanning="True" EnableMouseWheelZooming="False"/>
</chart:SfChart.Behaviors>
```

After executing the previous code examples, the output will look like the following image.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2024/07/Visualizing-the-hearing-range-of-living-beings-using-Syncfusion-WPF-Range-Bar-Chart.png" alt="Visualizing the hearing range of living beings using Syncfusion WPF Range Bar Chart" style="width:100%">

  <figcaption>Visualizing the hearing range of living beings using Syncfusion WPF Range Bar Chart</figcaption>

</figure>

## Conclusion

Thanks for reading! In this blog, we’ve seen how to visualize the data on hearing range using the [Syncfusion WPF Range Bar Chart](https://www.syncfusion.com/wpf-controls/charts/wpf-range-column-chart "WPF Range Column Chart") (Transposed Column Chart). We strongly encourage you to follow the steps outlined in this blog and share your feedback in the comments section below.

If you require assistance, please don’t hesitate to contact us via our [support forum](https://www.syncfusion.com/forums "Syncfusion Support Forum"), [support portal](https://support.syncfusion.com/ "Syncfusion Support Portal"), or [feedback portal](https://www.syncfusion.com/feedback "Syncfusion Feedback Portal"). We are always eager to help you!

## Related blogs

- [What’s New in WPF Gantt Chart: 2024 Volume 2](https://www.syncfusion.com/blogs/post/wpf-gantt-chart-2024-volume-2 "Blog: What’s New in WPF Gantt Chart: 2024 Volume 2")
- [Chart of the Week: Creating a WPF Pie Chart to Visualize the Percentage of Global Forest Area for Each Country](https://www.syncfusion.com/blogs/post/wpf-pie-chart-global-forest-area "Chart of the Week: Creating a WPF Pie Chart to Visualize the Percentage of Global Forest Area for Each Country")
- [Syncfusion Essential Studio 2024 Volume 2 Is Here!](https://www.syncfusion.com/blogs/post/syncfusion-essential-studio-2024-vol2 "Blog: Syncfusion Essential Studio 2024 Volume 2 Is Here!")
- [Chart of the Week: Creating a WPF Sunburst Chart to Visualize the Syncfusion Chart of the Week Blog Series](https://www.syncfusion.com/blogs/post/wpf-sunburst-chart-syncfusion-blogs "Blog: Chart of the Week: Creating a WPF Sunburst Chart to Visualize the Syncfusion Chart of the Week Blog Series")