SciChart.js JavaScript 2D Charts API > Annotations API > AxisMarkerAnnotation
AxisMarkerAnnotation

The AxisMarkerAnnotation allows you to add a label on to the Axis at a specific X or Y value.

Declaring a AxisMarkerAnnotation in code

The following code will declare an AxisMarkerAnnotation add it to the chart.

Example Title
Copy Code
import { SciChartSurface } from "scichart";
import { NumericAxis } from "scichart/Charting/Visuals/Axis/NumericAxis";
import { NumberRange } from "scichart/Core/NumberRange";
import {EAnnotationLayer} from "scichart/Charting/Visuals/Annotations/IAnnotation";
import {ELabelPlacement} from "scichart/types/LabelPlacement";
import {AxisMarkerAnnotation} from "scichart/Charting/Visuals/Annotations/AxisMarkerAnnotation";
// Create a SciChartSurface
const { sciChartSurface, wasmContext } = await SciChartSurface.create(divElementId);
// Create an XAxis and YAxis
const xAxis = new NumericAxis(wasmContext);
xAxis.visibleRange = new NumberRange(0, 10);
sciChartSurface.xAxes.add(xAxis);
const yAxis = new NumericAxis(wasmContext);
yAxis.visibleRange = new NumberRange(0, 10);
sciChartSurface.yAxes.add(yAxis);
sciChartSurface.annotations.add(
      new AxisMarkerAnnotation({
        y1: 5.2,
        fontSize: 12,
        fontStyle: "Bold",
    }),
);

Results in the following output: 

 

Styling the AxisMarkerAnnotation

The following properties can be set to style the AxisMarkerAnnotation:

Property Description
backgroundColor The box fill color for the axis label
color The text-color for the axis label
fontFamily The font family for the axis label text
fontSize The font size for the axis label text
fontStyle The font style, e.g. Bold or Italic for the axis label text

 

 

See Also