Hi, can I freeze an axis’s length/size, so that if the canvas is resized (and therefore the series, too), the axis will keep it’s length/size and not resize together? In other words, freeze the axis/detach it from the series
Thanks
- Tom Alon asked 1 week ago
- last active 1 week ago
I created 3 candle sticks and they all have different width even tho I give them the same dataPointWidth
?
See image below for reference,
Code sandbox link: https://codesandbox.io/p/sandbox/vertically-stacked-axes-forked-5ypshd?file=%2Fsrc%2FApp.tsx&workspaceId=727af2ef-2725-4acf-b130-b2c2973fbfea
Thank you.
- Nung Khual asked 1 month ago
- last active 3 weeks ago
When using FastCandlestickRenderableSeries, I want every value to appear on the chart. I tried to use DataLabelProvider for this, but it didn’t work. What can I do.
class CustomDataLabelProvider extends DataLabelProvider {
onDataPoint(renderableSeries, xValue, yValue) {
const labelText = `${yValue.toFixed(2)}`;
const label = document.createElement('div');
label.textContent = labelText;
label.style.position = 'absolute';
label.style.color = 'black';
label.style.fontSize = '12px';
label.style.left = `${this.parentSurface.coordinateCalculator.getCoordinateFrom(xValue) - label.clientWidth / 2}px`;
label.style.top = `${this.parentSurface.coordinateCalculator.getCoordinateFrom(yValue) - label.clientHeight}px`;
this.parentSurface.annotationCanvas.appendChild(label);
}
}
const { sciChartSurface, wasmContext } = await SciChartSurface.create("scichart-root", {
theme: new SciChartJSLightTheme(),
titleStyle: { fontSize: 22 },
});
sciChartSurface.applyTheme(new SciChartJSLightTheme());
sciChartSurface.xAxes.add(new NumericAxis(wasmContext));
sciChartSurface.yAxes.add(new NumericAxis(wasmContext));
const yAxis = sciChartSurface.yAxes.get(0);
yAxis.visibleRange = new NumberRange(LAL, UAL);
const xAxis = sciChartSurface.xAxes.get(0);
xAxis.visibleRange = new NumberRange(0, endBarIndex);
const dataSeries = new OhlcDataSeries(wasmContext, {
xValues: xValues,
openValues: compositeScanAverageArray,
highValues: yValues,
lowValues: compositeScanAverageArray,
closeValues: yValues,
});
sciChartSurface.renderableSeries.add(new FastCandlestickRenderableSeries(wasmContext, {
dataSeries: dataSeries,
strokeThickness: 1,
dataPointWidth: 0.5,
paletteProvider: new CustomPaletteProvider(),
dataLabelProvider: new CustomDataLabelProvider(),
}));
- Can Ata Tekirdağlı asked 7 months ago
- last active 3 months ago
I want to use a different color for each value in the chart I created here. To put it simply, if the value is greater than 10, I want it to appear yellow, if it is less than green, and red if it is less than 0. thanks
const { sciChartSurface, wasmContext } = await SciChartSurface.create("scichart-root", {
theme: new SciChartJSLightTheme(),
});
sciChartSurface.applyTheme(new SciChartJSLightTheme());
sciChartSurface.xAxes.add(new NumericAxis(wasmContext));
sciChartSurface.yAxes.add(new NumericAxis(wasmContext));
const yAxis = sciChartSurface.yAxes.get(0);
yAxis.visibleRange = new NumberRange(LAL, UAL);
const xAxis = sciChartSurface.xAxes.get(0);
xAxis.visibleRange = new NumberRange(0, endBarIndex);
const dataSeries = new OhlcDataSeries(wasmContext, {
xValues: xValues,
openValues: yValues,
highValues: compositeScanAverageArray,
lowValues: yValues,
closeValues: compositeScanAverageArray,
});
const renderableSeries = new FastCandlestickRenderableSeries(wasmContext, {
dataSeries,
stroke: "white",
strokeThickness: 1,
});
sciChartSurface.renderableSeries.add(renderableSeries);
sciChartSurface.annotations.add(
new SciChart.BoxAnnotation({
stroke: "yellow",
strokeThickness: 1,
fill: "rgba(255, 255, 0, 0.3)",
x1: 0,
x2: endBarIndex,
y1: UAL,
y2: UWL,
})
);
sciChartSurface.annotations.add(
new SciChart.BoxAnnotation({
stroke: "yellow",
strokeThickness: 1,
fill: "rgba(255, 255, 0, 0.3)",
x1: 0,
x2: endBarIndex,
y1: LAL,
y2: LWL,
})
);
sciChartSurface.annotations.add(
new SciChart.BoxAnnotation({
stroke: "green",
strokeThickness: 1,
fill: "rgba(0, 128, 0, 0.3)",
x1: 0,
x2: endBarIndex,
y1: LWL,
y2: UWL,
})
);
sciChartSurface.annotations.add(
new SciChart.LineAnnotation({ stroke: "#FF6600", strokeThickness: 3, x1: startBarIndex, x2: endBarIndex, y1: compositeScanAverage, y2: compositeScanAverage }),
);
sciChartSurface.chartModifiers.add(new MouseWheelZoomModifier());
sciChartSurface.chartModifiers.add(new ZoomPanModifier());
}
- Can Ata Tekirdağlı asked 7 months ago
- last active 7 months ago
Hi,
the Tooltip from the rolloverModifier shows for the Open-Values the Label “Open”.
I would like to be able to change that. There might be serveral reasons for that. Maybe the shown data are not “openValues” or the word “open” needs to be translated into another language.
I managed to edit the title of a FastCandlestickRenderableSeries by setting a title and get it into the variable like this:
rolloverTitle = newtitle;
renderableSeries0.rolloverModifierProps.tooltipTitle = rolloverTitle;
unfortunately i did not find a way to set the name/label for the open-,low-,close-, or high-values of this Series.
Can someone give ma a hint how to do this?
- Sebastian Affeld asked 12 months ago
- last active 12 months ago
I’m using a candlestick series in a slightly unconventional use case, essentially to show a range at a given data point, screenshot below.
This works fine if the number of the data points and window size stays the same, but if I resize the window, the bars shrink accordingly, which I want to avoid.
So basically what I need is some kind of rendering mode that takes in a pixel width for the bars.
I’ve attempted to update the DataPointWidth on the series using a combination of the screen width and the number of points, but it’s extremely messy since the change needed isn’t linear.
- Lewis Savage asked 3 years ago
- last active 3 years ago
我想实现一个功能,需要改变选中区域里面的几根蜡烛颜色为除了涨跌之外的其他颜色,整个功能该怎么实现?
- likui zhong asked 5 years ago
- last active 5 years ago
Hello, I am using the Cross CursorModifier with axis labels and tool tips on a FastCandlestickRenderableSeries only. I have been using the CursorModifier:SnappingMode=”CrosshairToSeries” however I would like to only have the X axis of the CursorModifier snap to the nearest X data point of the series. This way the Y axis of the CursorModifier is still free to view price and hold a reference for where the Tooltip should be displayed. Any direction to the proper documentation for this functionality would be appreciated.
Thank you,
- Leland asked 5 years ago
Hi,
When I did some practices with your example app, I found some features does not work as I expected.
Here is CandlestickChartFragment.java and I wrote additional lines on xAxis builder, yAxis builder and surface.chartModifiers,
public class CandlestickChartFragment extends ExampleBaseFragment {
@BindView(R.id.chart)
SciChartSurface surface;
@Override
protected int getLayoutId() {
return R.layout.example_single_chart_fragment;
}
@Override
protected void initExample() {
PriceSeries priceSeries = DataManager.getInstance().getPriceDataIndu(getActivity());
int size = priceSeries.size();
final IAxis xAxis = sciChartBuilder.newCategoryDateAxis()
.withVisibleRange(size - 30, size)
.withGrowBy(0, 0.1)
// Start additional lines
.withAutoFitMarginalLabels(false)
.withTextFormatting("yyyy-MM-dd")
.withCursorTextFormating("MM-dd")
// End additional lines
.build();
final IAxis yAxis = sciChartBuilder.newNumericAxis()
// Start additional lines
.withAutoFitMarginalLabels(false)
.withTextFormatting("$ #.#")
.withCursorTextFormating("#.#")
// End additional lines
.withGrowBy(0d, 0.1d)
.withAutoRangeMode(AutoRange.Always)
.build();
IOhlcDataSeries<Date, Double> dataSeries = new OhlcDataSeries<>(Date.class, Double.class);
dataSeries.append(priceSeries.getDateData(), priceSeries.getOpenData(), priceSeries.getHighData(), priceSeries.getLowData(), priceSeries.getCloseData());
final FastCandlestickRenderableSeries rSeries = sciChartBuilder.newCandlestickSeries()
.withStrokeUp(0xFF00AA00)
.withFillUpColor(0x8800AA00)
.withStrokeDown(0xFFFF0000)
.withFillDownColor(0x88FF0000)
.withDataSeries(dataSeries)
.build();
UpdateSuspender.using(surface, new Runnable() {
@Override
public void run() {
Collections.addAll(surface.getXAxes(), xAxis);
Collections.addAll(surface.getYAxes(), yAxis);
Collections.addAll(surface.getRenderableSeries(), rSeries);
Collections.addAll(surface.getChartModifiers(), sciChartBuilder.newModifierGroupWithDefaultModifiers()
// Start additional lines
.withCursorModifier().withShowAxisLabels(true).withShowTooltip(true).build()
// End additional lines
.build());
sciChartBuilder.newAnimator(rSeries).withWaveTransformation().withInterpolator(new DecelerateInterpolator()).withDuration(3000).withStartDelay(350).start();
}
});
}
}
The result is below picture. I also attached the same image.
https://imgur.com/a/5Eqo8Gd
Displayed xAxis values are [27 Sep, 04 Oct, 11 Oct, 18 Oct, 25 Oct, 01 Nov].
The problems are
1. xAxis(CategoryDate) tick values should be started with year, even though it does not have enough margin. It looks updated format is not applied.
2. Cursor should be shown on touch event, but it does not be displayed at all.
I ran above code on [Samsung Galaxy S9, API 26] and [Xiaomi Mi A1, API 25] and same problems are happened.
Could I know what I missed?
- Changhee Lee asked 6 years ago
- last active 6 years ago
Hi there!
I successfully build trader chart from nice example “2D Charts -> Create Stock Charts -> Using SciStockChart”.
Then I had to draw line on the chart with candles, but the problem was, that the line didn’t have data on some dates (there is data for lots of candles, but for the red line there is only 4 points: A,B,C,D), and result i want in shown here (solved):
Axes:
XAxis: CategoryDateTimeAxis (Dates)
YAxis: NumericAxis (Prices)
Series:
Candles: FastCandlestickRenderableSeries (OhlcDataSeries<DateTime, double>)
Red Line: FastLineRenderableSeries (XyDataSeries<DateTime, double>)
Problem:
CategoryDateTimeAxis type ignores the XAxis values for computation of x-coordinate, and choosing only the index of the value instead. CategoryDateTimeAxis vs DateTimeAxis. I have N-number of candles and only 4 values for red line. How to receive line with no gaps, with points on their places (dates on X-axis) ? I can’t use simple DateTimeAxis, because candles don’t draws.
Solution:
1) Use double.NaN for each date (x-axis value) if no data for the red-line on date given.
2) In FastLineRenderableSeries set DrawNaNAs = LineDrawMode.ClosedLines (if don’t use this flag, you will receive something like this: WPF Chart Gaps (Nulls) in Series
Thanks a million to Julia Skorobogata from SciChart!
- Andrey Гевин asked 7 years ago
- last active 7 years ago