plot = new MultiView('container', { meta: { date: { sync: true }, minTemp: { min: -10, max: 15 }, maxTemp: { min: -10, max: 15 }, values: { min: -10, max: 15 }, }, tooltip: { showMarkers: false, enterable: true, domStyles: { 'g2-tooltip': { width: '200px', padding: 0, }, }, customContent: (title, items) => { const data = items[0]?.data || {}; const titleDom = ``; const tempDom = ``; const windDom = ``; let domClass; if (data.rain === true) { domClass = 'rain'; } else if (data.sunny === true) { domClass = 'sun'; } else { domClass = 'cloud'; } return `

${titleDom}${tempDom}${windDom}

`; }, }, views: [ { data: data.map((d) => { return { ...d, values: [d.minTemp, d.maxTemp] }; }), meta: { date: { sync: true }, minTemp: { min: -10, max: 15 }, maxTemp: { min: -10, max: 15 }, values: { min: -10, max: 15 }, }, axes: { date: {}, minTemp: false, maxTemp: false, values: { position: 'left', }, }, interactions: [{ type: 'active-region' }], geometries: [ { type: 'interval', xField: 'date', yField: 'values', mapping: { size: 4, style: { fill: '#EBEDF0' }, }, }, { type: 'point', xField: 'date', yField: 'minTemp', colorField: 'maxTemp', mapping: { style: { r: 5 }, shape: 'circle', color: ['#6ab7da', '#806bd9', '#da6bcc'], }, }, { type: 'point', xField: 'date', yField: 'maxTemp', colorField: 'maxTemp', mapping: { size: 5, shape: 'circle', color: ['#6ab7da', '#806bd9', '#da6bcc'], }, }, ], }, ], })