{
const colors = {
Sales: '#060',
Margin: '#6c0'
};
picasso.chart({
element: document.querySelector('#container'),
data,
settings: {
collections: [{
key: 'lines',
data: {
extract: {
field: 'Year',
props: {
s: { field: 'Sales' },
m: { field: 'Margin' }
}
}
}
}],
scales: {
y: {
data: { field: 'Sales' },
invert: true,
expand: 0.2
},
marg: {
data: { field: 'Margin' },
invert: true,
expand: 0.2
},
t: {data: { extract: { field: 'Year' } } }
},
components: [{
type: 'legend-cat',
dock: 'top',
scale: {
type: 'categorical-color',
data: ['Sales', 'Margin'],
range: [colors.Sales, colors.Margin]
}
},{
type: 'axis',
dock: 'left',
scale: 'y',
formatter: {
type: 'd3-number',
format: '$,.1r'
},
settings: {
labels: {
fill: colors.Sales
}
},
},{
type: 'axis',
dock: 'right',
scale: 'marg',
settings: {
labels: {
fill: colors.Margin
}
},
formatter: {
type: 'd3-number',
format: '.0%'
}
},{
type: 'axis',
dock: 'bottom',
scale: 't',
formatter: {
type: 'd3-time',
format: '%Y-%m'
}
}, line('marg', 'm', colors.Margin),
line('y', 's', colors.Sales, '2 4')
]
}
})
}