Customizing the Stockchart Navigator bar

[Shakil]

Hi,

We have been using your tool for 1 year now and it does not disappoint.
I am a trying to mimic this stockchart Navigator bar from this jsfiddle.
http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/stock/scrollbar/style/

I tried the setOption method to customize the bar, track and rifle arrow etc from the fiddle, but could not get it to render and appears the same. Is this UI customization available in moxie if so what did I miss ?

    getNavigator().getSeries()
    .setType(Series.Type.LINE)
    .setPlotOptions(new LinePlotOptions()
    .setLineWidth(0)
    .setOption("barBackgroundColor",gray)
    .setOption("barBorderRadius",7)
    .setOption("barBorderWidth",0)
    .setOption("buttonBackgroundColor",gray)
    .setOption("barBorderWidth",0)
    .setOption("buttonArrowColor",yellow)
    .setOption("buttonBorderRadius",7)
    .setOption("rifleColor",yellow)
    .setOption("trackBackgroundColor",white)
    .setOption("trackBorderWidth",1)
    .setOption("trackBorderColor",silver)
    .setOption("trackBorderRadius",7));

[Shakil]

Sorry this is the code I attempted and compiles. Added the semicolons and unfortunately does not work to render like the jsfiddle. I am definitely missing something. I checked the API reference and saw no reference to the barBackground, track or rifleColors. Added an attachment from the the jsfiddle site with the highstock navigator preview. If anyone whats a good gander at this problem, comment to this post.

getNavigator().getSeries()
.setType(Series.Type.LINE)
.setPlotOptions(new LinePlotOptions()
.setLineWidth(0)
.setOption("barBackgroundColor","gray")
.setOption("barBorderRadius",7)
.setOption("barBorderWidth",0)
.setOption("buttonBackgroundColor","gray")
.setOption("barBorderWidth",0)
.setOption("buttonArrowColor","yellow")
.setOption("buttonBorderRadius",7)
.setOption("rifleColor","yellow")
.setOption("trackBackgroundColor","white")
.setOption("trackBorderWidth",1)
.setOption("trackBorderColor","silver")

[Cory Skowronek]

The latest version of GWT Highcharts (1.6.0) supports customizing the scrollbar, which that fiddle is an example of. I do not believe the API have been updated on moxiegroup.com yet, but here is an example of customizing the scrollbar:

    final StockChart chart = new StockChart()
        .setScrollbar(
            new Scrollbar()
                .setBarBackgroundColor("gray")
                .setBarBorderRadius(7)
                .setBarBorderWidth(0)
                .setButtonBackgroundColor("gray")
                .setButtonBorderWidth(0)
                .setButtonBorderRadius(7)
                .setTrackBackgroundColor("none")
                .setTrackBorderWidth(1)
                .setTrackBorderRadius(8)
                .setTrackBorderColor("#CCC")
            )
    ;

[Shakil]

We just applied the jsfiddle using a theme approach and it worked. Those wrappers were tried, but failed.

<script type="text/javascript" src="js/themes/gray.js"></script>