Search code examples
amcharts4

Remove semi-transparent overlay on XYChartScrollbar

All of my instances of XYChartScrollbar have some kind of mask/overlay on them - a white box with 0.5 opacity, which turns all of the black axis labels into a light-grey color.

It appears to be underneath the thumb and unselectedOverlay layers, and I've searched through all the properties and sub-objects I can think of but cannot seem to find the right setting that corresponds to this semi-transparent mask, and there's no ID in the SVG element.

If I was able to look at the side view of the chart, it might look like this:

[ ----------------- unselectedOverlay ----------------- ][ -- thumb -- ]
[ --------------------------- ???????????? --------------------------- ]
[ label ][ label ][ label ][ label ][ label ][ label ][ label ][ label ]

Does anyone know how to reference that middle layer? Here's the SVG code and the scrollbar: Scrollbar chart of dates

Solution

  • Finally figured it out. It's the X-axis renderer's labels template fillOpacity, which is a little strange, but whatever.

    // Don't make the non-thumb / unselected overlay range fade out
chart.scrollbarX.unselectedOverlay.fillOpacity = 0;

// Don't fade out the labels at all
chart.scrollbarX.series.values[0].scrollbarSeries.xAxis.renderer.labels.template.fillOpacity = 1;