area not filling correctly

[LorisLombardo87]

🐛 Bug report

i'm trying to color each segment of an area chart by the dimension value. but the chart gets the first color all across.

Steps to Reproduce

I've set the color scale like this

`
color: {

                    type: 'sequential-color',
                    min: 0,
                    max: 360,

                    range: ['hsl(0,50%,50%)','hsl(5,50%,50%)','hsl(10,50%,50%)','hsl(15,50%,50%)','hsl(20,50%,50%)','hsl(25,50%,50%)','hsl(30,50%,50%)','hsl(35,50%,50%)','hsl(40,50%,50%)','hsl(45,50%,50%)','hsl(50,50%,50%)','hsl(55,50%,50%)','hsl(60,50%,50%)','hsl(65,50%,50%)','hsl(70,50%,50%)','hsl(75,50%,50%)','hsl(80,50%,50%)','hsl(85,50%,50%)','hsl(90,50%,50%)','hsl(95,50%,50%)','hsl(100,50%,50%)','hsl(105,50%,50%)','hsl(110,50%,50%)','hsl(115,50%,50%)','hsl(120,50%,50%)','hsl(125,50%,50%)','hsl(130,50%,50%)','hsl(135,50%,50%)','hsl(140,50%,50%)','hsl(145,50%,50%)','hsl(150,50%,50%)','hsl(155,50%,50%)','hsl(160,50%,50%)','hsl(165,50%,50%)','hsl(170,50%,50%)','hsl(175,50%,50%)','hsl(180,50%,50%)','hsl(185,50%,50%)','hsl(190,50%,50%)','hsl(195,50%,50%)','hsl(200,50%,50%)','hsl(205,50%,50%)','hsl(210,50%,50%)','hsl(215,50%,50%)','hsl(220,50%,50%)','hsl(225,50%,50%)','hsl(230,50%,50%)','hsl(235,50%,50%)','hsl(240,50%,50%)','hsl(245,50%,50%)','hsl(250,50%,50%)','hsl(255,50%,50%)','hsl(260,50%,50%)','hsl(265,50%,50%)','hsl(270,50%,50%)','hsl(275,50%,50%)','hsl(280,50%,50%)','hsl(285,50%,50%)','hsl(290,50%,50%)','hsl(295,50%,50%)','hsl(300,50%,50%)','hsl(305,50%,50%)','hsl(310,50%,50%)','hsl(315,50%,50%)','hsl(320,50%,50%)','hsl(325,50%,50%)','hsl(330,50%,50%)','hsl(335,50%,50%)','hsl(340,50%,50%)','hsl(345,50%,50%)','hsl(350,50%,50%)','hsl(355,50%,50%)'],
                                          
                }  

`

and the component is as it follow
`
{
key: 'total',
type: 'line',
data: {
extract: {
field: 'hue_class',
props: {
v: { field: 'total' },
hue:{ field: 'hue' }
}
}
},
settings: {
coordinates: {
major: { scale: 'hue' },
minor: { scale: 'total', ref: 'v' }
},
layers: {
curve: 'monotone',
show: true,
line: {
strokeWidth: 2,
stroke: { scale: 'color', ref: 'hue' },
},
area: {
fill: { scale: 'color', ref: 'hue' },
opacity: 0.9
}
}
}
}

`
you will see that the area gets the first color in the map for the whole chart

Expected behavior

i'm expecting the same behavior as the box component, where each bar has its own color:

Versions

• picasso.js: <script src="https://unpkg.com/picasso.js"></script>
• Browser: Google Chrome is up to date Version 79.0.3945.88 (Official Build) (64-bit)

Additional context

some data:
`
var data = [{
type: 'matrix',
data: [
['hue_class','hue','total','selected'],
['0 <= x < 5',0,124,0],
['5 <= x < 10',5,94,0],
['10 <= x < 15',10,87,0],
['15 <= x < 20',15,113,0],
['20 <= x < 25',20,111,0],
['25 <= x < 30',25,116,0],
['30 <= x < 35',30,113,0],
['35 <= x < 40',35,77,1],
['40 <= x < 45',40,103,0],
['45 <= x < 50',45,39,0],
['50 <= x < 55',50,20,0],
['55 <= x < 60',55,12,0],
['60 <= x < 65',60,6,0],
['65 <= x < 70',65,12,0],
['70 <= x < 75',70,4,0],
['75 <= x < 80',75,14,0],
['80 <= x < 85',80,16,0],
['85 <= x < 90',85,9,0],
['90 <= x < 95',90,13,0],
['95 <= x < 100',95,6,0],
['100 <= x < 105',100,13,1],
['105 <= x < 110',105,5,0],
['110 <= x < 115',110,4,0],
['115 <= x < 120',115,3,0],
['120 <= x < 125',120,33,0],
['125 <= x < 130',125,7,0],
['130 <= x < 135',130,5,0],
['135 <= x < 140',135,19,0],
['140 <= x < 145',140,13,0],
['145 <= x < 150',145,7,0],
['150 <= x < 155',150,14,0],
['155 <= x < 160',155,17,0],
['160 <= x < 165',160,14,0],
['165 <= x < 170',165,21,0],
['170 <= x < 175',170,25,0],
['175 <= x < 180',175,13,0],
['180 <= x < 185',180,85,0],
['185 <= x < 190',185,42,0],
['190 <= x < 195',190,55,0],
['195 <= x < 200',195,106,0],
['200 <= x < 205',200,136,0],
['205 <= x < 210',205,167,0],
['210 <= x < 215',210,200,1],
['215 <= x < 220',215,172,1],
['220 <= x < 225',220,61,0],
['225 <= x < 230',225,46,2],
['230 <= x < 235',230,26,0],
['235 <= x < 240',235,7,0],
['240 <= x < 245',240,158,1],
['245 <= x < 250',245,13,0],
['250 <= x < 255',250,15,0],
['255 <= x < 260',255,18,0],
['260 <= x < 265',260,7,0],
['265 <= x < 270',265,4,0],
['270 <= x < 275',270,14,0],
['275 <= x < 280',275,9,0],
['280 <= x < 285',280,9,0],
['285 <= x < 290',285,9,0],
['290 <= x < 295',290,8,0],
['295 <= x < 300',295,2,0],
['300 <= x < 305',300,23,0],
['305 <= x < 310',305,2,0],
['310 <= x < 315',310,4,0],
['315 <= x < 320',315,3,0],
['320 <= x < 325',320,3,0],
['325 <= x < 330',325,3,0],
['330 <= x < 335',330,11,0],
['335 <= x < 340',335,19,0],
['340 <= x < 345',340,17,0],
['345 <= x < 350',345,23,0],
['350 <= x < 355',350,36,0],
['355 <= x < 360',355,39,0]
]
}];

`