Pre loader

Forums

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 vote
0 answers
25 views

I have this x axis:

private fun createxAxis(builder: SciChartBuilder, firstDay: Date?): DateAxis {
    val weekAgo = Calendar.getInstance().let {
        it.time = Date()
        it.add(Calendar.DATE, -6)
        it.time
    }
    val today = Calendar.getInstance().let {
        it.time = Date()
        it.add(Calendar.DATE, 1)
        it.time
    }
    val historicalFirst = if (firstDay != null) {
        Calendar.getInstance().let {
            it.time = firstDay
            it.add(Calendar.DAY_OF_MONTH, -1)
            it.time
        }
    } else {
        weekAgo
    }

    return builder.newDateAxis().apply {
        withDrawLabels(true)
        withDrawMajorBands(false)
        withDrawMajorTicks(false)
        withDrawMinorTicks(false)
        withTextFormatting("E")
        withTickLabelStyle(
            FontStyle(
                ResourcesCompat.getFont(context, R.font.proxima_nova_400),
                context.resources.getDimension(R.dimen._9sdp),
                resources.getColor(R.color.white, null),
                true
            )
        )
        withAutoFitMarginalLabels(false)
        withDrawMajorGridLines(true)
        withDrawMinorGridLines(false)
        isEnabled = true
        withVisibleRange(weekAgo, today)
        withVisibleRangeLimit(historicalFirst, today)
    }.build()
}

and this pan modifier:

    private class CustomXAxisDragModifier(
    val gestureCallback: WeakReference
) : XAxisDragModifier() {

    override fun performPan(xDelta: Float, yDelta: Float, isSecondHalf: Boolean, axis: IAxis) {
        super.performPan(xDelta, yDelta, isSecondHalf, axis)
        when (axis) {
            is DateAxis -> {
                gestureCallback.get()
                    ?.onVisibleRangeUpdated(axis.visibleRange.min, axis.visibleRange.max)
            }
        }
    }
}

val panModifier = CustomXAxisDragModifier(WeakReference(callback)).apply {
    dragMode = AxisDragModifierBase.AxisDragMode.Pan
    minTouchArea = 1000.0f
    clipModeX = ClipMode.ClipAtExtents
    clipModeTargetX = ClipModeTarget.VisibleRangeLimit
}
surface.chartModifiers.add(panModifier)

When I load this chart with data, it looks correct (see first screenshot). But the moment I try to drag it, the chart clips to the most recent data point (see second screenshot) instead of what I’m setting as the visible range limit. The most recent data point is a few days before today. How can I get the panning to clip at the visible range limit?

0 votes
35 views

Hello SciChart Team,

I am currently working with FastBubbleRenderableSeries using XyzDataSeries, and I’ve encountered an issue where multiple elements in my dataset share the same X, Y, and Z values. To differentiate them, I need to assign a unique unique_id via the PointMetaData API.

Is there an efficient way to retrieve the indices of elements that correspond to a specific unique_id? I have explored the documentation (https://www.scichart.com/documentation/js/current/typedoc/classes/xyzdataseries.html) but couldn’t find relevant information.

Any suggestions or alternative approaches would be greatly appreciated!

Best regards,
Phat

  • Pham Phat asked 24 hours ago
  • last active 7 hours ago
0 votes
0 answers
65 views

I have a chart with a CategoryDateTimeAxis x-axis, some of the data points that have the same date can’t be selected, and I noticed if I add points that have a different date, the selection works as expected.

It seems that the DataPointSelectionModifier.SelectionChanged even is fired but the DataPointSelectionModifier.SelectedPointMarkers collection is empty

private void MainWindow_Loaded(object sender, RoutedEventArgs e)
{
// Create the X and Y Axis
var xAxis = new CategoryDateTimeAxis() { AxisTitle = "Date", TextFormatting = "dd/MM/yyyy" };
var yAxis = new NumericAxis() { AxisTitle = "Value" };

var selectionModifier = new DataPointSelectionModifier()
{
ReceiveHandledEvents = true,
AllowsMultiSelection = false,
ExecuteOn = ExecuteOn.MouseLeftButton,
UseLayoutRounding = true
};

selectionModifier.SelectionChanged += SelectionModifier_SelectionChanged;

SciChartSurface.XAxis = xAxis;
SciChartSurface.YAxis = yAxis;

SciChartSurface.ChartModifier = new ModifierGroup(
new RubberBandXyZoomModifier(),
new ZoomExtentsModifier(),
selectionModifier);

var series = new XyDataSeries<DateTime, double>();

for (int i = 0; i < 20; i++)
{
    var date = i < 10 ? DateTime.Now.AddDays(i) : DateTime.Now.AddDays(10);
    series.Append(date, i, new SelectedPointMetadata());
}

var renderableSeries = new FastLineRenderableSeries()
{
    DataSeries = series,
    XAxis = xAxis,
    YAxis = yAxis,
    PointMarker = new EllipsePointMarker() { Width = 10, Height = 10, Fill = Colors.Red },
    SelectedPointMarker = new EllipsePointMarker() { Width = 10, Height = 10, Fill = Colors.Green },
};
SciChartSurface.RenderableSeries.Add(renderableSeries);
}

private void SelectionModifier_SelectionChanged(object? sender, EventArgs e)
{

if (sender is not DataPointSelectionModifier dataPointSelectionModifier)
{
    return;
}

var dataPointInfo = dataPointSelectionModifier.SelectedPointMarkers.FirstOrDefault();
if (dataPointInfo is null)
{
    return;
}

var metaData = dataPointInfo.DataPointMetadata as SelectedPointMetadata;

}
}

public class SelectedPointMetadata : IPointMetadata
{
public event PropertyChangedEventHandler PropertyChanged;
public bool IsSelected { get; set; }
}
1 vote
79 views

I’m modifying the https://demo.scichart.com/javascript/multi-pane-stock-charts-sync-technique# example. To the right of the OHLCV chart I would like to plot GEX levels (a ladder plot) which is unique for every date, and which should update as I scroll across the X-axis of the OHLCV chart. However, I’m unable to write an event listener to make this happen.

OHLCV + GEX

1 vote
0 answers
83 views

I’m apart of a team that has applications written in wpf. We’re looking at switching frameworks to use Flutter and Dart instead. We all really like using scicharts for the performance and all of the graphing features that are available. Is there plans in the future to support flutter and dart or is there a workaround to currently do this?

1 vote
77 views

Is there a way to override the shape of each individual PointMarker within the same series based on the metadata? I can override the color of individual points in the DefaultPaletteProvider, but I haven’t found a solution for the shape.

  • Son Tran asked 5 days ago
  • last active 5 days ago
1 vote
62 views

Hello SciChart Team,

Problem description:
I have a main stock chart and I can add various indicators to it, some of which appear below it as new charts. Additionally, I can draw different types of lines on both the indicators and the chart. If I draw a line on each of them, I can select each one in turn and end up with all three lines selected, but I need to have only one selected and its ID saved (to open the editor and be able to edit its parameters). Is there any way to connect the charts so that the lines “see each other” and deselect when another is selected? Unfortunately, selectedChanged.subscribe doesn’t work because I don’t receive false from other charts.

Lines
https://ibb.co/wJwXZNf

Best regards,
Kamil

1 vote
51 views

Any update on ARM support?

Not asking about MacOS/linux but Windows on ARM.

  • Eamon asked 6 days ago
  • last active 5 days ago
0 votes
74 views

Hello SciChart Team,

I’m trying to subscribe to FastBubbleRenderableSeries.hovered, but it doesn’t seem to be working.

const bubbleSeries = new FastBubbleRenderableSeries(wasmContext, {
      dataSeries: xyzDataSeries,
      pointMarker: new EllipsePointMarker(wasmContext, {
      width: 64,
      height: 64,
      fill: "#4682b477",
   }),
});

// Subscribe to the hovered event
bubbleSeries.hovered.subscribe((event) => {
console.log(event);
});

Is there something wrong with my approach? Also, can I extract the yValues, xValues, and zValues of the item being hovered using this method? Any other ideas or different approaches are welcome !

Best regards,
Phat

  • Pham Phat asked 6 days ago
  • last active 5 days ago
1 vote
93 views

Hello SciChart team,

I need to modify the SCICursorModifier so that it remains visible after tapping, even when I lift my finger and am no longer touching the screen. With the next touch, I would like the displayed cursor to be cleared and replaced with a new one at the new coordinates. Is this possible with SCICursorModifier? Or would I need to implement this differently? How could this be done?

Thanks for help

1 vote
102 views

Hello SciChart team,

I noticed that setting dataEvenlySpacedInX in column and candle series doesn’t seem to take effect. You can observe it in this codesandbox where columns (candles) are overlapping because of unevenly spaced X values. I would expect the columns not to overlap.

Please let me know if my expectation is not correct.

Thank you,
Timo Betina

0 votes
0 answers
119 views

Having some weirdness when rendering a sprite as the points on a FastBubbleRenderableSeries. For one, strokethickness, stroke, etc don’t seem to do anything, and furthermore, the sprites are rendered upside down and backwards. If I set the sizes (zvalues on the xyzdataseries) to a negative number, the sprites are only mirrored around the y-axis.

However if I instead use the same sprites on a XyScatterRenderableSeries they look like expected. I would just do this but I need per-point scaling (and hopefully I can figure out how to do per-point hover outlines and tooltips as well)

Originally I had been using an ugly hack of embedding the PNG into a custom svg annotation, but the performance was terrible after a few dozen points were on the chart at once.

0 votes
103 views

I am working with this chart and data on a seconds level/granularity and plotting tens of thousands or sometimes hundreds of thousands of seconds of data. SciChart is doing something weird with the time range on zooming in and out. Are there ways to control what the DateTimeAxis displays?

time data:

2024-09-06 08:55:55
2024-09-06 08:48:58
2024-09-06 08:40:06
2024-09-06 08:30:42
2024-09-06 08:26:53
2024-09-06 08:22:41
2024-09-06 08:20:49
2024-09-06 08:17:39
2024-09-06 08:17:03

function updateChartInitial(data) {
        const timestamps = new Float64Array(data.map(d => new Date(d.timestamp).getTime()));
        const prices = new Float64Array(data.map(d => d.trade_price));
        const volumes = new Float64Array(data.map(d => d.agg_volume));

        // Clear previous data and append new data to priceSeries
        priceSeries.dataSeries.clear();
        priceSeries.dataSeries.appendRange(timestamps, prices);

        // Clear previous data and append new data to volumeSeries
        volumeSeries.dataSeries.clear();
        volumeSeries.dataSeries.appendRange(timestamps, volumes);

        // Set Y-axis range based on price data
        const minPrice = Math.min(...prices);
        const maxPrice = Math.max(...prices);
        yAxisPrice.visibleRange = new NumberRange(minPrice, maxPrice);

        sciChartSurface.zoomExtents();
    }

Is there some need to convert to milliseconds and / 1000 or something like this?

Regards
Matt

  • Matt Pen asked 3 weeks ago
  • last active 1 week ago
0 votes
99 views

Hello,

I am working on a heatmap chart with contours. The dataSeries are binded to DataSeriesInViewModel in the viewmodel, where DataSeriesInViewModel is defined as:

DataSeriesInViewModel = new UniformHeatmapDataSeries<int, int, double>(zValues2d, 0, 1, 0, 1)

where zValues2d contains the grid values data.

In addition there is binding to ZMax, ZMin which are the max, min values of zValues2d and also ZStep which is the number of steps for the contours.

The problem is that one can see two tootips and that those are not showing the same value.

<s:SciChartSurface x:Name="sciChart" Grid.Column="0" ChartTitle="{Binding ChartTitle}">

    <s:SciChartSurface.RenderableSeries>

        <s:FastUniformContourRenderableSeries x:Name="ContourSeries"
                                              AntiAliasing="True" ZMax="{Binding ZMax}"
                                              ZMin="{Binding ZMin}" ZStep="{Binding ZStep}"
                                              DataSeries="{Binding DataSeriesInViewModel}">
            <s:FastUniformContourRenderableSeries.ColorMap>
                <s:HeatmapColorPalette  Maximum="{Binding ZMax}" Minimum="{Binding ZMin}">
                    <s:HeatmapColorPalette.GradientStops>
                        <GradientStop Offset="0.0" Color="{StaticResource ColorMapColor_1}"/>
                        <GradientStop Offset="0.2" Color="{StaticResource ColorMapColor_2}"/>
                        <GradientStop Offset="0.4" Color="{StaticResource ColorMapColor_3}"/>
                        <GradientStop Offset="0.6" Color="{StaticResource ColorMapColor_4}"/>
                        <GradientStop Offset="0.8" Color="{StaticResource ColorMapColor_5}"/>
                        <GradientStop Offset="1.0" Color="{StaticResource ColorMapColor_6}"/>
                    </s:HeatmapColorPalette.GradientStops>
                </s:HeatmapColorPalette>
            </s:FastUniformContourRenderableSeries.ColorMap>
        </s:FastUniformContourRenderableSeries>

            <s:FastUniformHeatmapRenderableSeries  x:Name="HeatmapSeries"
                                                   Opacity="0.8"
                                                   UseLinearTextureFiltering="True"
                                                   AntiAliasing="True"
                                                   DataSeries="{Binding DataSeriesInViewModel}">
            <s:FastUniformHeatmapRenderableSeries.ColorMap>
                <s:HeatmapColorPalette  Maximum="{Binding ZMax}" Minimum="{Binding ZMin}">
                    <s:HeatmapColorPalette.GradientStops>
                        <GradientStop Offset="0.0" Color="{StaticResource ColorMapColor_1}"/>
                        <GradientStop Offset="0.2" Color="{StaticResource ColorMapColor_2}"/>
                        <GradientStop Offset="0.4" Color="{StaticResource ColorMapColor_3}"/>
                        <GradientStop Offset="0.6" Color="{StaticResource ColorMapColor_4}"/>
                        <GradientStop Offset="0.8" Color="{StaticResource ColorMapColor_5}"/>
                        <GradientStop Offset="1.0" Color="{StaticResource ColorMapColor_6}"/>
                    </s:HeatmapColorPalette.GradientStops>
                </s:HeatmapColorPalette>
            </s:FastUniformHeatmapRenderableSeries.ColorMap>

        </s:FastUniformHeatmapRenderableSeries>
    </s:SciChartSurface.RenderableSeries>

    <s:SciChartSurface.XAxis>
        <s:NumericAxis DrawMajorBands="True" AutoRange="Always" LabelProvider="{Binding XAxisLabelProvider}"/>
    </s:SciChartSurface.XAxis>

    <s:SciChartSurface.YAxis>
        <s:NumericAxis DrawMajorBands="True" AutoRange="Always" LabelProvider="{Binding YAxisLabelProvider}"/>
    </s:SciChartSurface.YAxis>

    <s:SciChartSurface.ChartModifier>
        <s:ModifierGroup>
            <s:RolloverModifier ShowTooltipOn="Always" UseInterpolation="True" ReceiveHandledEvents="True"/>               
        </s:ModifierGroup>
    </s:SciChartSurface.ChartModifier>
</s:SciChartSurface>

<s:HeatmapColorMap Grid.Column="1" Margin="2"
                   HorizontalAlignment="Right"
                   VerticalAlignment="Stretch"
                   Background="{StaticResource ThemedSurfaceChartBackground}" 
                   Foreground="{Binding Source={x:Reference Name=sciChart}, Path=Foreground}"
                   ColorMap="{Binding Source={x:Reference Name=HeatmapSeries}, Path=ColorMap.GradientStops, Converter={StaticResource ColorsToLinearGradientBrushConverter}}"
                   Minimum="{Binding ZMin}" 
                   Maximum="{Binding ZMax}" 
                   TextFormatting="0.00" Opacity="0.8" BorderBrush="#777" BorderThickness="1" Orientation="Vertical"/>

I also tried to assign to the contour chart the colormap from the heatmap using:

 <s:FastUniformContourRenderableSeries x:Name="ContourSeries"
                                   AntiAliasing="True" ZMax="{Binding ZMax}"
                                   ZMin="{Binding ZMin}" ZStep="{Binding ZStep}"
                                   DataSeries="{Binding DataSeriesInViewModel}"
                                   ColorMap="{Binding Source={x:Reference Name=HeatmapSeries}, 
 Path=ColorMap.GradientStops,
 Converter={StaticResource ColorsToLinearGradientBrushConverter}}">

but then I still see two tooltips but no contours anymore.
In fact i would like to know what I do wrong here, and how to see only one tooltip.

thanks a lot for your help,

Thomas

1 vote
0 answers
129 views

Hi,

We have a specific requirement for our application, where when the user click on the any specific channel in a set of multiple series, only that specific channel is highlighted and other channels fades in the background.

We found an example in JavaScript which suits our requirement here (https://www.scichart.com/example/javascript-chart/javascript-chart-series-selection/) . However we are not able to find any equivalent examples for Android.

Can you help us with an Android equivalent of the mentioned example ?

Below screenshot is JavaScript example in Scichart website which is similar to our requirement.

enter image description here

Will it also be possible to zoom the selected channel ?

Best Regards

Delta Electronics

1 vote
128 views

Hello, I am using the scichart example : SciChart_CustomTooltipsWithModifiers.
I want to double click the RolloverModifier to trigger en event.
The xaml(wpf) is as follows:


The c# :
private void RolloverModifier_MouseDoubleClick(object sender, System.Windows.Input.MouseButtonEventArgs e)
{
MessageBox.Show(“nihao11111111111111”);
}

But it didn’t work. Can you help me to solve this problem?
Thank you.

  • Zhi Zhang asked 3 weeks ago
  • last active 1 week ago
0 votes
135 views

Hello,

I am trying to Zoom to the contents of the graph. I have a custom annotation that is anchored to the bottom left position. When I zoom into the data contents using the method ViewPortManager.AnimateZoomExtents(), the top of the annotation gets cut of, but it shows the anchor point. Is there a way I can show the entire custom annotation when zooming or is there a way to get the top right coordinate position of the custom annotation?

Kind regards

1 vote
0 answers
131 views

Hello!

I have been looking into creating a custom renderable series for drawing filled polygons.

I have a class that derives from the BaseRenderableSeries type, and uses an XyDataSeries for its dataSeries. So far I’ve been able to draw the shape of the polygon using the drawLines function for the render context API. However, I’m wondering what the best way would be to go about adding support for filling the area of the polygon.

Having read the docs

The IFillPaletteProvider interface allows you to perform per-point
paletting or coloring of series or data-points in Mountain, Column,
Candlestick Charts and JavaScript chart types which have a fill or
body

…I got the impression that I probably want to be implementing a custom palette provider that implements IFillPaletteProvider, which

may be used to override the color of filled polygon in various chart types.

Rather than jumping straight into this, I had a go at overriding the paletteProvider getter with a function that returns an IFillPaletteProvider. In this I create an empty DefaultPaletteProvider, set the fill palette mode to solid, and then set the overrideFillArgb function to essentially always return the ARGB colour code for an arbitrary colour as a test. I also played around with calling (and not calling) shouldUpdatePalette before returning the palette provider:

get paletteProvider(): IFillPaletteProvider {
    const paletteProvider = DefaultPaletteProvider.createEmpty();
    paletteProvider.fillPaletteMode = EFillPaletteMode.SOLID;
    paletteProvider.overrideFillArgb = (xValue:number, yValue: number, _index: number): number => {
        return yValue > 0 ? parseColorToUIntArgb("blue") : parseColorToUIntArgb("black");
    }
    paletteProvider.shouldUpdatePalette();
    return paletteProvider;
}

Now when I call the hasFillPaletteProvider function on my custom renderable series, it indeed returns true.

However, for now my polygon still remains unfilled when drawn onto a surface, I can only see the outline of it. Any advice or tips on where I might be going wrong? I get the feeling I’m missing something obvious/simple, but as yet I can’t figure out what!

Thank you for any help!

0 votes
150 views

Hello,

I am trying to make a non-linear numeric axis. Could you please help with an example?
I was reading this documentation and was playing around with the CustomTickProvider class, however I cannot achieve desired result.
https://www.scichart.com/documentation/js/current/webframe.html#AxisTicks-GridLineAndLabelSpacingProgrammatically.html
If we take a look at the example 2, we can see that it is possible to make unequally spaced grid lines but it seems that the spacing is still linear. As in example provided by you, would it be possible to place, let’s say number 2.0 in a place of 4.0, or 8.0?

Kind regards

  • Zino As asked 4 weeks ago
  • last active 1 week ago
0 votes
147 views

Hello. I have been playing around with SciChart_SurfaceMesh3DNonUniformData example solution of yours. I have modified the data in it, some of the properties, etc.
I have managed to get the cursor to display and snap to the nearest points while still being able to rotate and zoom the graph.

What I have not been able to figure out, have tried many different things, are the following:

  1. I would like to change the tooltip. Right now it is showing the default one which shows something like this:
    Nonuniform Surface Mesh
    Cell Index: z=6, x=8
    X Data: 3200.00
    Y Data: 0.60
    Z Data: 20.00

I would like to just show the X, Y, and Z values and maybe use my own labels instead of “X Data”, etc.
2. Would also be nice if I could position the tooltip a little further away from the cursor position so that it does not obscure the surface so much.
3. Lastly, as the user moves the cursor across the surface I would like to have the active point that it snaps to be displayed with a yellow ellipse to make it more obvious where the cursor is positioned.

I have attached my solution. It had a directory called SciChart8 where I had all the SciChart DLLs but I removed that before zipping it up so you will need to fix up the SciChart references to point to your own copies. I also removed my license key.

Thanks in advance for any help you can provide. I have spent about 4 hours trying to get these things working without success.

Jeff Skory

  • Jeff Skory asked 4 weeks ago
  • last active 1 week ago
0 votes
148 views

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 4 weeks ago
  • last active 4 weeks ago
0 votes
169 views

Is there any plan to fix the warning when using “scichart-react”.
I attach warning message the images below.

0 votes
145 views

Hello,
Is there a way to change the font style in TextAnnotations to italics? I would like the user to be able to change the text style using a context menu. I can easily override the FontWeight, FontSize, and FontFamily properties, but there is no FontStyle in the documentation.

Regards,
Kamil

0 votes
154 views

Hi,

I am having trouble selecting annotations, when you click two annotations which overlap, one of them gets selected. please see video below:

In this case I can keep track of all the annotations at the mousepoint, but then I cannot programmatically select the annotation. what is the best way to “select” annotation programatically.

Best,

Pramod

1 vote
174 views

Hi
I tried with the example below and able to draw the image inside the chart. But i need to draw the continues image from one index to another index. Is it possible to draw it with Scichart ?

https://github.com/ABTSoftware/SciChart.JS.Examples/blob/master/Examples/src/components/Examples/Charts2D/ChartAnnotations/AnnotationsAreEasy/drawExample.ts

return new CustomAnnotation({
x1,
y1,
verticalAnchorPoint: EVerticalAnchorPoint.Top,
horizontalAnchorPoint: EHorizontalAnchorPoint.Left,
svgString: <svg width="${width}" height="${height}" xmlns="http://www.w3.org/2000/svg" style="background-color:blue">
<image href="test/images.jpeg" height="${height}" width="${width}"/>
</svg>
,
});

instead of height and width is it possible to pass x2 and y2 as index.

What i am looking is mentioned in the attachments.

Also when the chart is zooming need to increase or decrease the size of the chart and fit to the index provided. Is it possible?

0 votes
196 views

When using the Orientation.Horizontal attribute in using LegendModifier 3D, Legend items are displayed in a single line.
I want to print in two lines but I’m not looking for a way to implement that feature.
If there’s a way to print it out, I’d appreciate it if you could let me know.

The development language is C#.

0 votes
191 views

Here’s the English translation of your message:

I cannot change the Background Color of the LegendModifier3D that I’m using.
The methods I’ve tried so far are:

1.
csharp
Legend = new CustomLegendModifier3D
{
Background = new SolidColorBrush(Colors.Red)
}

2.
csharp
ControlTemplate template = new ControlTemplate(typeof(LegendModifier3D));
template.VisualTree = new FrameworkElementFactory(typeof(System.Windows.Controls.Grid));
template.VisualTree.SetValue(Border.BackgroundProperty, new SolidColorBrush(Colors.Red));
Legend.Template = template;

I’ve tried these methods, but while the background color of each TextBlock has changed, I’ve found that the background color of the container wrapping the TextBlocks doesn’t change no matter what method I use.

I’m inquiring whether it’s impossible to completely change the background color of the LegendModifier3D container when using LegendModifier3D, or if I’m using the wrong method.

0 votes
198 views

Hello!

I am dealing with a problem in my WPF app similar to the one described here (https://www.scichart.com/questions/js/why-does-my-candle-sticks-bodies-have-different-width). However, I am using WPF and binding to ColumnRenderableSeriesViewModel.

I was also able to reproduce the issue by modifying the demo program (https://www.scichart.com/example/wpf-chart/wpf-chart-example-histogram/) I changed it to have RedSeriesData and GreenSeriesData to have just one datapoint to make the problem happen.

Could you suggest a workaround? I need to render a bar plot where bars may have different colors. I am accomplishing it by creating a collection of ColumnRenderableSeriesViewModel objects, one for each color. The issue appears when one or more of ColumnRenderableSeriesViewModel objects have just one datapoint.

The attached screenshot shows the modified histogram example with two bars near the right edge appearing much narrower than the rest.

0 votes
232 views

I am using SciChart to visualize multiple datasets on a single surface. I need to export each individual chart as a separate PNG image. The attached image has 2 chart collection. (84158 and 84160) Currently, I am able to export the entire surface as a single image, but I have a use case to export each chart independently.

I am interested in knowing if there is a built-in functionality within SciChart to achieve this.

0 votes
233 views

Hello,

I was trying to create a line chart with lots of gaps in it. All lines need to be two points only, with the same y values and x values representing time, with the next value as a NaN to divide the lines. When i did this, the chart started to respond in a weird way where points would disappear when zooming and not even show anything at certain parts.

I modified the example from the documentation in the section titled “Drawing Null points with NaN” as a FastLineRenderableSeries with my input and sharing it below.
The docs I looked at:
https://www.scichart.com/documentation/js/current/webframe.html#DrawingGapsInSeries.html
My Example:
https://codepen.io/Yiit-Arsoy/pen/ExBbBRQ

Is this the optimal way to achieve what I am trying to do here or should i be looking at an alternative solution? I would be trying to draw close to 1 million lines at least, with text annotations.

Thank you for your help.

0 votes
226 views

Hi, when I was using the RolloverModifier all the points that were displayed in the tooltip were highlighted by slightly increasing the size of the marks in the chart area. Ultimately, I wanted to have some sort of crosshair in my chart and I ended up using the CursorModifier instead of the RolloverModifier to achieve my goal. This worked fine, but the only thing I have lost from changing the modifier is this “highlighting” of the markers displayed in the tooltip. Is there any way to have this “highlighting” also with the CursorModifier ?

I have provided 2 images showing the 2 modifiers.

0 votes
230 views

Hi, I would like to update the theme at the runtime of the chart. In JS I have made a dropdown component from which I can change the theme of the chart. When this “select” component changes it calls in the following code:

function ChartThemeChanged() {
        var x = document.getElementById("ChatTheme").value;
        switch (x){
            case "dark":
                theme = new SciChart.SciChartJsNavyTheme();
                break;
            case "light":
                theme = new SciChart.SciChartJSLightTheme();
                break;
        }

        emissionSmallSciChartSurface.applyTheme(theme);
        emissionLargeSciChartSurface.applyTheme(theme);
        inertiaSmallSciChartSurface.applyTheme(theme);
        inertiaLargeSciChartSurface.applyTheme(theme);
    }

This works fine for the main chart area. I also have a LegendModifier which I placed on a different div with “placementDivId”. When I change the theme, as I said the main area of the chart changes but the legend does not change. How can I fix this? Is there any function I can call on the chart surface to trigger to reevaluate and redraw the legend with the correct new theme?

I have observed that if I add a new series to the chart with “emissionSmallSciChartSurface.renderableSeries.add(lineSeries);” the theme of the legend is applied. I guess it is applied because the legend is redrawn with the extra series but this is not really practical.
How can I fix this cleanly?
Thank you!

0 votes
257 views

Hello,
We are creating a stock chart and are currently at the stage of adding various formations. So far, we have added: trend line (LineAnnotation), vertical and horizontal lines, and a horizontal ray (HorizontalLineAnnotation with x1). We still need the most popular and commonly used formation: the extended line – which is simply a straight line that extends across the entire chart, and its position and angles can be adjusted.

Here’s a link with an example of how it works: https://docs.anychart.com/Stock_Charts/Drawing_Tools_and_Annotations/Infinite_Line
Is it possible to create such a line, or is it currently not supported?

Additionally, the ability to add labels only works in HorizontalLineAnnotation and VerticalLineAnnotation. Will the ability to add labels in LineAnnotation be added?

Best regards,
Kamil

0 votes
259 views

I have a realtime app that will work with 5 to 8 million datapoints of timedataseries. If I have to dynamically scale multiple charts on a surface, it can be ranging from 1 to 20. upon reading the documentation I see that Subcharts and SciChartVerticalGroup are 2 possible solutions. I would have to dynamically add and remove those sub charts just like what you have shown in one of the these examples.
https://codesandbox.io/p/sandbox/sync-multi-chart-r85zv7?file=%2Fsrc%2FApp.tsx%3A235%2C28
https://codesandbox.io/s/2t9yrn?file=/src/index.tsx

What would be a better choice for performance ?

0 votes
0 answers
264 views

Hi everyone,

I’m currently working on a project where I need to plot a candlestick chart, but I’m running into some trouble with the layout. Specifically, I’m trying to display the candlestick chart in the left two-thirds of the plot, leaving the right one-third of the plot available for annotations and other elements. The issue I’m facing is that the candlesticks are still being drawn in the right third of the plot, which is something I want to avoid.

I’ve attached an example image showing how it should look.

Currently, the chart displays the end of the data, and when you horizontally scroll, the buttons on the right side get pushed further right (because they are set using custom annotations on specific x and y axes positions), and the candlestick chart starts appearing in the right section.

Is there a way to set it up so that the candlestick chart does not render in the right section, but everything else (like the annotations and buttons) still does?

Has anyone here tackled a similar problem or knows how to prevent the candlesticks from being drawn in the right third while keeping that space available for other elements? Any advice or code examples would be greatly appreciated!

Thanks in advance!

0 votes
332 views

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 2 months ago
  • last active 1 month ago
0 votes
0 answers
280 views

I’m developing apps in swiftui and compose. Basically, the code where I update the backing XyDataSeries is separate from where the actual render surface is. This mostly works fine in ios, but I’m noticing some flickering in android. At the end of the update the charts render fine, but I ‘m pretty sure I should be suspending the updates until my block of data series are all updated. The problem is getting the surface instance back to where the data series are being updated (which I can do, but it just makes things more complicated on my end because of the view hierarchies in swiftui and compose).

Is there a way to globally suspend updates across all rendered surfaces (without requiring explicit references to those surfaces)? If not, can I request this feature?

  • w p asked 2 months ago
0 votes
328 views

Hi, I see that there is Box Plot chart on WPF sciChart, but it doesn’t seem to exist for javascript version.
Is there a plan for it anytime soon or is there any way I can create a box plot chart with the current javascript version?

My current idea to create one with what is available is using StackedColumnSeries and box annotations and line annotations. The reason I want to use StackedColumnSeries is for the xAxis. The idea is to create xAxis with, Plot1, Plot2 and Plot3.

See the image below.

  • Nung Khual asked 2 months ago
  • last active 2 months ago
0 votes
310 views

Hello,

I have some FastLineRenderableSeries with XyDataSeires that I’m plotting to a chart. On each of these series I’m highlighting one specific point using the IPointMetadata IsSelected interface (Image 1). On this selected point I want to show a series tooltip the same way a VerticalSliceModifier would when it interacts with a series (see image 2 for an example of what I want). How would I do this?

For now I’m setting the SelectedPointMarker for my series to an EllipsePointMarker.

0 votes
306 views

Hello everyone.
Is there a way to set the max width for a Stacked Column Chart?
Best regards,
Michael

0 votes
355 views

Hello.
I want to save some lines’ parameters from RenderableSeries items collection. As example, if I have legend for chart I have IsVisible checkbox for each line on it. What the best way to get ‘feedback’ from legend in case if I unclicked several checkboxes? How to catch this event? I need it because after catch this event I want to save current line state and after restart application will have a possibility to restore RenderableSeries state.
P.S. I want to make it under MVVM pattern

0 votes
382 views

I’m using a DateTimeNumericAxis as my xAxis.
As an example, 1 of my records date time is set to: 2024-08-02T15:00:00+10:00

They are converted to a timestamp value of 1722574800 and add it to the series.xValues, because it’s the format that SciChart reads. However, the xAxis label is being translated as August 2, 2024 5:00:00 AM instead of August 2, 2024 3:00:00 PM.

My current workaround is to create custom labels by updating the xAxis.labelProvider.formatLabel and labelProvider.formatCursorLabel of the xAxis. So now, I can convert it to toLocaleDateString with options: month: ‘short’, day: ‘numeric’ . But it’s not as compact as the default labels.

Default Axis Labels: Jul 27 28 29 30 31 Aug 02
Custom Axis Labels: 26 Jul 27 Jul 28 Jul 29 Jul 30 Jul 31 Jul 01 Aug 02Aug

See attached images with default vs custom labels

Question: How do I go about making sure that the Axis Labels and Axis Cursor labels follows the actual DateTime (2024-08-02T15:00:00+10:00) without making any custom axis labels?

0 votes
427 views

Is there any way to show the label of the bubble all the time instead of hovering at the center of the bubble?
I have tried annotation, but I wonder if there is any easier way to set the visibility of the bubble marker to always.
I am using BubbleRenderableSeriesViewModel to build bubble chart and using XyzDataSeries to build the chart.

0 votes
410 views

Hi, i want to change the GradientStops of FastUniformHeatmapRenderableSeries from ViewModel
Here is the Code below

                    <s:SciChartSurface
                    Width="330"
                    Height="630"
                    s:VisualXcceleratorEngine.EnableImpossibleMode="True"
                    s:VisualXcceleratorEngine.IsEnabled="True"
                    Cursor="Cross">
                    <s:SciChartSurface.RenderableSeries>
                        <s:FastUniformHeatmapRenderableSeries DataSeries="{Binding DataSeries}">
                            <s:FastUniformHeatmapRenderableSeries.ColorMap>
                                <s:HeatmapColorPalette
                                    GradientStops="{Binding ColorMap}"
                                    Maximum="100"
                                    Minimum="0" />
                            </s:FastUniformHeatmapRenderableSeries.ColorMap>
                        </s:FastUniformHeatmapRenderableSeries>
                    </s:SciChartSurface.RenderableSeries>

                    <s:SciChartSurface.XAxis>
                        <s:NumericAxis
                            AxisAlignment="Left"
                            FlipCoordinates="True"
                            Width="30"
                            MajorDelta="60"
                            MinorDelta="20"
                            AutoTicks="True"
                            DrawMajorGridLines="False"
                            DrawMinorGridLines="False"
                            DrawMinorTicks="False"
                            VisibleRange="0, 600" />
                    </s:SciChartSurface.XAxis>
                    <s:SciChartSurface.YAxis>
                        <s:NumericAxis
                            x:Name="YAxis"
                            AxisAlignment="Bottom"
                            FlipCoordinates="True"
                            Height="30"
                            AutoTicks="True"
                            DrawMajorGridLines="False"
                            DrawMinorGridLines="False"
                            DrawMinorTicks="False"
                            MajorDelta="30"
                            MinorDelta="10"
                            VisibleRange="0, 300" />
                    </s:SciChartSurface.YAxis>
                </s:SciChartSurface>

When I change the ColorMap at ViewModel, I can check that GradientStops Property in View is changed. But Chart’s color is not changed.
How can I change the GradientStops of FastUniformHeatmapRenderableSeries from ViewModel ?

0 votes
399 views

Hello,

I’ve observed that SciChart JavaScript does not currently support point selection or hit testing for 3D charts. Is there a method or workaround to implement point selection in 3D charts?

It would be helpful to obtain the coordinates of the selected point if such functionality is available.

Thank you for your assistance.

I attempted to use the Custom Modifier to capture point selection in a 3D chart, but I only received the screen coordinates of the mouse click, not the 3D coordinates of the point.

Is there a way to obtain the 3D coordinates of a selected point in Sci Chart JavaScript, or is there an alternative approach that can be used to achieve this?

i have included my attempt at this in the post.

0 votes
473 views

Hello everyone,

I’m trying to display a tooltip when I hover over an annotation in our WPF project using MVVM.

I attempted to override the MouseMove event on the SciChart surface to identify which annotation the mouse was over by cycling through each annotation. However, it didn’t seem like a very good way to proceed to me and I didn’t try to display the desired information at that point.

While reviewing the documentation, I noticed that annotations have a “Cursor” property. Is there a way to bind that property from the viewmodel? That would make my job so much easier.

If anyone has suggestions on how to proceed, they would be greatly appreciated.

Thanks,
Andrea

1 vote
485 views

I have a UserControl which contains a chart and some wpf controls. How can I print this UserControl to PDF or XPS? All examples I see are for the chart only.

  • j chatlein asked 2 months ago
  • last active 1 day ago
0 votes
448 views

Hello,

I am using your example:
https://www.scichart.com/documentation/js/current/CursorModifier_CustomisingContainer.html

new CursorModifier({
    showYLine: false,
    axisLabelFill: "#484848",
    tooltipLegendOffsetX:  10, - doesn't work
    crosshairStrokeDashArray: [5, 5],
    crosshairStrokeThickness: 1,
    crosshairStroke: _theme.crosshairStrokeSupplyDemand,
    showTooltip: true,
    tooltipSvgTemplate: getTooltipSvgTemplate
})

Is it possible to offset the tooltip from the X-axis? If it is on the right side of the axis, the spacing is maintained, unfortunately, if it is on the left side, it is ‘stuck’ to the line.

Thanks in advance.

Best regards,
Kamil

0 votes
454 views

Hi, is there a modifier or possibly buttons for zoom in & zoom out that works similar to a MouseWheelZoomModifier but for users with no mouse wheel?

1 vote
499 views

I’ve got an X axis that is int/numeric based that I have a custom labeler on to display strings. For example, let’s say my data is 1-26, but I want to show the letters in the alphabet rather than the number. The labeler piece is sorted out and is working for me as I’m seeing the letters as labels on the axis.

At this point, I’m trying to work on a tick provider that will only show labels corresponding to data in the series. Is this possible? Say I have A, E, I, O, and U as my data in the series, those are the only labels I want to see on the axis. I’m having trouble getting the TickProvider API to work in this way.

Thank you for the help!
Matthew

Showing 1 - 50 of 4k results