How can I set the color of each point of the line on C1Chart

How can I set the color of each point of the line on C1Chart

Posted by: a.koneva on 26 May 2022, 7:20 pm EST

• 

  a.koneva

  • Post Options:
  • Link
    Copy

  Posted 26 May 2022, 7:20 pm EST

  Hi
  
  I am using C1Chart. I would like to set the color of each point of the line depending on some condition. Is there any solution for this?

  Anna.

• 

  nitin.sharma

  

  • Post Options:
  • Link
    Copy

  Posted 27 May 2022, 1:05 am EST

  Hello,

  Thanks for reaching out to us with your query.

  You can add the C1Chart PointStyles and handle the Select event for conditional coloring as:(see codes snippet)

  
  ...............
  PointStyle ps = 
  c1Chart1.ChartGroups[0].ChartData.PointStylesList.AddNewPointStyle();
  ps.Select += PointStyle_Select;
  ps.Selection = PointStyleSelectionEnum.Custom;
  ..............
  
  private void PointStyle_Select(object sender, PointStyleSelectEventArgs e)
  {
        /* value>40(Green Color) and value<=40(Red Color)*/
  
        double val = Convert.ToDouble(c1Chart1.ChartGroups[0].ChartData[e.SeriesIndex].Y[e.PointIndex]);
        C1.Win.C1Chart.PointStyle ps = (C1.Win.C1Chart.PointStyle)sender;
        ps.SymbolStyle.Color = val > 40 ? Color.Green : Color.Red;
        ps.SymbolStyle.Size = 10;
        e.Selected = true;
  }
  
  

  Please refer the attached sample for the same : C1ChartPointColorDemo.zip

  Best Regards,
  
  Nitin.

• 

  a.koneva

  • Post Options:
  • Link
    Copy

  Posted 6 June 2022, 6:07 pm EST

  Hi Nitin
  
  Thank you for your answer and a code sample.
  
  But I have another question. What if I have two ChartDataSeries on the chart and I want to cahnge colors of points (depending on some condition) on only one of the lines?

• 

  a.koneva

  • Post Options:
  • Link
    Copy

  Posted 6 June 2022, 6:12 pm EST

  Oh, I see. I should use e.SeriesIndex.

• 

  nitin.sharma

  

  • Post Options:
  • Link
    Copy

  Posted 6 June 2022, 11:03 pm EST

  Hi,

  You are correct, if you have multiple ChartDataSeries then you can update PointStyles for particular series by validating e.SeriesIndex.

  Regards,
  
  Nitin.

• 

  a.koneva

  • Post Options:
  • Link
    Copy

  Posted 6 June 2022, 11:26 pm EST

  Hi Nitin
  
  Sorry but how can I get the index of the point that is being displayed in PointStyle_Select(object sender, PointStyleSelectEventArgs e)? It seems to me that e.PointIndex is equal to 0 for some time at first and then later it becomes to change 1, 2, 3, etc. Is it correct? Maybe I don’t understand how it works… (

  Anna

• 

  a.koneva

  • Post Options:
  • Link
    Copy

  Posted 7 June 2022, 12:57 am EST

  Maybe this strange behavior appears because I redraw the list of points every second…

• 

  nitin.sharma

  

  • Post Options:
  • Link
    Copy

  Posted 7 June 2022, 1:01 am EST

  Hello Anna,

  JFYI, PointStyle’s Select event fires for each point of every series in chart. You need to validate for series index for styling the points for a particular series. For example, If you have two series and wants different conditional coloring for both series. So, you need to validate according to the series index.(see code snippet)

  
          private void PointStyle_Select(object sender, PointStyleSelectEventArgs e)
          {            
              C1.Win.C1Chart.PointStyle ps = (C1.Win.C1Chart.PointStyle)sender;
              ps.SymbolStyle.Size = 10;
              // value>40(Green Color) and value<40(Red Color) for series 1
              if (e.SeriesIndex==0)
              {
                  double val = Convert.ToDouble(c1Chart1.ChartGroups[0].ChartData[e.SeriesIndex].Y[e.PointIndex]);                
                  ps.SymbolStyle.Color = val > 40 ? Color.Green : Color.Red;
                  
              }
              // value>10(Green Color) and value<10(Red Color) for series 2
              else if (e.SeriesIndex==1)
              {
                  double val = Convert.ToDouble(c1Chart1.ChartGroups[0].ChartData[e.SeriesIndex].Y[e.PointIndex]);                
                  ps.SymbolStyle.Color = val > 10 ? Color.Green : Color.Red;
              }
              e.Selected = true;
          }
  
  

  Please refer the attached modified sample for the same: C1ChartPointColorDemo_Mod.zip

  Best Regards,
  
  Nitin