I have followed this instructions:
https://lightningchart.com/js-charts/docs/features/ui/
and got this box, I don't need to put text in it so I just put an empty string ' '
is it possible to control the width and height of the TextBox?
for example to make the TextBox height to be from 20.0 to 16.0 ?
for example if I want to specify the TextBox dimensions as a rectangle for each point what to be located?
imports
export const CreateLeadChart = (
dashboard: Dashboard,
maxYChartBorder: number
) => {
const BackgroundFill = new SolidFill({
color: ColorHEX("#ffffff"),
});
const LeadChart = dashboard
.createChartXY({
columnIndex: 2,
rowIndex: 0,
})
.setSeriesBackgroundFillStyle(BackgroundFill);
const blacklineSeries = LeadChart.addLineSeries({}).setStrokeStyle(
(stroke) =>
new SolidLine({
thickness: 7,
fillStyle: new SolidFill({ color: ColorHEX("#212121") }),
})
);
const tipLineSeries = LeadChart.addLineSeries({}).setStrokeStyle(
(stroke) =>
new SolidLine({
thickness: 2,
fillStyle: new SolidFill({ color: ColorHEX("#BDBDBD") }),
})
);
const dataGray = [
{ x: 2.0, y: 10.52, z: 1 },
{ x: 2.0, y: maxYChartBorder, z: 12 },
];
const dataTip = [
{ x: 2.0, y: 9.52, z: 1 },
{ x: 2.0, y: 8.52, z: 1 },
];
graylineSeries.add(dataGray);
blacklineSeries.add(dataBlack);
tipLineSeries.add(dataTip);
// display blue and red boxes https://lightningchart.com/js-charts/docs/features/ui/
const axisX = LeadChart.getDefaultAxisX();
const axisY = LeadChart.getDefaultAxisY();
const textBox = LeadChart.addUIElement(UIElementBuilders.TextBox, {
x: axisX,
y: axisY,
})
.setPosition({ x: 2.2, y: 20 })
.setOrigin(UIOrigins.LeftTop)
.setVisible(true)
.setText(" ");
textBox.setMouseInteractions(false); // preventing from user to drag
textBox.setBackground((background) =>
background.setFillStyle(new SolidFill({ color: ColorHEX("#039BE5") }))
);
return LeadChart;
};
https://lightningchart.com/js-charts/docs/features/xy/figures/
const rectangleSeries = chart.addRectangleSeries()
const rectangleFigure = rectangleSeries
.add({ x1: 0, y1: 0, x2: 10, y2: 10 })
// Optional, changing default style
.setFillStyle(new SolidFill({ color: ColorRGBA(255, 0, 0) }))
.setStrokeStyle(new SolidLine({ thickness: 1, fillStyle: new SolidFill({ color: ColorRGBA(0, 0, 255) }) }))