VueUiXy - Interline coloring new feature
You can now color the cross section between pairs of lines.
// Obviously don't set these datapoints with useArea:true because it defeats the purpose
const dataset = ref([
{ name: 'Series A', type: 'line', series: [] },
{ name: 'Series B', type: 'line', series: [] },
])
const config = ref({
line: {
interLine: {
pairs: [
['Series A', 'Series B']
],
fillOpacity: 0.25
}
}
})By default, colors of your dataset will be used.
Colors can be overridden:
const config = ref({
line: {
interLine: {
pairs: [
['Series A', 'Series B']
],
colors: [
['#00FF00', '#FF0000'] // first color will fill areas where 'Series A' is on top, second color when 'Series B' is on top
],
fillOpacity: 0.25
}
}
})
If you just realized this is version 3 now, here are all the details.