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
- Kamil Macura asked 1 month ago
-
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 login to post comments
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
- Kamil Macura answered 4 weeks ago
-
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.
-
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.
-
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 login to post comments
Please login first to submit.