Image AxisMarkerAnnotation

SciChart.js allows to create custom axis marker annotations on axes. This is done by creating AxisMarkerAnnotation and passing an image option into the constructor.

const htmlImageElement = await createImageAsync(imageUrl);
const customAxisMarkerAnnotation = new AxisMarkerAnnotation({
    y1: 5,
    isEditable: true,
    image: htmlImageElement,
});

The full example code is below.

Javascript
json-builder

const {
  AxisMarkerAnnotation,
  NumericAxis,
  SciChartSurface,
  ELabelPlacement,
  SciChartJsNavyTheme,
  createImageAsync,
  TextAnnotation,
  EHorizontalAnchorPoint,
} = SciChart;

// or for npm import { SciChartSurface, ... } from "scichart"

async function addAnnotationToChart(divElementId) {
  const { wasmContext, sciChartSurface } = await SciChartSurface.create(
    divElementId,
    {
      theme: new SciChartJsNavyTheme(),
    }
  );
  sciChartSurface.xAxes.add(new NumericAxis(wasmContext));
  sciChartSurface.yAxes.add(new NumericAxis(wasmContext));

  const imageUrl = "https://scichart.com/demo/images/CustomMarkerImage.png";
  const htmlImageElement = await createImageAsync(imageUrl);

  // An AxisMarkerAnnotation at Y=5.2 showing an image
  sciChartSurface.annotations.add(
    new AxisMarkerAnnotation({
      y1: 5.1,
      isEditable: true,
      image: htmlImageElement,
      // Optional: Set imageWidth and imageHeight, else it will default to image size
      imageWidth: 48,
      imageHeight: 48,
    })
  );

  // Add a text annotation to explain
  sciChartSurface.annotations.add(
    new TextAnnotation({
      x1: 9.5,
      y1: 5.2,
      horizontalAnchorPoint: EHorizontalAnchorPoint.Right,
      fontSize: 16,
      text: "Draggable Axis Marker with a custom image -->",
    })
  );
}

addAnnotationToChart("scichart-root");

const { chartBuilder, EAnnotationType } = SciChart;

// or for npm import { SciChartSurface, ... } from "scichart"

const imageUrl = "https://scichart.com/demo/images/CustomMarkerImage.png";
const htmlImageElement = await createImageAsync(imageUrl);

const { wasmContext, sciChartSurface } = await chartBuilder.build2DChart(
  divElementId,
  {
    annotations: [
      {
        type: EAnnotationType.RenderContextAxisMarkerAnnotation,
        options: {
          y1: 5.1,
          isEditable: true,
          image: htmlImageElement,
          // Optional: Set imageWidth and imageHeight, else it will default to image size
          imageWidth: 48,
          imageHeight: 48,
        },
      },
    ],
  }
);

In this example we are using createImageAsync() helper function to create an htmlImageElement. This is then passed to AxisMarkerAnnotation.image property. Optionally AxisMarkerAnnotation.imageWidth and imageHeight may be set.

Here's the output:

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

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

// #region ExampleA
const {
  AxisMarkerAnnotation,
  NumericAxis,
  SciChartSurface,
  ELabelPlacement,
  SciChartJsNavyTheme,
  createImageAsync,
  TextAnnotation,
  EHorizontalAnchorPoint,
} = SciChart;

// or for npm import { SciChartSurface, ... } from "scichart"

async function addAnnotationToChart(divElementId) {
  const { wasmContext, sciChartSurface } = await SciChartSurface.create(
    divElementId,
    {
      theme: new SciChartJsNavyTheme(),
    }
  );
  sciChartSurface.xAxes.add(new NumericAxis(wasmContext));
  sciChartSurface.yAxes.add(new NumericAxis(wasmContext));

  const imageUrl = "https://scichart.com/demo/images/CustomMarkerImage.png";
  const htmlImageElement = await createImageAsync(imageUrl);

  // An AxisMarkerAnnotation at Y=5.2 showing an image
  sciChartSurface.annotations.add(
    new AxisMarkerAnnotation({
      y1: 5.1,
      isEditable: true,
      image: htmlImageElement,
      // Optional: Set imageWidth and imageHeight, else it will default to image size
      imageWidth: 48,
      imageHeight: 48,
    })
  );

  // Add a text annotation to explain
  sciChartSurface.annotations.add(
    new TextAnnotation({
      x1: 9.5,
      y1: 5.2,
      horizontalAnchorPoint: EHorizontalAnchorPoint.Right,
      fontSize: 16,
      text: "Draggable Axis Marker with a custom image -->",
    })
  );
}

addAnnotationToChart("scichart-root");
// #endregion

async function builderExample(divElementId) {
  // #region ExampleB
  const { chartBuilder, EAnnotationType } = SciChart;

  // or for npm import { SciChartSurface, ... } from "scichart"

  const imageUrl = "https://scichart.com/demo/images/CustomMarkerImage.png";
  const htmlImageElement = await createImageAsync(imageUrl);

  const { wasmContext, sciChartSurface } = await chartBuilder.build2DChart(
    divElementId,
    {
      annotations: [
        {
          type: EAnnotationType.RenderContextAxisMarkerAnnotation,
          options: {
            y1: 5.1,
            isEditable: true,
            image: htmlImageElement,
            // Optional: Set imageWidth and imageHeight, else it will default to image size
            imageWidth: 48,
            imageHeight: 48,
          },
        },
      ],
    }
  );
  // #endregion
}

// Uncomment this to use the builder example //builderExample("scichart-root");

On the chart we can see a cloud-shaped custom axis label annotation. The annotation is draggable along the YAxis.