Inner Offset without Tooltip

[jonyeokj]

What problem does this feature solve?

Right now, when I put inner offset on my time axis to make my graph look smaller and shift my labels inwards, i.e innerOffset: { left: 20, right: 20, }, I can still hover on the tooltip on the outer area of the graph and I get unexpected data, according to the y-axis of the graph. I would like an option to toggle this off or another alternative to inner Offset.

What does the proposed API look like?

No change to API

[xile611]

@jonyeokj can you share the whole spec of your case?

[jonyeokj]

const itemData = [ { key: '1719981900', value: '0', }, { key: '1719982200', value: '3', }, { key: '1719982500', value: '2', }, { key: '1719982800', value: '1', }, { key: '1719983100', value: '1', }, { key: '1719983400', value: '1', }, { key: '1719983700', value: '1', }, { key: '1719984000', value: '7', }, { key: '1719984300', value: '1', }, { key: '1719984600', value: '4', }, { key: '1719984900', value: '8', }, { key: '1719985200', value: '10', }, { key: '1719985500', value: '3', }, { key: '1719985800', value: '0', }, { key: '1719986100', value: '3', }, { key: '1719986400', value: '1', }, { key: '1719986700', value: '8', }, { key: '1719987000', value: '5', }, { key: '1719987300', value: '4', }, { key: '1719987600', value: '11', }, ];

const gmvData = [ { key: '1719981900', amount: { amount_formatted: 'S$0.00', amount_delimited: '0.00', amount: '0', currency_code: 'SGD', currency_symbol: 'S$', }, }, { key: '1719982200', amount: { amount_formatted: 'S$38.64', amount_delimited: '38.64', amount: '38.64', currency_code: 'SGD', currency_symbol: 'S$', }, }, { key: '1719982500', amount: { amount_formatted: 'S$14.78', amount_delimited: '14.78', amount: '14.78', currency_code: 'SGD', currency_symbol: 'S$', }, }, { key: '1719982800', amount: { amount_formatted: 'S$11.67', amount_delimited: '11.67', amount: '11.67', currency_code: 'SGD', currency_symbol: 'S$', }, }, { key: '1719983100', amount: { amount_formatted: 'S$6.05', amount_delimited: '6.05', amount: '6.05', currency_code: 'SGD', currency_symbol: 'S$', }, }, { key: '1719983400', amount: { amount_formatted: 'S$12.86', amount_delimited: '12.86', amount: '12.86', currency_code: 'SGD', currency_symbol: 'S$', }, }, { key: '1719983700', amount: { amount_formatted: 'S$14.85', amount_delimited: '14.85', amount: '14.85', currency_code: 'SGD', currency_symbol: 'S$', }, }, { key: '1719984000', amount: { amount_formatted: 'S$68.02', amount_delimited: '68.02', amount: '68.02', currency_code: 'SGD', currency_symbol: 'S$', }, }, { key: '1719984300', amount: { amount_formatted: 'S$6.72', amount_delimited: '6.72', amount: '6.72', currency_code: 'SGD', currency_symbol: 'S$', }, }, { key: '1719984600', amount: { amount_formatted: 'S$33.37', amount_delimited: '33.37', amount: '33.37', currency_code: 'SGD', currency_symbol: 'S$', }, }, { key: '1719984900', amount: { amount_formatted: 'S$57.15', amount_delimited: '57.15', amount: '57.15', currency_code: 'SGD', currency_symbol: 'S$', }, }, { key: '1719985200', amount: { amount_formatted: 'S$60.21', amount_delimited: '60.21', amount: '60.21', currency_code: 'SGD', currency_symbol: 'S$', }, }, { key: '1719985500', amount: { amount_formatted: 'S$48.41', amount_delimited: '48.41', amount: '48.41', currency_code: 'SGD', currency_symbol: 'S$', }, }, { key: '1719985800', amount: { amount_formatted: 'S$0.00', amount_delimited: '0.00', amount: '0', currency_code: 'SGD', currency_symbol: 'S$', }, }, { key: '1719986100', amount: { amount_formatted: 'S$26.51', amount_delimited: '26.51', amount: '26.51', currency_code: 'SGD', currency_symbol: 'S$', }, }, { key: '1719986400', amount: { amount_formatted: 'S$8.76',

  amount_delimited: '8.76',
  amount: '8.76',
  currency_code: 'SGD',
  currency_symbol: 'S$',
},

}, { key: '1719986700', amount: { amount_formatted: 'S$62.26', amount_delimited: '62.26', amount: '62.26', currency_code: 'SGD', currency_symbol: 'S$', }, }, { key: '1719987000', amount: { amount_formatted: 'S$44.60', amount_delimited: '44.60', amount: '44.6', currency_code: 'SGD', currency_symbol: 'S$', }, }, { key: '1719987300', amount: { amount_formatted: 'S$25.96', amount_delimited: '25.96', amount: '25.96', currency_code: 'SGD', currency_symbol: 'S$', }, }, { key: '1719987600', amount: { amount_formatted: 'S$98.05', amount_delimited: '98.05', amount: '98.05', currency_code: 'SGD', currency_symbol: 'S$', }, }, ];

const transformedItemData = itemData.map(({ key, value }) => ({ x: Number(key), y: Number(value), type: 'SKU orders created', displayValue: value, color: 'blue', }));

const transformedGmvData = gmvData.map(({ key, amount }) => ({ x: Number(key), y: Number(amount.amount), type: 'GMV', displayValue: S$${amount.amount}, color: 'green', }));

const getFirstKey = (data) => { if (data.length > 0) { return data[0].key; } return null; };

const getLastKey = (data) => { if (data.length > 0) { return data[data.length - 1].key; } return null; };

const spec = { type: 'line', padding: 0, data: [ { id: 'item_sold', values: transformedItemData, }, { id: 'gmv', values: transformedGmvData, }, ], series: [ { type: 'line', id: 'line0', dataId: 'item_sold', line: { style: { stroke: { gradient: 'linear', stops: [ { offset: 0, color: 'red', }, { offset: 1, color: 'blue', }, ], }, lineWidth: 3, curveType: 'monotone', }, }, seriesField: 'type', xField: 'x', yField: 'y', stack: true, }, { type: 'line', id: 'line1', dataId: 'gmv', line: { style: { stroke: { gradient: 'linear', stops: [ { offset: 0, color: 'yellow', }, { offset: 1, color: 'green', }, ], }, lineWidth: 3, curveType: 'monotone', }, }, seriesField: 'type', xField: 'x', yField: 'y', stack: true, }, ], axes: [ { orient: 'left', seriesId: ['line0'], id: 'axisLeft', domainLine: { visible: false, }, expand: { max: 0.1, }, grid: { style: { stroke: '#5D75C0', strokeOpacity: 0.4, lineWidth: 1, }, }, label: { formatter: '{label:.2s}', style: { fill: '#E5ECFF', fontWeight: 400, fontSize: 16, }, }, tick: { tickCount: 6, forceTickCount: 6, }, }, { orient: 'right', seriesId: ['line1'], id: 'axisRight', sync: { axisId: 'axisLeft', tickAlign: true }, grid: { visible: false, }, label: { formatter: '{label:.2s}', style: { fill: '#E5ECFF', fontWeight: 400, fontSize: 16, }, }, }, { orient: 'bottom', type: 'time', sampling: false, softMin: getFirstKey(itemData), softMax: getLastKey(itemData), layers: [ { timeFormat: '%H:%M', }, ], innerOffset: { left: 20, right: 20, }, domainLine: { style: { stroke: '#5D75C0', lineWidth: 2, }, }, grid: { visible: false, }, label: { space: 0, style: { fill: '#E5ECFF', fontWeight: 400, fontSize: 16, lineHeight: 40, }, }, tick: { visible: true, tickCount: 5, forceTickCount: 5, }, }, ], legends: [ { padding: [15, 10, 15, 0], visible: true, position: 'start', orient: 'top', item: { shape: { style: { size: 16, symbolType: 'roundLine', }, }, label: { space: 1, formatMethod: (text) => { return { type: 'rich', text: [ { text, fill: '#E5E5FF', opacity: 0.8, fontSize: 14, fontWeight: '500', lineHeight: 20, }, ], }; }, }, }, hover: false, offsetY: 5, }, ], tooltip: { renderMode: 'canvas', dimension: { title: { valueTimeFormat: '%H:%M', }, content: [ { key: (datum) => ${datum.type}: ${datum.displayValue}, }, ], position: 'bottom', positionMode: 'pointer', }, style: { panel: { padding: 24, backgroundColor: '#32326C', border: { radius: 16, }, }, titleLabel: { fontSize: 16, fill: 'rgba(229, 236, 255, 0.6)', lineHeight: 21, fontWeight: 300, }, keyLabel: { fontSize: 16, fill: '#FFFFFF', lineHeight: 22, }, spaceRow: 8, }, }, crosshair: [ { followTooltip: true, xField: { line: { type: 'line', style: { lineDash: [], stroke: '#799BFF', }, }, }, }, ], point: { visible: false, }, background: 'black', };