SciChart® the market leader in Fast WPF Charts, WPF 3D Charts, iOS Chart, Android Chart and JavaScript Chart Components


Is it possible to create a BoxRendableSeries with outliers by a predefined range (e.g. 2%-98%) and everything which exceeds will be drawn as a outlier (a ellipse a like dot)?

What I want to do is, given each box, I want to mark the box with a dot if parameters exceed certain values. Is this something that SciChart supports?

  • You must to post comments

Hi Stas,

The answer is yes, and no.

No, BoxPlot does not support this natively, but yes, you can add it quite simply by extending the BoxPlotRenderableSeries and overriding InternalDraw.

Take a look at the code sample below, it should be fairly self explanatory:

public class BoxPlotEx : FastBoxPlotRenderableSeries
    protected override void InternalDraw(IRenderContext2D renderContext, IRenderPassData renderPassData)
        // Draw the base
        base.InternalDraw(renderContext, renderPassData);

        // Get the BoxPlot data 
        var points = CurrentRenderPassData.PointSeries as BoxPointSeries; 

        int setCount = points.Count; 

        // Create a pen and brush. TODO: You could expose dependency properties for the Stroke and Fill or get from the base
        using (var pen = renderContext.CreatePen(Colors.Red, true, 1.0f))
        using (var brush = renderContext.CreateBrush(Colors.Blue))
            // Iterate over points
            for (int i = 0; i < setCount; i++)
                // Get each Box Plot point
                var pt = points[i] as GenericPoint2D<BoxSeriesPoint>;

                double x = pt.X;
                double yMin = pt.YValues.Min;
                double yLower = pt.YValues.LowerQuartile;
                double yMed = pt.YValues.Y;
                double yUpper = pt.YValues.UpperQuartile;
                double yMax = pt.YValues.Max;

                // TODO Calculate isOutlier flag from the varibles above
                bool isOutLier = true;

                if (isOutLier)
                    // If outlier, convert the data-coord at the X-value and YMax of the box to pixels
                    var xCoord = renderPassData.XCoordinateCalculator.GetCoordinate(x);
                    var yMaxCoord = renderPassData.YCoordinateCalculator.GetCoordinate(yMax);

                    // Draw an ellipse just above the box 
                    Point center = new Point(xCoord, yMaxCoord + 10);
                    renderContext.DrawEllipse(pen, brush, center, 5, 5);

                    // TODO: More drawing, if you wish


Some articles to note which can help you:

Best regards,


  • You must to post comments
Showing 1 result
Your Answer

Please first to submit.