Pre loader

Multiple Y-axis label

Welcome to the SciChart Forums!

  • Please read our Question Asking Guidelines for how to format a good question
  • Some reputation is required to post answers. Get up-voted to avoid the spam filter!
  • We welcome community answers and upvotes. Every Q&A improves SciChart for everyone

WPF Forums | JavaScript Forums | Android Forums | iOS Forums

1
0

Hello,

The chart has a Y-axis on both the right and left sides, representing price and volume respectively. I would like both labels with the current values (HorizontalLineAnnotation) to be on the right Y-axis. When using yAxisId and horizontalAnchorPoint: “Right,” the volume label (left axis) appears inside the chart. Is there any way to move it to the right Y-axis? I tried using TextAnnotation instead of HorizontalLineAnnotation, and the only way to get the label to appear above the Y-axis on the right side was by using xCoordinateMode: ‘Pixel,’ but I don’t know if there’s any way to get the height in pixels for the current volume value from the left axis.

Best regards,
Kamil

Version
3.4.652
  • Jim Risen
    Hello, if I understood the idea correctly, you may need to create 2 horizontal annotations. Otherwise, to get more profound assistance, please provide us with a reproducible example of what you have got so far via CodeSandbox/CodePen, and probably some mockups of how exactly the expected result should look like
  • You must to post comments
0
0

Hi,

currently, we have this: https://ibb.co/0cmMkcq. We would like to have this blue annotation on the right side and the axes in the places where they are. The data is updated every 1s.

const yAxis = new NumericAxis(wasmContext, {
    autoRange: EAutoRange.Always,
    growBy: new NumberRange(0.1, 0.1),
    drawMajorBands: false,
    drawMajorTickLines: false,
    drawMinorGridLines: false,
    drawMinorTickLines: false,
    maxAutoTicks: 7,
    axisAlignment: EAxisAlignment.Right,
    labelProvider: this.getDynamicValueLabelProvider(),
    isVisible: false
});

const lopYAxis = new NumericAxis(wasmContext, {
    id: USER_CHART.Y_AXIS_LOP_ID,
    autoRange: EAutoRange.Always,
    growBy: new NumberRange(0.1, 0.1),
    drawMajorBands: false,
    drawMajorTickLines: false,
    drawMinorGridLines: false,
    drawMinorTickLines: false,
    axisAlignment: EAxisAlignment.Left,
    isVisible: true
    });
    // Price annotation
setCurrentPriceAnnotation() {
    try {
        this.priceAnnotation = new HorizontalLineAnnotation({
            labelPlacement: ELabelPlacement.Axis,
            strokeDashArray: [2, 2],
            showLabel: true,
            labelValue:  this.closeValues[this.closeValues.length - 1],
            stroke: "transparent",
            id: USER_CHART.PRICE_ANNOTATION,
            y1: this.closeValues[this.closeValues.length - 1],
            axisLabelFill: "#c8c8c8",
            axisFontSize: 11,
            axisLabelStroke: '#000000',
            axisFontFamily: 'Open Sans, sans-serif',
        });
        this.sciChartSurface.annotations.add(this.priceAnnotation);
    } catch (err) {
        console.log('setCurrentPriceAnnotation:', err);
        throw err;
    }
}

// Lop annotation
setLopAnnotation() {
    try {
        this.lopAnnotation = new HorizontalLineAnnotation({
            labelPlacement: ELabelPlacement.Axis,
            strokeDashArray: [2, 2],
            showLabel: true,
            labelValue:  this.lopValues[this.lopValues.length - 1],
            stroke: "transparent",
            yAxisId: USER_CHART.Y_AXIS_LOP_ID,
            id: USER_CHART.LOP_ANNOTATION,
            y1: this.lopValues[this.lopValues.length - 1],
            axisLabelFill: this.theme.lopChartColor,
            axisFontSize: 11,
            axisLabelStroke: '#000000',
            axisFontFamily: 'Open Sans, sans-serif',
        });
        this.sciChartSurface.annotations.add(this.lopAnnotation);
    } catch (err) {
        console.log('setLopAnnotation:', err);
        throw err;
    }
}
enter code here
Images
  • Jim Risen
    You probably need to set yAxisId: USER_CHART.Y_AXIS_LOP_ID on both of the annotations if you want the annotations to be placed on one side.
  • Jim Risen
    Then you can dynamically update the annotation position in Ecoordinate.Pixel based on the relevant axis visible range. Or, I believe, you can extend the annotation class to do this automatically.
  • Jim Risen
    Another approach, probably an easier one, is drawing a NatvieTextAnnotation and a BoxAnnotation over the axis. Currently this also requires some extra setup. Check the example here https://codesandbox.io/p/sandbox/bold-architecture-k2spm9?file=%2Fsrc%2FdrawExample.ts
  • You must to post comments
Showing 1 result
Your Answer

Please first to submit.