Как выровнять графики и таблицы слева и справа в LightningChart

Question

Следующий пример кода заключен в div и устанавливает класс, затем я создал таблицу в другом div и попытался отобразить график слева и голоса справа, используя css float: left; но это не сработало.

Разве нельзя отображать графики и таблицы слева и справа в LightningChart?

Я был бы признателен, если бы вы мне сказали.

/*
 * LightningChartJS example that showcases a simple scatter series.
 */
// Import LightningChartJS
const lcjs = require('@arction/lcjs')

// Extract required parts from LightningChartJS.
const {
    lightningChart,
    AxisTickStrategies,
    emptyLine,
    PointShape,
    SolidFill,
    ColorRGBA,
    UIElementBuilders,
    UIButtonPictures,
    UIOrigins,
    LegendBoxBuilders
} = lcjs

// Create a XY Chart.
const dateOrigin = new Date(2018, 6, 1)
const chart = lightningChart().ChartXY({
    defaultAxisXTickStrategy: AxisTickStrategies.DateTime(dateOrigin)
})
    .setTitle('Product Sales')
    .setAutoCursor(cursor => {
        cursor.disposeTickMarkerY()
        cursor.setGridStrokeYStyle(emptyLine)
    })

// Create a LegendBox as part of the chart.
const legend = chart.addLegendBox(LegendBoxBuilders.HorizontalLegendBox)
    .setPosition({ x: 5, y: 95 })
    .setOrigin(UIOrigins.LeftTop)

// Apply Style color for each group
const smartPhonesColor = new SolidFill({ color: ColorRGBA(200, 0, 200) })
const laptopColor = new SolidFill({ color: ColorRGBA(0, 200, 200) })
const smartTvColor = new SolidFill({ color: ColorRGBA(200, 200, 0) })

// Create series.
const smartPhonesSeries = chart.addPointSeries({ pointShape: PointShape.Circle })
    .setName('Smart Phones')
    .setPointFillStyle(smartPhonesColor)
    .setPointSize(10)

const laptopsSeries = chart.addPointSeries({ pointShape: PointShape.Square })
    .setName('Laptops')
    .setPointFillStyle(laptopColor)
    .setPointSize(10)

const smartTvSeries = chart.addPointSeries({ pointShape: PointShape.Triangle })
    .setName('Smart TV')
    .setPointFillStyle(smartTvColor)
    .setPointSize(10)

// Generate some points using for each day of 3 months
const dataFrequency = 1000 * 60 * 60 * 24

// Setup view nicely.
chart.getDefaultAxisX()
    .setInterval(0, 92 * dataFrequency)

chart.getDefaultAxisY()
    .setScrollStrategy(undefined)
    .setInterval(0, 2000)
    .setTitle('Units Sold')

// Data for the plotting
const smartPhoneData = [
    { x: 0, y: 200 },
    { x: 1, y: 220 },
    { x: 2, y: 260 },
    { x: 3, y: 264 },
    { x: 4, y: 280 },
    { x: 5, y: 288 },
    { x: 6, y: 280 },
    { x: 7, y: 248 },
    { x: 8, y: 292 },
    { x: 9, y: 308 },
    { x: 10, y: 316 }
]
const laptopsData = [
    { x: 0, y: 70 },
    { x: 1, y: 57.2 },
    { x: 2, y: 88.4 },
    { x: 3, y: 83.6 },
    { x: 4, y: 80.8 },
    { x: 5, y: 106 },
    { x: 6, y: 117.2 },
    { x: 7, y: 108.4 },
    { x: 8, y: 95.6 },
    { x: 9, y: 108.8 },
    { x: 10, y: 118 }
]
const smartTvData = [
    { x: 0, y: 10 },
    { x: 1, y: 15.5 },
    { x: 2, y: 21.1 },
    { x: 3, y: 27 },
    { x: 4, y: 30.8 },
    { x: 5, y: 38 },
    { x: 6, y: 40 },
    { x: 7, y: 44.4 },
    { x: 8, y: 47.6 },
    { x: 9, y: 50.8 },
    { x: 10, y: 52 }
]

// Adding points to the series
smartPhonesSeries.add(smartPhoneData.map((point) => ({ x: point.x * dataFrequency, y: point.y })))
laptopsSeries.add(laptopsData.map((point) => ({ x: point.x * dataFrequency, y: point.y })))
smartTvSeries.add(smartTvData.map((point) => ({ x: point.x * dataFrequency, y: point.y })))

// Add series to LegendBox and style entries.
legend.add(
    smartPhonesSeries,
    true,
    'Product Sales',
    UIElementBuilders.CheckBox
        .setPictureOff(UIButtonPictures.Circle)
        .setPictureOn(UIButtonPictures.Circle)
)
legend.add(
    laptopsSeries,
    true,
    'Product Sales',
    UIElementBuilders.CheckBox
        .setPictureOff(UIButtonPictures.Rectangle)
        .setPictureOn(UIButtonPictures.Rectangle)
)
legend.add(
    smartTvSeries,
    true,
    'Product Sales',
    UIElementBuilders.CheckBox
        .setPictureOff(UIButtonPictures.Diamond)
        .setPictureOn(UIButtonPictures.Diamond)
)

// Enable AutoCursor auto-fill.
chart.setAutoCursor((cursor) => {
    cursor
        .setResultTableAutoTextStyle(true)
        .disposeTickMarkerX()
        .setTickMarkerXAutoTextStyle(false)
        .setTickMarkerYAutoTextStyle(false)
})