WebSharper Extensions for HighCharts Public

Highcharts is a charting library written in pure HTML5/JavaScript, offering intuitive, interactive charts to your web site or web application.

Library home Example More examples

Nuget

Install-Package WebSharper.Highcharts

WebSharper.Highcharts

Highcharts is a JavaScript charting library, which can produce interactive HTML5 charts from a config object. Highstock is an extension of Highcharts adding more chart types geared for stock price visualization. Highmaps creates interactive map charts with drilldown feature.

The WebSharper bindings for Highcharts provide a strongly typed interface to to the configuration object and helper functions. These are automatically generated from the official API documentation, see the full list of settings there. Similar API documentation for Highstock and Highmaps is also available.

The simplest way to define a chart with HighCharts in a WebSharper Web.Control class:

1
2
3
4
5
6
Div [] |>! OnAfterRender (fun el ->
    Highcharts.Create(JQuery.Of el.Body,
        HighchartsCfg(
            // config properties
        )
    )

Sometimes a config property can accept multiple types, for example an array instead of a config object. In these cases, use WebSharper's As helper function to cast it to the required type. As this cast is erased from the resulting JavaScript code, the library works as intended.

Resources

If you want to use Highcharts only, use this line on your JavaScript annotated code or Web.Config class.

1
2
3
open IntelliFactory.WebSharper.Highcharts

[<Require(typeof<Resources.Highcharts>)>]

Highstock contains Highcharts, so just add Resources.Highstock instead and this will enable using the Highcharts functions too.

Highmaps is available as an extension to either Highcharts or Highstock. Use one of these lines to get the correct extension module:

1
2
[<Require(typeof<Resources.MapModuleForCharts>)>]
[<Require(typeof<Resources.MapModuleForStock>)>]