Back to Questions
590
views2
comments
Highchart color zones question
websharperhighchartslineserieszonescfgcolor zones

Hi!

I am trying to understand LineSeriesZonesCfg but I am not sure of the syntax for it. In my snippet, if I just add:

1

Zones = LineSeriesZonesCfg(Color = "#FF0000" )

into a LineSeriesCfg then the chart doesn't show at all, instead of the entire line being red which is what I would expect.

If I want say values between 0 - 1 to be green and values above 3 to be red - how is that done?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

namespace Samples

open WebSharper
open WebSharper.JavaScript
open WebSharper.UI.Next
open WebSharper.UI.Next.Html
open WebSharper.UI.Next.Client
open WebSharper.JQuery
open WebSharper.Highcharts

[<JavaScript>]
module Highcharts =

    [<Require(typeof<Resources.Highcharts>)>]
    let CreateCharts () =
        divAttr [on.afterRender (fun el ->
            Highcharts.Create(JQuery.Of el,
                HighchartsCfg(
                    Series = (
                        [|LineSeriesCfg( 
                                LineWidth = 2.0,
                                Zones = LineSeriesZonesCfg(Color = "#FF0000" ),
                                Data = ([|(1.0,2.0);(2.0,3.0);(3.0,4.0);(4.0,2.5);(5.0,1.5);(6.0,4.5)|]
                                |> Array.map(fun (x,y) -> LineSeriesDataCfg(X = x, Y = y)))
                    )|]
                    )
                )
            ) |> ignore
        )] []
        
    let Main =
        CreateCharts ()
        |> Doc.RunById "main"
.

Indeed there seems to be an error in the binding, Zones expects an array of LineSeriesZonesCfg so an exception is thrown and nothing shows up. I reported the issue here. In the meantime, you can use the As function to pass an array:

1
2
3

// ...,
Zones = As [|LineSeriesZonesCfg(Color = "#FF0000" )|],
// ...
By on 10/15/2016 5:44 AM ()

Excellent, thanks for the quick reply!

By on 10/15/2016 5:57 AM ()

    Topic tags

    IntelliFactory Offices Copyright (c) 2011-2012 IntelliFactory. All rights reserved.
    Home | Products | Consulting | Trainings | Blogs | Jobs | Contact Us | Terms of Use | Privacy Policy | Cookie Policy     		Built with WebSharper