Google Charts - Area Charts with Curved (Smooth) Lines

Question

I am trying to create an area chart in Google Charts but I want the lines to be curved instead of sharp. The option curveType: function seems to work only in line charts. Anyone cracked this earlier?

Answer 1

I think the reference to using intervals may be talking about something like the following. I'm giving JSON versions of options and data here. The important bits are the options "curveType" and "intervals" (which will set the color of the area under the curve and specify that the interval should be an area), and the two additional columns in the data which define the bottom and top of the interval. Set the bottom of the interval equal to the value at the bottom of the graph (0 in my case), and the top of the interval equal to the data point.

 "options" :   {
      "vAxis" : { "title" : "No. of Results", "titleTextStyle" : { "italic" : false} },
      "series": [{"color" : "#9a5324"}],
      "curveType" : "function",
      "intervals" : { "style" : "area", "color" : "#D49464" },
      "legend" : { "position" : "none" },
      "height" : 320,
      "width" : 355
   }

"data" : [
   [ "Month", "NumResults", { "role" : "annotation" }, { "id" : "iBottom", "type" : "number", "role" : "interval" }, { "id" : "iTop", "type" : "number", "role": "interval" } ],
   [ "Sep-2013",1000, "1000",0,1000 ],
   [ "Oct-2013",1550, "1550",0,1550 ],
   [ "Nov-2013",900,"900", 0,900 ],
   [ "Dec-2013",400,"400",0,400 ]]

Answer 2

There is an issue from 2015 on the subject. The first comment states:

Until then, if you want to work at it, it turns out that you could make a smoothed AreaChart using the 'interval' role, combining multiple intervals with styles of area and line. You'll have to add an extra series just so the intervals can be associated with the right domain values. See the details about intervals at https://developers.google.com/chart/interactive/docs/gallery/intervals#area-intervals