Forums

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

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

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

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.

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.

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!

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.