I cant draw an area chart

[Mashiane]

Expected Behaviour

Drawing an area chart

Actual Behaviour

Lines are drawn but not the area

Steps to Reproduce:

Here is a pen for it: https://codepen.io/anele-mash-mbanga/pen/NzYqby

I am using a universal method to draw the charts and just change the needed properties leaving the default properties intact. Sadly there is no complete example source code here for a working area chart. If there was such I think I could perhaps know what I am doing wrong. This is my code (with defaults provided even for those un-needed properties)

let chart = new frappe.Chart("#mfc4", { data: { labels: ['Sun','Mon','Tue','Wed','Thu','Fri','Sat','Sun'], datasets: [ {name: 'DS 1', values: [18,40,30,35,8,52,17,-4]}, {name: 'DS 2', values: [30,50,-10,15,18,32,27,14]} ] }, title: '5. Area', type: 'line', colors: ['#795548','#4caf50'], height: 200, isNavigable: 0, valuesOverPoints: 0, barOptions: { spaceRatio: 0.5, stacked: 0 }, lineOptions: {dotSize: 4, hideLine: 0, hideDots: 0, heatline: 1, areaFill: 1 }, axisOptions: { yAxisMode: 'span', xAxisMode: 'span', xIsSeries: 0 }, maxLegendPoints: 20, maxSlices: 10,
barOptions: { height: 20, depth: 2}, discreteDomains: 1 });

Please kindly advise what I'm doing wrong as I'm not sure if this is a bug / not. NOTE: Add a GIF/Screenshot if required.

Frappé Charts version: 1.1

[goynang]

I had the same problem. Turns out the docs are wrong (or at least different to the code). I found this out by digging into the source code.

Use "regionFill" rather than "areaFill" as the option name and it works.

[kedar9444]

@goynang: yes and they have updated the document now.