---
title: "Chart of the Week: Creating a WPF Range Column Chart to Visualize ChatGPT’s Performance in Competitive Exams"
published_at: "2023-07-06T11:11:32+00:00"
modified_at: "2026-01-19T09:52:11+00:00"
url: "https://www.syncfusion.com/blogs/post/wpf-range-column-chart-visualize-chatgpt-performance"
excerpt: "This blog explains how to visualize ChatGPT’s performance in competitive exams using the Syncfusion WPF Range Column Chart."
taxonomy_category:
  - "Chart"
  - "Chart of the week"
  - "Desktop"
  - "Syncfusion"
  - "UI"
  - "WPF"
taxonomy_post_tag:
  - "Charts"
  - "Data Visualization"
  - "desktop"
  - "Syncfusion"
  - "WPF"
---

[Chart of the week](https://www.syncfusion.com/blogs/category/chart-of-the-week)
# Chart of the Week: Creating a WPF Range Column Chart to Visualize ChatGPT’s Performance in Competitive Exams

[Moneeshram Dhanabal](https://www.syncfusion.com/blogs/author/moneeshram-dhanabal)

![Chart of the Week: Creating a WPF Range Column Chart to Visualize ChatGPT’s Performance in Competitive Exams](https://www.syncfusion.com/blogs/wp-content/uploads/2023/07/Chart-of-the-Week-Creating-a-WPF-Range-Column-Chart-to-Visualize-ChatGPTs-Performance-in-Competitive-Exams.png)


Welcome to our “**Chart of the Week**” blog series.

Today, we will visualize the performance of ChatGPT on academic and professional exams using the Syncfusion [WPF Range Column Chart](https://www.syncfusion.com/wpf-controls/charts/wpf-range-column-chart)
 control. Please note that this control is supported only on desktops running Windows OS.

The ChatGPT-4 version was released in March 2023, which is significantly more capable than GPT-3.5, released in March 2022. OpenAI ChatGPT-4 demonstrates human-level performance on most professional and academic exams.

To assess the capabilities of ChatGPT, OpenAI has simulated test runs for various professional and academic exams, including SATs, the bar examination, and various advanced placement (AP) finals. Notably, it passed a simulated version of the Uniform Bar Examination, scoring in the top 10% of test takers.

Now, let’s explore how to use the Syncfusion WPF Range Column control to visualize ChatGPT’s performance on academic and professional exams.

## Step 1: Gathering ChatGPT percentile data

Before creating a chart, we should gather the performance data from the [ChatGPT-4.0 Technical Report](https://cdn.openai.com/papers/gpt-4.pdf)
.

## Step 2: Preparing the data for the chart

To create a range column chart, we need to provide the percentile data in a specific format. To achieve this, we should create the **Model** class to hold data using the** ExamType**, ** Subject**, ** ChatGPT_4**, and ** ChatGPT_35** properties. And we use the ** ExamName** property to combine exam type and subject in a single string to display them in chart axis labels.

Refer to the following code example.

```
public class Model
{
    private string _subject;
    private string _examType;
    private string _examName;

    public string ExamName 
    { 
        get { return _examName; }
    }

    public string Subject
    {
        get { return _subject; }
        set
        {
            _subject = value;
            _examName = _subject + "\n" + _examType;
        }
    }

    public string? ExamType 
    { 
        get { return _examType; }
        set
        {
            _examType = value;
            _examName = _subject + "\n" + _examType;
        }
    }
    
    public double ChatGPT_4 { get; set; }
    public double ChatGPT_35 { get; set; }
}
```

We then need to generate the collection of ChatGPT’s scores in the **Model** class along with its ** ChatGPT_4** and ** ChatGPT_35** properties. To do this, we should create an ** ObservableCollection** of type Model in the ** ViewModel** class and store the ** Model** class objects with percentile scores from the reference PDF. Then, set the ** ViewModel** class as the chart’s data context.

```
public class ViewModel
{
    public ObservableCollection<Model> Data { get; set; }
    
    public ViewModel()
    {
        
        Data = new ObservableCollection<Model>();
        Data.Add(new Model() { Subject = "Verbal", ExamType="GRE", ChatGPT_35 = 63, ChatGPT_4 = 99 });
        Data.Add(new Model() { Subject = "Evidence-based Reading & Writing", ExamType ="SAT", ChatGPT_35 = 87, ChatGPT_4 = 93 });
        Data.Add(new Model() { Subject = "Uniform Bar Exam", ExamType ="Law", ChatGPT_35 = 10, ChatGPT_4 = 90 });
        Data.Add(new Model() { Subject = "Math", ExamType ="SAT", ChatGPT_35 = 70, ChatGPT_4 = 89 });
        Data.Add(new Model() { Subject = "LSAT", ExamType ="Law", ChatGPT_35 = 40, ChatGPT_4 = 88 });
        Data.Add(new Model() { Subject = "Biology", ExamType ="Advanced Placement", ChatGPT_35 = 62, ChatGPT_4 = 85 });
        Data.Add(new Model() { Subject = "Psychology", ExamType ="Advanced Placement", ChatGPT_35 = 83, ChatGPT_4 = 83 });
        Data.Add(new Model() { Subject = "Quantitative", ExamType ="GRE", ChatGPT_35 = 25, ChatGPT_4 = 80 });
        Data.Add(new Model() { Subject = "Chemistry", ExamType ="Advanced Placement", ChatGPT_35 = 22, ChatGPT_4 = 71 });
        Data.Add(new Model() { Subject = "Physics-2", ExamType ="Advanced Placement", ChatGPT_35 = 30, ChatGPT_4 = 66 });
        Data.Add(new Model() { Subject = "English Language", ExamType ="Advanced Placement", ChatGPT_35 = 14, ChatGPT_4 = 14 });

        var list = Data;
    }
}
```

## Step 3: Configuring the Syncfusion WPF Charts

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

To visualize ChatGPT’s performance on each exam, we’ll use the **RangeColumnSeries** instance.

```
<sync:RangeColumnSeries ItemsSource="{Binding Data}" XBindingPath="ExamName" High="ChatGPT_4" Low="ChatGPT_35" IsTransposed="True" SegmentSpacing="0.9" VisibilityOnLegend="Collapsed">
 <sync:RangeColumnSeries.Interior>
  <LinearGradientBrush>
   <GradientStop Offset="0" Color="#00ff8f"/>
   <GradientStop Offset="1" Color="#0047F0"/>
  </LinearGradientBrush>
 </sync:RangeColumnSeries.Interior>
</sync:RangeColumnSeries>
```

In the above example, we’ve bound our chart’s **ItemsSource** property to the ** Data** property containing both ChatGPT versions’ (4 and 3.5) percentile data. We have also specified the ** XBindingPath**, ** High**, and ** Low** properties with the ** ExamName**, ** ChatGPT_4**, and ** ChatGPT_35** properties, respectively, which inform the chart about the data points to be utilized for the x- and y-axes, respectively.

Additionally, we have customized the chart design by adjusting the segment spacing, adding a gradient interior, and transposing the series.

## Step 4: Customizing the chart appearance

We can customize the WPF Range Column Chart’s appearance by changing the axis style and adding custom data labels, titles, axis label templates, and more.

Refer to the following code example to customize the chart title and align its position.

```
<sync:SfChart Margin="5" HorizontalHeaderAlignment="Left">
 <sync:SfChart.Header>
  <StackPanel Orientation="Vertical">
   <TextBlock HorizontalAlignment="Left" Text="ChatGPT’s performance on academic and  professional exams." FontSize="22" FontWeight="Bold"/>
   <TextBlock Text="It reports GPT-4’s final exam score graded according to exam-specific rubrics and the percentile of test-takers achieving GPT-4’s score." HorizontalAlignment="Left" FontSize="15" />
  </StackPanel>
 </sync:SfChart.Header>
</sync:SfChart>
```

Let’s customize the x- and y-axes’ elements—like interval, text color, font size, grid line style, axis lines, tick lines, and more.

```
<sync:SfChart.Resources>
 <ResourceDictionary>
  <Style TargetType="Line" x:Key="lineStyle">
   <Setter Property="Stroke" Value="LightGray"/>
  </Style>
  <Style TargetType="Line" x:Key="axisStyle">
   <Setter Property="Stroke" Value="Transparent"/>
  </Style>
  <DataTemplate x:Key="AxisLabel">
   <StackPanel Orientation="Vertical" Width="130">
    <TextBlock Text="{Binding LabelContent}" FontSize="13"
               TextAlignment="Right"
               Loaded="TextBlock_Loaded" TextWrapping="Wrap"/>
   </StackPanel>
  </DataTemplate>
 </ResourceDictionary>
</sync:SfChart.Resources>

<sync:SfChart.PrimaryAxis>
 <sync:CategoryAxis IsInversed="True" MajorGridLineStyle="{StaticResource lineStyle}" 
                    LabelTemplate="{StaticResource AxisLabel}"
                    AxisLineStyle="{StaticResource axisStyle}" TickLineSize="0">
 </sync:CategoryAxis>
</sync:SfChart.PrimaryAxis>

<sync:SfChart.SecondaryAxis>
 <sync:NumericalAxis OpposedPosition="True" Interval="10" PlotOffset="15"
                     LabelCreated="NumericalAxis_LabelCreated" 
                     Minimum="0" Maximum="100" AxisLineStyle="{StaticResource axisStyle}"
                     TickLineSize="0" MajorGridLineStyle="{StaticResource lineStyle}" >
  <sync:NumericalAxis.LabelStyle>
   <sync:LabelStyle FontSize="13" Foreground="Gray"/>
  </sync:NumericalAxis.LabelStyle>
 </sync:NumericalAxis>
</sync:SfChart.SecondaryAxis>
```

In the previous code, we defined the transparent axis line style to hide the axis line using the chart resources dictionary. Then, we added a custom axis label template to customize the **Category** axis labels or any type of axes labels using the ** LabelTemplate** property.

For multi-line wrapping of axis labels, I have added the **Loaded** event and different ** FontWeight** and ** Foreground** for each wrapped line using the following code example.

```
Private void TextBlock_Loaded(object sender, RoutedEventArgs e)
{
    var textBlock = sender as TextBlock;
    var text = textBlock.Text;
    var lines = text.Split(new[] { ‘\r’, ‘\n’ });

    if (lines.Length > 1)
    {
        var lastLine = lines[lines.Length – 1];
        var lastLineRun = new Run(lastLine) { Foreground=Brushes.Gray };
        var initialTexts = text.Substring(0, text.Length – lastLine.Length);
        var initialTextsRun = new Run(initialTexts) { FontWeight = FontWeights.Medium,  
                                             Foreground=Brushes.Black };
        textBlock.Inlines.Clear();
        textBlock.Inlines.Add(initialTextsRun);
        textBlock.Inlines.Add(lastLineRun);
    }
}
```

Refer to the following code example to customize the numerical axis labels using the **LabelCreated** event.

```
private void NumericalAxis_LabelCreated(object sender, LabelCreatedEventArgs e)
{
    if (e.AxisLabel.LabelContent is string label && label == "0")
    {
        e.AxisLabel.LabelContent = "Persentile Rank";
    }
}
```

To customize the chart data labels, we’ll use the **ChartAdornmentInfo** and ** LabelTemplate** properties. To display the data labels, enable the ** ShowLabel** property and set the value of the ** SegmentLabelContent** property as ** YValue**. However, to show both high- and low-value data labels, we use two ** ScatterSeries** and set the ** ShowLabel** property value as ** True**. To hide the data label border, set the ** UseSeriesPalette** property as ** False**.

```
<sync:ScatterSeries ItemsSource="{Binding Data}" XBindingPath="ExamName" Interior="#0047F0" ScatterHeight="40" YBindingPath="ChatGPT_4" IsTransposed="True" Label="ChatGPT-4.0"  ScatterWidth="40">
 <sync:ScatterSeries.AdornmentsInfo>
  <sync:ChartAdornmentInfo ShowLabel="True" SegmentLabelContent="YValue" FontSize="13" Foreground="White" UseSeriesPalette="False" />
 </sync:ScatterSeries.AdornmentsInfo>
</sync:ScatterSeries>

<sync:ScatterSeries ItemsSource="{Binding Data}" XBindingPath="ExamName" Interior="#00ff8f" YBindingPath="ChatGPT_35" IsTransposed="True" Label="ChatGPT-3.5" ScatterHeight="27" ScatterWidth="27">
 <sync:ScatterSeries.AdornmentsInfo>
  <sync:ChartAdornmentInfo ShowLabel="True" SegmentLabelContent="YValue" FontSize="13" UseSeriesPalette="False"/>
 </sync:ScatterSeries.AdornmentsInfo>
</sync:ScatterSeries>
```

To customize individual legend items of each series, you can use the **IconWidth**, ** IconHeight**, and ** FontSize** properties. Here, we are going to display only the high (ChatGPT 4) and low (ChatGPT 3.5) value data labels for the legends in each scatter series. To restrict the ** RangeColumnSeries** legend, we’ve set its ** VisibilityOnLegend** property as ** Collapsed**.

```
<sync:SfChart.Legend>
 <sync:ChartLegend IconHeight="15" IconWidth="15" FontSize="13"/>
</sync:SfChart.Legend>

<sync:RangeColumnSeries ItemsSource="{Binding Data}" XBindingPath="ExamName"
    . . .
    VisibilityOnLegend="Collapsed">
    . . .
</sync:RangeColumnSeries>
```

After executing these code examples, we will see output like in the following image.

![Visualizing ChatGPT’s Performance in Competitive Exams Using the Syncfusion WPF Range Column Chart](https://www.syncfusion.com/blogs/wp-content/uploads/2023/07/Visualizing-ChatGPTs-Performance-in-Competitive-Exams-Using-the-Syncfusion-WPF-Range-Column-Chart-2.png)

Visualizing ChatGPT’s Performance in Competitive Exams Using the Syncfusion WPF Range Column Chart

## GitHub reference

For more details, refer to the [demo on GitHub](https://github.com/SyncfusionExamples/Create-a-RangeColumn-Chart-showing-GPT-performance-on-academic-and-professional-exams.)
.

## Conclusion

Thanks for reading! In this blog, we have seen how to use the [Syncfusion WPF Range Column Chart](https://help.syncfusion.com/wpf/charts/seriestypes/range#range-column-chart)
 to visualize ChatGPT’s performance on academic and professional exams. You can visualize other trends and changes over time in any data. We encourage you to try the steps discussed and share your thoughts in the comments below.

You can also contact us via our [support forum](https://www.syncfusion.com/forums)
, [support portal](https://support.syncfusion.com/)
, or [feedback portal](https://www.syncfusion.com/feedback)
. We are always eager to help you!

## Related blogs

- [Chart of the Week: Visualize the Transfer Spending and Earning among the Football League Clubs Using WPF Scatter Chart](https://www.syncfusion.com/blogs/post/visualize-transfer-spending-earning-wpf-scatter-chart.aspx)
- [Visualize JSON Data Quickly Using WPF Charts](https://www.syncfusion.com/blogs/post/visualize-json-data-wpf-charts.aspx)
- [Seamlessly Load Data from Different Data Sources into WPF Charts](https://www.syncfusion.com/blogs/post/different-data-source-wpf-charts.aspx)
- [Give Your WPF Application a Fresh Look with New Windows 11 Themes](https://www.syncfusion.com/blogs/post/give-your-wpf-application-a-fresh-look-with-new-windows-11-themes.aspx)