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

0 votes
0 answers
1 view

Hello,

I would like to ask if we can expect working labels for LineAnnotation anytime soon? It’s the only type of line that doesn’t have functioning labels. I need this information because we are planning to deploy a version with formations soon, and we cannot afford inconsistency in the labels. If this is not planned for the near future, we will temporarily disable this option for the other lines.

Best regards,
Kamil

0 votes
0 answers
16 views

Hello,

we upgraded the version from 3.4.652 to 3.5.687, and problems with the Y-axis appeared on the charts. When moving the overviewChart sliders or using the scroll wheel to change the visibleRange, the Y-axis fails to set the min and max values correctly, resulting in the default values of 0 and 10 being displayed (Error: Argument max must be a real number (not infinite, not NAN)). We didn’t change anything in the code. I checked the data we provide, and all variables are of type Number, there are no other random things.
I’ll just include the axis parameters we use.

            const yAxis = new NumericAxis(wasmContext, {
            autoRange: EAutoRange.Always,
            growBy: new NumberRange(0.1, 0.1),
            drawMajorBands: false,
            drawMajorTickLines: false,
            drawMinorGridLines: false,
            drawMinorTickLines: false,
            labelStyle: {
                fontSize: 11,
                fontFamily: 'Open Sans, sans-serif',
                padding: new Thickness(0, 3, 0, 0),
                color: this.theme.lineChartColor,
                alignment: ELabelAlignment.Right,
            },
            maxAutoTicks: 7,
            axisAlignment: EAxisAlignment.Right,
            labelProvider: this.getDynamicValueLabelProvider(),
            isVisible: false
        });

        const yAxisVolume = new NumericAxis(wasmContext, {
            id: USER_CHART.Y_AXIS_VOLUME_ID,
            growBy: new NumberRange(0, 4),
            isVisible: false,
            autoRange: EAutoRange.Always,
            allowFastMath: true,
        });

https://ibb.co/tL5HgCz – in the screenshot, the incorrect axes are on the left side – sometimes only the volume axis (invisible), and in another case, both axes. The correct charts are on the right side.

Best regards,
Kamil

0 votes
0 answers
24 views

Hello there,

The hit test provider for stackedColumnRenderableSeries returns ‘false’ for the ‘isHit’ boolean when hit testing stacked columns with negative values. However, stacked Columns with positive values correctly return ‘true’ for ‘isHit’ when used in the same setup.
I am trying to achieve that the hit test provider returns ‘true’ when hit testing stacked columns with negative values.

Here’s my demo:
https://codepen.io/maxgeldner/pen/rNXYjgX?editors=1010

I have tried exchanging the series in line 75 and 77 and clicking on the displayed columns afterwards in order to hit test them. Clicking on negative columns returns ‘false’ inside the hit test, clicking on positive columns returns ‘true’.

0 votes
0 answers
64 views

The chart works ok on date data. But I have weekly data, e.g.

xValues is set to x
yValues is set to y
xl is not used for drawing the chart.

I then get a tooltip that is out of sync with the x axis (see pic).

"a": {
"x": [
1,
2,
3,
4,
5,
6,
7
],
"xl": [
"Mon",
"Tue",
"Wed",
"Thu",
"Fri",
"Sat",
"Sun"
],
"y": [
46.8235294117647,
48.0,
49.34285714285714,
45.05714285714286,
42.114285714285714,
39.55882352941177,
40.970588235294116
]
},

My chart code

 const initSciChart = async(series_id, target_element_id, xValues, yValues, zoomOn = false, labels = null) =& gt; {

   // Initialize SciChartSurface. Don't forget to await!
   const { sciChartSurface, wasmContext } = await SciChartSurface.create(target_element_id, {
      theme: new SciChartJsNavyTheme(),
      title: series_id,
      titleStyle: { fontSize: 22 }
   });

   // Create an XAxis and YAxis with growBy padding
   const growBy = new NumberRange(0.1, 0.1);
   let labelProvider = new SmartDateLabelProvider();

   if (labels) {
      console.log('setting labels');
      labelProvider = new TextLabelProvider({
         // When passed as an array, labels will be used in order
         labels: labels,
      });
   }
}

const xAxesOptions = {
   //axisTitle: "Time",
   maxAutoTicks: 10,
   minorsPerMajor: 2,
   drawMajorGridLines: true,
   drawMinorGridLines: true,
   axisAlignment: EAxisAlignment.Bottom,

   labelProvider: labelProvider,
   growBy,
   labelStyle: {
      alignment: ELabelAlignment.Center, // Auto,
      fontFamily: "Arial",
      fontSize: 16,
      color: "White",
   }, // type TTextStyle
};

sciChartSurface.xAxes.add(new CategoryAxis(wasmContext, xAxesOptions));
sciChartSurface.yAxes.add(new NumericAxis(wasmContext, {
   //axisTitle: "Counts",
   axisAlignment: EAxisAlignment.Right,
   autoRange: EAutoRange.Alwags,
   growBy
}));

// allow zooming in the x direction
if (zoomOn) {
   sciChartSurface.chartModifiers.add(
      new MouseWheelZoomModifier({ xyDirection: EXyDirection.XDirection }),
      new ZoomPanModifier(),
      new ZoomExtentsModifier(),
   );
}
// Create a line series with some initial data
let lineSeries = new FastLineRenderableSeries(wasmContext, {
   stroke: "steelblue",
   strokeThickness: 3,
   dataSeries: new XyDataSeries(wasmContext, {
      //xValues: [0,1,2,3,4,5,6,7,8,9],
      //yValues: [0, 0.0998, 0.1986, 0.2955, 0.3894, 0.4794, 0.5646, 0.6442, 0.7173, 0.7833]
      xValues: xValues,
      yValues: yValues,
      dataIsSortedInX: true,
      //dataEvenlySpacedInX: true,
      //containsNaN: false
   }),
   pointMarker: new EllipsePointMarker(wasmContext, { width: 11, height: 11, fill: "#fff" }),
});

lineSeries.rolloverModifierProps.tooltipLabelX = 'Date';
lineSeries.rolloverModifierProps.tooltipLabelY = '';
sciChartSurface.renderableSeries.add(lineSeries);

// Add RolloverModifier behavior
sciChartSurface.chartModifiers.add(new RolloverModifier());

    //sciChartSurface.useCommunityLicense();

    };
1 vote
0 answers
49 views

Hello,

we have a problem with the values on the Y-axis. We use autoRange: EAutoRange.Always, so in theory, the candles and lines should always be visible. The problem occurs when we have 1 candle or 1 OHLC and with the line chart when a new value goes beyond the current range – the value axis update only happens after the second new record. Below I am attaching the code we use; maybe something is missing or incorrect.

//create axis
 const yAxis = new NumericAxis(wasmContext, {
        autoRange: EAutoRange.Always,
        growBy: new NumberRange(0.1, 0.1),
        drawMajorBands: false,
        drawMajorTickLines: false,
        drawMinorGridLines: false,
        drawMinorTickLines: false,
        labelStyle: {
            fontSize: 11,
            fontFamily: 'Open Sans, sans-serif',
            padding: new Thickness(0, 3, 0, 0),
            color: this.theme.lineChartColor,
            alignment: ELabelAlignment.Right,
        },
        maxAutoTicks: 7,
        axisAlignment: EAxisAlignment.Right,
        labelProvider: this.getDynamicValueLabelProvider(),
    });
    const yAxisVolume = new NumericAxis(wasmContext, {
        id: USER_CHART.Y_AXIS_VOLUME_ID,
        growBy: new NumberRange(0, 4),
        isVisible: false,
        autoRange: EAutoRange.Always,
        allowFastMath: true,
    });
//create
this.getCandleSeries().dataSeries.append(this.xValues.length - 1, open, high, low, close);
//update
const currentIndex = this.getCandleSeries().dataSeries.count() - 1;
this.getCandleSeries().dataSeries.update(currentIndex, open, high, low, close);

Current view – https://ibb.co/BtCzdgS
Desired view – https://ibb.co/TknZQXG
Line – https://ibb.co/PxY0n3t – also the price annotation is invisible because the new value is out of the current range

If any other part of the code is needed, let me know.

Best regards,
Kamil

1 vote
55 views

Hi,

would it be possible for the onDrag function to return the same values as onClick, namely sender, mouseArgs, and relativeCoords (although I won’t need the latter)? Currently, it doesn’t return anything.

Best regards,
Kamil

0 votes
80 views

Memory Leak and Crash In SciChart 3D
Demo: https://github.com/Chenyliang/CrashDemo

The situation occurs in two configurations.
1、 i7-9700 + Graphics card: Intel(R) UHD Graphics 630
2、i7-12700 + RTX 3050

Version : 8.5.0.28148

  • chen yl asked 1 week ago
  • last active 1 week ago
1 vote
60 views

Hi there.

I want to handle the double-click event axis in a 3D chart.
enter image description here

Here is my code.

<s3D:SciChart3DSurface x:Name="chartSurface">
    <s3D:SciChart3DSurface.YAxis>
        <s3D:NumericAxis3D MouseDoubleClick="Axis_MouseDoubleClick" />
    </s3D:SciChart3DSurface.YAxis>
</s3D:SciChart3DSurface> 

private void Axis_MouseDoubleClick(object sender, MouseButtonEventArgs e)
{
    //Do something for target axis...
}

but, it doesn’t seem to work.
So I tried to get the Hit object using “VisualTreeHelper.HitTest”, but it also didn’t work.

 protected override void OnMouseDoubleClick(MouseButtonEventArgs e)
 {            
     var hitResult = VisualTreeHelper.HitTest(chartSurface, e.GetPosition(this));
     var axis = FindParent<NumericAxis3D>(hitResult.VisualHit);
     if (axis != null)
     {
         //Do somthing for target axis...
     }            
     base.OnMouseDoubleClick(e);            
 }

 private static T? FindParent<T>(DependencyObject child) where T : DependencyObject
 {
     if (child == null) return null;
     T? foundParent = null;
     var currentParent = VisualTreeHelper.GetParent(child);
     do
     {                
         if (currentParent is T)
         {
             foundParent = (T)currentParent;
             break;
         }
         currentParent = VisualTreeHelper.GetParent(currentParent);
     } while (currentParent != null);
     return foundParent;
 }

It seems to work well in 2D charts.
Can you please tell me the way to handle the mouse event for the axes in a 3d chart?

Thanks.

  • nada nada asked 2 weeks ago
  • last active 3 days ago
0 votes
52 views

Dear SciChart Team,

I am currently using CursorModifier.tooltipDataTemplate with FastBubbleRenderableSeries. In my DataSeries, I have two or more data points that share the same xValues and yValues. However, the SeriesInfo only returns one of these data points, and I am unable to retrieve the others to add them to the lineItems.

Do you have any suggestions on how to solve this?

Thanks in advance!

Best regards,
Phat Pham

  • Pham Phat asked 2 weeks ago
  • last active 1 week ago
0 votes
64 views

I’ve created a chart with a FastColumnRenderableSeries and a logarithmic Y-axis with a VisibleRange of min=1e-13, max=1e-7. However the resulting chart appears “upside down”, which I understand is a consequence of plotting values <1. Is there any way to “correct” this?
Plotting my data in Excel initially exhibits the same “upside down” behaviour, but can be corrected by setting the “Horizontal access crosses” axis option to 1e-13, so is there an equivalent setting in SciChart? I thought it might have been the ZeroLineY property, but playing around with this had no effect.

As a cheat/workaround I’ve switched to a FastLineRenderableSeries, as you don’t see the upside down effect, but the preference is for a column chart. (I’m rewriting a very old app that uses Dundas, and this does somehow render the data the “right way up”, so I know customers are going to want a like-for-like bar chart).

1 vote
82 views

Is is possible to generate a Constellation diagram (Quadrant chart with circle shape) using SciChart?
If it is possible, please share a sample project.

1 vote
97 views

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

1 vote
95 views

Is there a simple way to change the order that a number FastLineRenderableSeries are drawn on the graph surface?

We want to be able to change the order in some other part of our program and have the graph update to reflect that change.

Thanks

1 vote
98 views

I have a line chart and I frequently notice the lines were rendered with gaps in random places that change in size as the chart is being scrolled in the horizontal direction. Please see the attached screenshot/video.

The location of the gap seem to be different every time the page is reloaded.

I do have the following configuration, however I’ve observed the behaviour without the configuration as well.

new XyDataSeries(wasmContext, {
   dataIsSortedInX: false,
   dataEvenlySpacedInX: false,
   containsNaN: true,
});

Appreciate any pointers on how to resolve this issue.

  • Edwin Liu asked 3 weeks ago
  • last active 2 weeks ago
1 vote
107 views

It is unable to add a horizontal line to the polar graph, but I need to make a circle, which in essence will be a horizontal line, is it possible to add it somehow or draw this circle in some other way.
The picture shows how it should look (here the circle was made with FastLineRenderableSeries)

0 votes
0 answers
130 views

Hello,

I noticed a problem where the tooltip in 3D charts does not work on new data.

Below I have a simple example where the tooltip works as expected on the initial data but does not show when hovered over the data added in the interval via the appendRange function.

https://codesandbox.io/p/sandbox/3d-bubble-chart-forked-vd8ngd

Is there a problem or something missing with my implementation of the tooltip?

1 vote
105 views

I am added Relative Annotations but look like it worked only for X axis. Why if Y1=0.5 it not displayed only on half of chart? What I done wrong?

1 vote
162 views

Is there a javascript version for ColumnRenderableSeries3D? im trying to recreate this wpf scichart into javascript.

1 vote
119 views

Dear SciChart Team,

I am attempting to create a custom PaletteProvider for PointMarker that does not trigger each time the visible range changes. I have referred to the documentation here: https://www.scichart.com/documentation/js/current/typedoc/interfaces/ipointmarkerpaletteprovider.html.
I have implemented the new class as follows:

class NewTradePaletteProvider {
constructor(inputChart) {
    this.inputChart = inputChart;
}

onAttached(parentSeries) {
    this.parentSeries = parentSeries;
}

onDetached() {
    this.parentSeries = undefined;
}

get isRangeIndependant() {
    return true;
}

overridePointMarkerArgb(xValue, yValue, index, opacity, metadata) {
    const fillValue =
        index % 2 == 0
            ? parseColorToUIntArgb("#00AB55")
            : parseColorToUIntArgb("#2195F2");
    return { stroke: undefined, fill: fillValue };
}

}

However, the overridePointMarkerArgb method is still being called every time the visible range changes. Could you kindly advise if there is an issue with my approach?

Best regards,
Phat

  • Pham Phat asked 4 weeks ago
  • last active 3 weeks ago
0 votes
99 views

Hello,

I wanted to move the displayed data away from the Y-axis because the annotations were not fitting. So I set overrideOffset: -14 on the X-axis (CategoryAxis). The data moved, but now the labels on the X-axis are not centered, so I set on the X-axis labelStyle: {padding: new Thickness(2, 36, 0, 0)}. The labels are centered, but now the labels from CursorModifier are shifted. Is there any way to move them? I would like to have all the labels centered. I couldn’t find any properties to change the padding – the only changes available are color changes. Unless there is another method to move the data series away from the Y-axis instead of using overrideOffset.

Labels
https://ibb.co/6HzPCRr

Best regards,
Kamil

1 vote
133 views

Hello

I am trying to make visual E2E test form my application with playwright
When running locally everything works as expected after opening scichart’s Licence Wizard
But when I try to enter same page with playwright I get license key error

Is there any way to solve this? How excatly does scichart check for licence key?

I would be very glad for some help with this

1 vote
0 answers
148 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 -&gt; {
                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
126 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 1 month ago
  • last active 1 month ago
0 votes
0 answers
145 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&lt;DateTime, double&gt;();

for (int i = 0; i &lt; 20; i++)
{
    var date = i &lt; 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
198 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
228 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
166 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 1 month ago
  • last active 1 month ago
1 vote
177 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
149 views

Any update on ARM support?

Not asking about MacOS/linux but Windows on ARM.

  • Eamon asked 1 month ago
  • last active 1 month ago
0 votes
165 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) =&gt; {
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 1 month ago
  • last active 1 month ago
1 vote
188 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
198 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
244 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
223 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 2 months ago
  • last active 1 month ago
0 votes
209 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
255 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
259 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 2 months ago
  • last active 1 month ago
0 votes
263 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
268 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
293 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 2 months ago
  • last active 1 month ago
0 votes
300 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 2 months ago
  • last active 1 month ago
0 votes
297 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 2 months ago
  • last active 2 months ago
0 votes
313 views

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

0 votes
284 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
303 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
333 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
356 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
359 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
347 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.

Showing 1 - 50 of 4k results