Regressive Y style chart with increasing Y values
Posted: Mon Mar 04, 2024 4:22 pm
My data set is an xy series where x varies from -2 to 2 and Y grows continuously. However Y represents depth underground.
I want a chart similar to a regressiveY where new data points appear at the bottom of the chart(bottom of the y axis). I've only been able to achieve this by using a customAxis for y where the scroll strategy is set to regressive and the line series pattern is set to regressiveY, and the actual data uses negative values for the Y values.
This achieves the desired behavior I described above where the latest points are appearing at the bottom of the chart as they come in. However I need the values to be positive. Right now the y axis shows negative values and selecting a point on the line series will display a negative Y value.
How can I achieve a similarly behaving chart where Y is increasing and values are positive, but Y increases in the bottom to top direction?
thanks for taking a look.
I want a chart similar to a regressiveY where new data points appear at the bottom of the chart(bottom of the y axis). I've only been able to achieve this by using a customAxis for y where the scroll strategy is set to regressive and the line series pattern is set to regressiveY, and the actual data uses negative values for the Y values.
Code: Select all
const container = document.getElementById(id) as HTMLDivElement;
const grid = lcjs.Dashboard({
theme: Themes.darkGold,
numberOfRows: 1,
numberOfColumns: 1,
container: container,
});
const chart = grid.createChartXY({
columnIndex: 0,
rowIndex: 0,
columnSpan: 1,
rowSpan: 1,
});
// Second, a vertically progressive series with custom axis.
chart.setTitle("Vertical progressive");
// Add new axis to 'right' side of chart.
const customAxisY = chart
.addAxisY({
})
.setScrollStrategy(AxisScrollStrategies.regressive);
const series = chart
.addLineSeries({
yAxis: customAxisY,
dataPattern: {
pattern: "RegressiveY",
},
})
// Destroy automatically outscrolled data (old data becoming out of scrolling axis range).
// Actual data cleaning can happen at any convenient time (not necessarily immediately when data goes out of range).
.setDataCleaning({ minDataPointCount: 100000 })
// Point to nearest Y data point with auto cursor.
.setCursorSolveBasis("nearest-y");
How can I achieve a similarly behaving chart where Y is increasing and values are positive, but Y increases in the bottom to top direction?
thanks for taking a look.