I have a C# program that produces a custom data series in the form List, where the Dataline members are Date, Open, High, Low, Close, Volume. Is there some way I can plot my data series in SciChart, without converting it element-by-element into OhlcDataSeries?

Hi,

I would like to know if the SCICHART support the 3D polar plot, as shown below.

Many thanks
Dan

I have a chart with four graphs, (four curves). I would like to get the Y-coordinate values for each of these curves, at the point where the mouse is positioned or clicked.

This code :

Point mousePoint;    
double yValue = YAxis.GetDataValue(mousePoint.Y);

gets only one of the y values, only one double value. I would like all the four y values, four double values. How can I get all these four y values? Thanks.

Hi All,
i have a problem when i added the Abt.Controls.Scichart.Core.Wpf.Example in my project like in the picture ! Thank you !
Best Regards Sahar

body { margin: 0; }

scichart-root { width: 100%; height: 100vh; }

chart0
chart0

// Create a SciChartSurface in the div ‘scichart-root’

async function builderExample(divElementId) {

var data1 = [[1698350200000, 659.4081], [1698350200000, 709.4191], [1698347047000, 542.9722], [1698342726000, 652.2053], [1698338406000, 566.1798], [1698334075000, 616.6355], [1698329754000, 686.94464], [1698325434000, 581.1947], [1698321108000, 616.5695], [1698316788000, 687.024], [1698312467000, 514.56464], [1698308146000, 657.59796]];

var xArray = [];
data1.forEach(function (value,index) {
// xArray[index] = value[0]
xArray.push(new Date(value[0]));
})
var yArray = [];
data1.forEach(function (value,index) {
yArray.push(value[1]);
})

// Demonstrates how to create a line chart with SciChart.js using the Builder API
const {
chartBuilder,
EThemeProviderType,
NumberRange,
EAxisAlignment,
EAxisType,
ESeriesType,
ZoomPanModifier,
MouseWheelZoomModifier,
TextAnnotation,
ECoordinateMode ,
EHorizontalAnchorPoint ,
EVerticalAnchorPoint ,
FastLineRenderableSeries,
xyDataSeries
} = SciChart;

// or, for npm, import { chartBuilder, … } from “scichart”

// #region ExampleB
// If you want to show an XAxis with dates between 1st March 2023 and 10th March 2023
const minDate = new Date(xArray[xArray.length – 1]);
const maxDate = new Date(xArray[0]);
console.log(xArray[0] + “minDate “+ minDate);

console.log(xArray[0] + “maxDate “+ maxDate);
// Create data for the chart with X-data as dates using unix Timestamp / 1000

const { wasmContext, sciChartSurface } = await chartBuilder.build2DChart(divElementId, {
surface: { theme: { type: EThemeProviderType.Dark } },
xAxes: {
type: EAxisType.DateTimeNumericAxis,
options: {
axisTitle: “X Axis / DateTime”,
// We need to specify some visibleRange to see these two dates
// SciChart.js expects linux timestamp / 1000

visibleRange: new NumberRange(minDate.getTime()/1000, maxDate.getTime()/1000 )
}
},
yAxes: {
type: EAxisType.NumericAxis,
options: {
axisTitle: “Y Axis, Left, default formatting”,
axisAlignment: EAxisAlignment.Left,

visibleRange: new NumberRange(500, 800),
}
},
series: [
{
type: ESeriesType.MountainSeries,
options: {
strokeThickness: 3,
stroke: “#50C7E0”
},
xyData: { xArray, yArray }
}
]
});
// #endregion
sciChartSurface.chartModifiers.add(new ZoomPanModifier(), new MouseWheelZoomModifier());

// Add annotations to tell the user what to do
sciChartSurface.annotations.add(new TextAnnotation({
text: “DateTimeNumericAxis Demo”,
x1: 0.1, y1: 0.1,
yCoordShift: 0,
xCoordinateMode: ECoordinateMode.Relative, yCoordinateMode: ECoordinateMode.Relative,
horizontalAnchorPoint: EHorizontalAnchorPoint.Center, verticalAnchorPoint: EVerticalAnchorPoint.Center,
opacity: 0.33,
fontSize: 36,
fontWeight: “Bold”
}));
sciChartSurface.annotations.add(new TextAnnotation({
text: “Try mouse-wheel, left/right mouse drag and notice the dynamic X-Axis Labels”,
x1: 0.5, y1: 0.5,
yCoordShift: 50,
xCoordinateMode: ECoordinateMode.Relative, yCoordinateMode: ECoordinateMode.Relative,
horizontalAnchorPoint: EHorizontalAnchorPoint.Center, verticalAnchorPoint: EVerticalAnchorPoint.Center,
opacity: 0.45,
fontSize: 17,

}));
const lineSeries = new FastLineRenderableSeries(wasmContext);
lineSeries.strokeThickness = 3;
lineSeries.stroke = “rgba(255,0,0,1)”;
lineSeries.dataSeries = xyDataSeries;
sciChartSurface.renderableSeries.add(lineSeries);
};

// Uncomment this to use the builder example
builderExample(“scichart-root”);

Hello there!

How can i remove or change chart indentation?

I need to do some calculation for data in visible range after zoom. Is there any notification when gesture ends in SCIPinchZoomModifier? If not, then that means I have to build a custom zoom gesture modifier? If so could you show me how pinch zoom is done in SCIPinchZoomModifier so that I don’t need to build everything from scratch? Thanks

I can’t seem to find it in the API, but I figured I’d ask .Is any built in support for live editing the Chart Title or Axis Titles right on the chart surface like you can with a TextAnnotation?

Hello,
I want to zoom at graph but without generating new 5×5 cubes in background. Is there a way how to do it?

I am having an issue with my Composite Annotation implementation.
I am using the example provided in the MeasureXyAnnotation.xaml that I found here.
My exception that is thrown (see exception attachment provided) complains about a missing Axis value.

In the public override void Update(ICoordinateCalculator xCoordCalc, ICoordinateCalculator yCoordCalc)
the yCoordCalc comes in with a null value. The xCoordCalc is populated and looks valid.

See attachment of my plotting area and well as the chart area. The composite annotation shows up alright, but as soon as I try to drag it the exception is immediately thrown.

I have no idea at this point why. I have tried to implement the annotation according to your example but obviously I am missing something.
Support getting this to work would be immensely appreciated.

Thank you
Anders

hi, I wanted to display the cursor information (x, y value)on the text annotation like the following. I can only find the example of displaying as tooltip, but is it possible to show with the text annotation? Thank you!

Hi

I was trying to bind DoubleRange type property to the VisibleRange property of LogarimethicNumericAxis.
Since DoubleRange is not a primitive type, OnPropertyChanged command didn’t work in c#.
Is there any way to reslove this problem?
My code is as below.

in View

<sci:SciChartSurface.XAxis>
    <sci:LogarithmicNumericAxis AutoRange="Never"    
        DrawMajorGridLines="False" 
        DrawMinorGridLines="False" 
        DrawMajorBands="False"
        Visibility="Visible"
        VisibleRange="{Binding Path=AxisVisibleRange,Mode=OneWay, UpdateSourceTrigger=PropertyChanged}">
    </sci:LogarithmicNumericAxis>
</sci:SciChartSurface.XAxis>

in View model

public DoubleRange AxisVisibleRange
{
    get
    {

        DoubleRange dr = new DoubleRange(0.1,100);
        return dr;

    }
}        

I do not seem to be able to set the property YAxis.Visibility of BaseRenderableSeries as part of a Trigger.

<Style TargetType="s:BaseRenderableSeries">
        <Style.Triggers>
            <Trigger Property="IsVisible" Value="True">
                <Setter Property="YAxis.Visibility" Value="Visible"/>
            </Trigger>

            <Trigger Property="IsVisible" Value="False">
                <Setter Property="YAxis.Visibility" Value="Collapsed"/>
            </Trigger>
        </Style.Triggers>
    </Style>

I want to make the associated yAxis Visiblity be a function of whether the matching Renderable Series is visible or not. I checked and BaseRenderableSeries has a YAxis property that can be set. Why is “YAxis.Visibility” in the setter property throwing an error in xaml?

Note: I have multiple yAxes in one surface and each renderable series has its own yAxis

Thanks

Hi,
Is there solution to always display series name below the line on the chart, not in legen, but I need to hide legend and I do not know what is series name. Thank You

I’m using a DateTimeAxis and by default major tick lines (and labels) are shown every 1/2 second – this is too busy/crowded for me. How do I change this to show a label every second? I set AutoTicks to false, but am not sure what to do about MajorDelta/MinorDelta when my X value is a DateTime object.

.
.
<s:SciChartSurface.RenderableSeries>
   <s:FastLineRenderableSeries x:Name="PositionSeries" StrokeThickness="2"/>
</s:SciChartSurface.RenderableSeries>

<s:SciChartSurface.XAxis>
   <s:DateTimeAxis x:Name="PositionXAxis" TextFormatting="mm:ss"/>
</s:SciChartSurface.XAxis>
.
.
XyDataSeries<DateTime, double> _positionSeries;
PositionSeries.DataSeries = _positionSeries;
.
.

I’d like to use the SciChartInteractionToolbar and the SciChartScrollbar in a scichart based project however (as always) there are some small but important changes that I need to make. I’ve looked everywhere but I can’t find where the toolbar is actually built in order to make the changes. I’m sure I could build the toolbar from scratch but this seems a waste when its largely already complete. Can you advise where I would find the code for the toolbar(s)?
Many thanks for your help!
Regards
Ian

Applying the following style to a FastLineRenderableSeries works fine:

<Style TargetType="s:FastLineRenderableSeries">
        <Setter Property="SeriesColor" Value="LightGreen" />
        <Setter Property="PointMarkerTemplate">
            <Setter.Value>
                <ControlTemplate>
                    <s:EllipsePointMarker Fill="LightGreen" Stroke="LightGreen" StrokeThickness="3" Width="7" Height="7"/>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

But the following does not work at all:

<Style TargetType="s:BaseRenderableSeries">
        <Setter Property="SeriesColor" Value="white"/>
        <Setter Property="PointMarkerTemplate">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type s:BasePointMarker}">
                    <s:EllipsePointMarker Fill="White" Stroke="White" StrokeThickness="3" Height="5" Width="5"/>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

a) Could this be a bug? I want this style to apply to all FastLineRenderableSeries and XyScatterRenderableSeries.
b) I noticed the style is only applied if SeriesColor and PointMarkers are not assigned at the time of RenderableSeries instantiation.

Hi,

I’ve got an issue with ChartModifiers in following scenario. I’ve got bunches of signals, where every signal carry data from different sensor. Bunches are recorded at individual sessions. I need to look at them collectively, so I choose some signals from one bunch and some signals from another bunch, where one signal = one SciChartSurface control and every SciChartSurface control is aligned in sequencer-like way (like yours Multi-Pane Stock Chart example), because I want to see signals one under another. I need to have some group of ChartModifiers acting on all choosen signals, because time scale should be preserved (as in yours example) – it works in my solution. But I also need to apply a modifier to pan, that should works only on signals that are part of certain bunch, because starting point in time of certain bunch signals don’t have to be preserved.

Assuming, zoom should works on every signal from every bunch, but panning should works only on signals from one bunch. I already gain zoom functionality by the means of ModifierGroup and MouseManager.SetMouseEventGroup(), but i don’t know how to add the panning. Could you give me any suggestions, how can I handle this?

I’m sending some screens below.

Hi guys,

Can you help me with the following problems that I have implementing this?

1. there is any way to export the chart data to CSV and XSL?
2. How can I make this the following two functionalities work:
   a)
   b)
   public override void OnModifierMouseUp(ModifierMouseArgs e)
   {
   // Open menu if right mouse btn was clicked and Alt btn was pressed
   // IsOpen should be OneWay-bound to SciChartSurface.ContextMenu.IsOpen
   IsOpen = (e.MouseButtons == MouseButtons.Right) && (e.Modifier == MouseModifier.Alt);
   }

As you can see both use the the mouse right button so, when a) is executed, b) does not work…
I was thinking that maybe if I could execute a) when double right click it may fix it… but I am not sure how to do it. Any ideas how to fix this?

Thanks very much…

Hi all,
How can I remove the space (red cross) inside the chart ?
Thank you!

Screenshots attached.

To recreate:

• Create a chart
• Add a CursorModifier – default options is fine
• Either directly remove the modifier using .remove(modifier), or clear all using .clear()

Expected behaviour:
– Should remove the cursor modifier

Actual behaviour with bug:
– Crashes the page

This appears to be an issue with CursorModifier only (out of the 5 or 6 that I’ve tried). Other modifiers work as expected.

Traced the issue to this.parentSurface being undefined in CursorModifier.js, so when onDetach() is called, it errors.

Thanks!
Joe

Hi,

I’ve got several line chart series in my ChartSurface and it’s possible to collapse and show them dynamically. If I collapse all series and only one series visible I would like to see that one in the OverView chart. But I cannot find a way to get it done. DataSeriesIndex always get the first series in the parentSurface regardless of it’s visibility. Is there any way to show the first visible Series in the Overview chart?

<chart:SciChartOverview ParentSurface=".." DataSeriesIndex=”1″ SelectedRange=”{Binding ElementName=.., Path=XAxis.VisibleRange, Mode=TwoWay}”>

Best Regards,
Charith

Hello,

I am having a problem where I want to display the Rollover Modifier only when I click on the selected graph.
For example:
https://demo.scichart.com/javascript-chart-rollovermodifier-tooltips
If I select the Second Lines Series, I want to see the rollover only for that particular graph and not the first one and the third one.

I have tried using charts id’s as a reference to show only one tooltip but it just enables it for all the graphs.

Any help would be kindly appreciated.

We have lots of Point Markers in our series that overlap, so we’re trying to find a way to Cluster them in Android and iOS. I can see that there is an SCIPointMarkerClusterizer. Can you give us some pointers on how we can achieve point marker clustering and/or spacing?

Dear all,

I have an MVVM model which host the property ChartDataSeries as below :

 public ObservableCollection<IRenderableSeriesViewModel> ChartDataSeries
    {
        get { return _seriesViewModels; }
        set
        {
            SetProperty(ref this._seriesViewModels, value);
        }

What I ham trying to do is to identifier the selected serie user select in the chart and find it afterward in the ChartDataSeries collection in order to set a property IsSelected=true but trouble is that I cannot reach the selected Data serie from the collection.

I have bee through your sample but could not get it either

Any y help or idea how to do ?

regards

Hi ,

I am facing a issue with the tooltips.When the scichart surface width is small or the window that has the scichartsurface is small the tooltips are not coming out of chart surface. I can reproduce the issue in Scichart sample(CustomTooltipsWithModifiers) also.

I even tried setting ClipModifierSurface =”False” ClipToBounds=”False”, but no luck. I still have the issue.

FYI , I am attaching the .png files. I cannot attach the sample project here because the allowed upload size is smaller.

Thanks,
Rakesh Bandari.

I want to use my custom image as a background for SciChart js.
I tried to put background-image to body of the page.
Then I enabled transparent background via:

sciChartSurface.backgroundCompletelyTransparentEnabled = true;

But it doesn’t work. It does nothing.
Then I tried to put transparent background to SciChart:

sciChartSurface.background = "#00000000";

But it doesn’t work as well. Chart completely disappears in this case.

How can I put my image as a background for SciChart?