Level Up Your React Charts: Mastering Scrollbar Customization
Tags: react, charts, ui, datavisualization
Published: 2023-11-06 14:49:19

---
title: Level Up Your React Charts: Mastering Scrollbar Customization
published: true
date: 2023-11-06 12:30:05 UTC
tags: react, charts, ui, datavisualization
canonical_url: https://www.syncfusion.com/blogs/post/customize-react-charts-scrollbar.aspx
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zx9ndhhaadlp64kl8dq9.png
---
Charts are one of the most important and widely used data visualization elements for representing data in graphical form.

The [Syncfusion React Chart component](https://www.syncfusion.com/react-components/react-charts "React Chart component") supports over 50 chart types with many feature sets. One of those features is scrollbars. They are used to pan on zoomed charts and load chart data on demand.

You can customize the scrollbar to enhance its visual appearance.

In this blog, we’ll see how to customize the scrollbar in the React Charts component to our specific application needs.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/11/Customizing-the-scrollbar-in-the-React-Charts-component.png" alt="Customizing the scrollbar in the React Charts component" style="width:100%">

  <figcaption>Customizing the scrollbar in the React Charts component</figcaption>

</figure>

## React Charts’ scrollbar elements

Before diving into the code, let’s ensure we understand the scrollbar’s structure. Knowing this is helpful when styling it with different properties. The following are the elements that make up a scrollbar:

- **Thumb:** The movable part of the scrollbar, it represents the current position in the chart. By clicking and dragging it, you can quickly scroll through the chart.
- **Track:** The area of the scrollbar that the thumb moves along. It represents the entire length of the chart.
- **Arrow buttons:** These are situated at the edge of the thumb and can be clicked and dragged to scroll through the chart.
- **Grip** : You can click and move the scrollbar using the dots inside the thumb, known as the **g**** rip**.

## Customizing the scrollbar elements in React Charts

We’ve seen the elements of the scrollbar in the React Charts. Let’s see how to customize them.

### Arrow button

The scrollbar in the React Charts component typically includes zoom buttons at the ends, which allow us to perform zooming in and out actions. Here, we’re going to disable the zoom functionality.

So, let’s remove the buttons for the zooming options in the scrollbar as in the following code example.

```xml
<ChartComponent id='charts' primaryXAxis={{ valueType: 'DateTime' scrollbarSettings: { enableZoom: false} }} >

<ChartComponent/>
```

After executing this code example, the scrollbar will look like the following image.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/11/Customizing-the-arrow-buttons-in-React-Charts-scrollbar.png" alt="Customizing the arrow buttons in React Charts scrollbar" style="width:100%">

  <figcaption>Customizing the arrow buttons in React Charts scrollbar</figcaption>

</figure>

### Grip

The grip is the draggable element that allows you to click and move the scrollbar. Sometimes, we prefer to remove the grip to achieve a cleaner appearance or when the scroll height doesn’t require dragging.

Following is an example of how to remove the grip on the scrollbar.

```xml
<ChartComponent id='charts' primaryXAxis={{ valueType: 'DateTime' scrollbarSettings: { enableZoom: false, gripColor:'transparent',} }} >

<ChartComponent/>
```

After executing the previous code example, the scrollbar will look like the following image.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/11/Customizing-the-grip-in-React-Charts-scrollbar.png" alt="Customizing the grip in React Charts scrollbar" style="width:100%">

  <figcaption>Customizing the grip in React Charts scrollbar</figcaption>

</figure>

## Size of scrollbar

By default, the scrollbar has a predefined height. But we can also adjust its size, especially for better visibility on mobile devices.

Refer to the following code example.

```xml
<ChartComponent id='charts' primaryXAxis={{ scrollbarSettings: { height: 10 } }} >

<ChartComponent/>
```

After executing the previous code example, the scrollbar will look like the following image.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/11/Customizing-the-height-of-the-scrollbar-in-React-Charts.png" alt="Customizing the height of the scrollbar in React Charts" style="width:100%">

  <figcaption>Customizing the height of the scrollbar in React Charts</figcaption>

</figure>

### Customizing the thumb

Next, let’s customize the color and corner radius of the scrollbar’s thumb to match our app’s design. You can achieve the desired appearance by modifying the scrollbar API.

```xml
<ChartComponent id='charts' 
primaryXAxis={{ scrollbarSettings: { enableZoom: false, gripColor:'transparent', scrollbarColor:'#0ae, scrollbarRadius:5, height: 10 } }} >
  
<ChartComponent/>
```

After executing the previous code example, the scrollbar will look like the following image.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/11/Customizing-the-scrollbar-thumb-in-React-Charts.png" alt="Customizing the scrollbar thumb in React Charts" style="width:100%">

  <figcaption>Customizing the scrollbar thumb in React Charts</figcaption>

</figure>

### Customizing the track appearance

Like the thumb, you can also customize the color and corner radius of the track using the associated properties. Refer to the following code example.

```xml
<ChartComponent id='charts' 
primaryXAxis={{ scrollbarSettings: { enableZoom: false, gripColor:'transparent', trackColor:'#cdcdcd', trackRadius:5, scrollbarColor:'#0ae, scrollbarRadius:5, height: 10 } }} >
  
<ChartComponent/>
```
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/11/Customizing-the-scrollbar-track-appearance-in-React-Charts.jpg" alt="Customizing the scrollbar track appearance in React Charts" style="width:100%">

  <figcaption>Customizing the scrollbar track appearance in React Charts</figcaption>

</figure>

## References

For more details, refer to the scrollbar customization in React Charts [StackBlitz](https://stackblitz.com/edit/react-sdagn7-ea8ang?file=index.js,index.html "React Charts StackBlitz demo") and [web](https://ej2.syncfusion.com/react/demos/#/material3/chart/lazy-loading "React Charts Web demo") demos.

## Conclusion

Thanks for reading! In this blog, you’ve seen how to customize the scrollbar in Syncfusion [React Charts](https://www.syncfusion.com/react-components/react-charts "React Chart component") for better data visualization. We encourage you to try out these customization options and leave your feedback in the comments section below.

To try our Charts control in React, please download our [free trial](https://www.syncfusion.com/downloads/essential-js2 "Get free evaluation of the Essential Studio products"). You can also check out our [online demos](https://ej2.syncfusion.com/react/demos/#/material/chart/lazy-loading "Syncfusion React Online demo") and [documentation](https://ej2.syncfusion.com/react/documentation/chart/getting-started "Getting Started with EJ2 React Charts") for a more in-depth look at what you can do with the React Charts component.

For questions, you can contact us through our [support forums](https://www.syncfusion.com/forums "Syncfusion Support Forums"), [support portal](https://support.syncfusion.com/ "Syncfusion Support Portal"), or [feedback portal](https://www.syncfusion.com/feedback "Syncfusion Feedback Portal"). We are always happy to assist you!

## Related blogs

- [Top 7 Ways to Write CSS in Your React or Next.js App](https://www.syncfusion.com/blogs/post/write-css-react-next-js.aspx "Blog: Top 7 Ways to Write CSS in Your React or Next.js App")
- [Create Interactive Digital Logic Circuits in React](https://www.syncfusion.com/blogs/post/digital-logic-circuits-react.aspx "Blog: Create Interactive Digital Logic Circuits in React")
- [Intro to React Hooks and Context API [Webinar Show Notes]](https://www.syncfusion.com/blogs/post/react-hooks-and-context-api.aspx "Blog: Intro to React Hooks and Context API [Webinar Show Notes]")
- [Seamlessly Create an Interactive BPMN Viewer and Editor Using the React Diagram Control](https://www.syncfusion.com/blogs/post/create-a-bpmn-viewer-using-react.aspx "Blog: Seamlessly Create an Interactive BPMN Viewer and Editor Using the React Diagram Control")