How to set Amcharts 4 scrollbar color?

Question

I am trying to set scrollbar color in Amcharts, but none of the options specified on Amcharts site has worked.

I am using "@amcharts/amcharts4": "^4.2.2" in react app.

I have tried many options which are mentioned below. None of them are working.

chart.scrollbarX = new am4core.Scrollbar();
chart.scrollbarX.fill = "#017acd";
chart.scrollbarX.setFill(new am4core.color("#017acd"));
chart.scrollbarX.setStroke(new am4core.color("#017acd"));
chart.scrollbarX.stroke = "#017acd"; //this sets the border line color of 
scrollbar.

Thanks for the help.

score 14 · Answer 1 · answered Mar 15 '19 at 19:24

A scrollbar has a background, a thumb, a startGrip and an endGrip. Each of them can be styled individually by :

chart.scrollbarX.background.fill = am4core.color("#017acd");
chart.scrollbarX.thumb.background.fill = am4core.color("#017acd");
chart.scrollbarX.startGrip.background.fill = am4core.color("#017acd");
chart.scrollbarX.endGrip.background.fill = am4core.color("#017acd");
chart.scrollbarX.stroke = am4core.color("#017acd");

You can create different states for all the components to set different colors for hover or press (down).

chart.scrollbarX.thumb.background.states.getKey('hover').properties.fill = am4core.color("#017acd");
chart.scrollbarX.thumb.background.states.getKey('down').properties.fill = am4core.color("#017acd");

I created this code pen to show you a complete example.

If you want to style not a single scrollbar, but all the scrollbars in your app I would suggest creating a custom theme for that.

function am4themes_myTheme(target) {
  if (target instanceof am4core.InterfaceColorSet) {
    target.setFor("secondaryButton", am4core.color("#6DC0D5"));
    target.setFor("secondaryButtonHover", am4core.color("#6DC0D5").lighten(-0.2));
    target.setFor("secondaryButtonDown", am4core.color("#6DC0D5").lighten(-0.2));
    target.setFor("secondaryButtonActive", am4core.color("#6DC0D5").lighten(-0.2));
    target.setFor("secondaryButtonText", am4core.color("#FFFFFF"));
    target.setFor("secondaryButtonStroke", am4core.color("#467B88"));
  }
  if (target instanceof am4core.Scrollbar) {
    target.stroke = am4core.color("#017acd");
  }
}

am4core.useTheme(am4themes_myTheme);

Here is a code pen showing a theme example.

Thanks for taking the time to provide such a detailed answer. It was really helpful. — vinod, Mar 18 '19 at 02:07
I'm glad you solved your problem. Feel free to [accept my answer](https://meta.stackexchange.com/questions/5234/how-does-accepting-an-answer-work) if you feel it was useful to you. — Samuel Philipp, Mar 18 '19 at 06:14

How to set Amcharts 4 scrollbar color?

1 Answers1