Back to Questions
1.2k
views5
comments
How to make WebSharper.Charting charts responsive?
websharperchartwebsharper.charting

The charts from WebSharper.Charting don't seem to be responsive. When I don't specify the Size, width and height are fixed to 500px and 200px.

How can I make the charts responsive the same way ChartJs does it?

.

Adam's right. There's a Responsive property in the ChartJs config object. You just have to set that to true and pass it to the render function to get a responsive chart like so (http://try.websharper.com/snippet/qwe2/00006W):

1
2
3
4

Chart.Line([ for x in 1.0 .. 11.0 -> (string x, x) ])
|> fun ch -> 
    let cfg = ChartJs.LineChartConfiguration(Responsive = true)
    Renderers.ChartJs.Render(ch, Config = cfg)
By on 1/26/2016 6:22 AM ()

Hi Istvan, thanks for the reply. This does not apply to all the charts does it? For example I can't find a responsive configuration for radar chart.

By on 1/26/2016 2:56 PM ()

You are right, that seems to be missing from the ChartJs bindings. At any rate, you can always do

1
2

let cfg = ChartJs.RadarChartConfiguration()
cfg?responsive <- true
By on 1/26/2016 3:06 PM ()

Nice! Thanks!

By on 1/27/2016 7:36 AM ()

I believe you can set the Responsive property (Boolean) in the chart configuration, from what I remember.

By on 1/25/2016 3:42 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