Version: 5.1.0

Positioning charts

LightningChart components are positioned using HTML <div> elements and CSS.

When a new LightningChart component is created, the user should supply reference to the <div> that the chart should be fitted into.

<head>
  <style>
    /* <div> is styled and positioned here */
    #my-chart-div {
      width: 600px;
      height: 400px;
    }
  </style>
</head>
<body>
  <!-- <div> is created here -->
  <div id="my-chart-div"></div>
  <script>
    // <div> is specified for the chart here
    const container = document.getElementById("my-chart-div");
    const chart = lightningChart().ChartXY({ container });
  </script>
</body>

The <div> should be created before the chart.