<div id="scichart-root"></div>      

body { margin: 0 }
#scichart-root {
  width: 100%;
  height: 100vh;
}

const { 
  SciChartSurface,
  NumericAxis,
  SciChartJSLightTheme,
  EAxisAlignment,
  Thickness,
  FastLineRenderableSeries,
  XyDataSeries,
  NumberRange,
  ZoomPanModifier,
  MouseWheelZoomModifier,
  ZoomExtentsModifier
} = SciChart;

async function initSciChart(divElementId) {
  const { sciChartSurface, wasmContext } = await SciChartSurface.create(divElementId, { 
    title: "Custom layout JS Chart with Transposed Axis", 
    titleStyle: { fontSize: 28, fontWeight: "bold" },
    theme: new SciChartJSLightTheme()
  });
  
  // Add the primary x,y axis
  sciChartSurface.xAxes.add(new NumericAxis(wasmContext, {
    axisTitle: "X Axis",
    backgroundColor: "#0066ff33"
  }));
  sciChartSurface.yAxes.add(new NumericAxis(wasmContext, {
    axisTitle: "Y Axis",
    backgroundColor: "#0066ff33"
  }));
  
  // Add the secondary y,x axis transposed
  sciChartSurface.xAxes.add(new NumericAxis(wasmContext, {
    id: "SecondaryXAxis",
    axisAlignment: EAxisAlignment.Right,    
    axisTitle: "X Axis Transposed",
    backgroundColor: "#ff660033",
    flippedCoordinates: true
  }));
  sciChartSurface.yAxes.add(new NumericAxis(wasmContext, {
    id: "SecondaryYAxis",
    axisAlignment: EAxisAlignment.Bottom,
    axisTitle: "Y Axis Transposed",
    backgroundColor: "#ff660033",
    growBy: new NumberRange(0, 2)
  }));
  
  // Add some series to make it clear which axis is which
  const xValues = Array.from(Array(100).keys());
  const yValues = xValues.map(x => Math.sin(x*0.3) * (150-x));
  
  // Blue series on primary X,Y axis
  sciChartSurface.renderableSeries.add(new FastLineRenderableSeries(wasmContext, {
    dataSeries: new XyDataSeries(wasmContext, { xValues, yValues }),
    stroke: "0066ff77", 
    strokeThickness: 5
  }));

  // Orange series on secondary, transposed, X,Y axis
  sciChartSurface.renderableSeries.add(new FastLineRenderableSeries(wasmContext, {
    yAxisId: "SecondaryYAxis",
    xAxisId: "SecondaryXAxis",
    dataSeries: new XyDataSeries(wasmContext, { xValues, yValues }),
    stroke: "ff660099", 
    strokeThickness: 5
  }));
  
  // Add panning, zooming interaction 
  sciChartSurface.chartModifiers.add(
    new ZoomPanModifier(),
    new MouseWheelZoomModifier(),
    new ZoomExtentsModifier()
  );
}

initSciChart("scichart-root");