Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
30
Line Chart: Change Individual Data Point Colors
posted

I have a line chart with data points that are squares.  I would like to make it so if a data point value is above let's say 25 then the square changes color to red, if it is below 25 then change the square's color to green.

I have accessed the ChartDrawItem and looped through the Primitives.  I found the PointSet Primitive with the DataPoints and the icon value.  However, nothing I change in the DataPoints PE affects the icon color and when I change the icon values for the PointSet it effects all points.

Is it possible to change color, icon, etc. for a single point on a line?

  • 49378
    Verified Answer
    posted

    Hi kywoo916,

    Thank you for posting in the community.

    You can style the datapoints in a line chart differently by handling the FillSceneGraph event. A very similar scenario is discussed in the following thread:

    http://blogs.infragistics.com/forums/p/33056/180939.aspx#180939

    The difference is that in your scenario you should handle the DataPoints in a Polyline primitive. Here is a sample implementation for styling the odd and even indexed datapoints on a single line with different colors.

        protected void UltraChart1_FillSceneGraph(object sender, Infragistics.UltraChart.Shared.Events.FillSceneGraphEventArgs e)
        {
            PrimitiveCollection symbols = new PrimitiveCollection();
            foreach (Primitive p in e.SceneGraph)
            {
                Polyline polyline = p as Polyline;
                if (polyline != null)
                {
                    //this index is used to style even and odd indexed points on a polyline differently.polyline.Value can be checked instead.
                    int index = 0;
            
                    foreach (DataPoint dataPoint in polyline.points)
                    {
                       
                        Symbol symbol = new Symbol();
                        symbol.icon = SymbolIcon.Circle;
                        symbol.iconSize = SymbolIconSize.Medium;

                        if (index % 2 == 0)
                        {
                            symbol.PE.Fill = Color.Red;
                            index ++;
                        }
                        else
                        {
                            symbol.PE.Fill = Color.Green;
                            index++;
                        }
                        symbol.point = dataPoint.point;
                        symbols.Add(symbol);
                    }
                }
            }

            e.SceneGraph.AddRange(symbols.ToArray());
        }

    Please let me know if this helps.