FlexChart for WinForms | ComponentOne
Elements / Plot Area
In This Topic
    Plot Area
    In This Topic

    Plot area is the area of chart where data points are plotted. In a chart having X and Y axis, plot area also refers to the area covered by the axes. In a chart like pie chart or sunburst chart, plot area refers to the circular area actually covered by the chart itself.

    plot area

    In FlexChart, plot area is rendered with a basic white background color. However, you can customize the appearance of plot area to match your requirements using PlotStyle property of ChartStyle type. The ChartStyle class provides properties to set fill, fill color, line pattern, stroke, stroke width, stroke dash pattern etc.

    //Setting color that fills the plot area
    this.flexChart1.PlotStyle.Fill = new SolidBrush(Color.Ivory) ;
    
    //Setting brush to be used for stroke pattern
    this.flexChart1.PlotStyle.Stroke = Brushes.OrangeRed;
    
    //Setting width to be used for stroke pattern
    this.flexChart1.PlotStyle.StrokeWidth = 2.0f;
    
    //Setting pattern to be used stroke
    this.flexChart1.PlotStyle.LinePattern = C1.Chart.LinePatternEnum.Dash;
    
    'Setting color that fills the plot area
    Me.flexChart1.PlotStyle.Fill = New SolidBrush(Color.LightGray)
    
    'Setting brush to be used for stroke pattern
    Me.flexChart1.PlotStyle.Stroke = Brushes.DarkBlue
    
    'Setting width to be used for stroke pattern
    Me.flexChart1.PlotStyle.StrokeWidth = 2.0F
    
    'Setting pattern to be used stroke
    Me.flexChart1.PlotStyle.LinePattern = C1.Chart.LinePatternEnum.Dash
    

    Create Multiple Plot Areas

    Multiple plot areas are advantageous over multiple overlapped series as they increase the readability of data and hence facilitate better analysis. Drawing multiple series, one in each plot area while sharing some of the chart resources like axes, legend etc. is helpful in scenarios like the one shown in the below chart which demonstrates change in acceleration, velocity and distance against time series. In FlexChart, multiple plot areas can be implemented by adding the plot areas to the PlotAreas collection and while defining the series, specify the plot name in which the same has to be rendered. FlexChart also provides properties to set the height, width, row index and column index of each plot area.

    multiple plot area

    //Add new PlotAreas to FlexChart, Row property decides where to place the PlotArea
    flexChart1.PlotAreas.Add(new PlotArea { Name = "plot1", Row = 1 });
    flexChart1.PlotAreas.Add(new PlotArea { Name = "plot2", Row = 3 });
    flexChart1.PlotAreas.Add(new PlotArea { Name = "plot3", Row = 5 });
    
    //Create new series for Acceleration and set PlotAreaName specifying in which plot to render this series
    var acceleration = new Series
    {
        Name = "Acceleration",
        DataSource = CreateDataPoints((x) => x, (y) => y, 20),
        AxisY = new Axis {Position = Position.Left, MajorGrid = true, PlotAreaName = "plot1"}
    };
    this.flexChart1.Series.Add(acceleration);
    
    //Create new series for Velocity and set PlotAreaName specifying in which plot to render this series
    var velocity = new Series
    {
        Name = "Velocity",
        DataSource = CreateDataPoints((x) => x, (y) => y * y, 20),
        AxisY = new Axis {Position = Position.Left, MajorGrid = true, PlotAreaName = "plot2"}
    
    };
    this.flexChart1.Series.Add(velocity);
    
    //Create new series for distance and set PlotAreaName specifying in which plot to render this series
    var distance = new Series
    {
        Name = "Distance",
        DataSource = CreateDataPoints((x) => x, (y) => 0.5 * y * y * y, 20),
        AxisY = new Axis {Position = Position.Left, MajorGrid = true, PlotAreaName = "plot3"}
    };
    this.flexChart1.Series.Add(distance);
    
    'Add new PlotAreas to FlexChart, Row property decides where to place the PlotArea
    flexChart1.PlotAreas.Add(New PlotArea() With {
          .Name = "plot1",
          .Row = 1
    })
    flexChart1.PlotAreas.Add(New PlotArea() With {
          .Name = "plot2",
          .Row = 3
    })
    flexChart1.PlotAreas.Add(New PlotArea() With {
          .Name = "plot3",
          .Row = 5
    })
    
    'Create new series for Acceleration and set PlotAreaName specifying in which plot to render this series
    Dim acceleration As Series = New Series() With {
          .Name = "Acceleration",
          .DataSource = CreateDataPoints(Function(x) x, Function(y) y, 20),
          .AxisY = New Axis() With {
              .Position = Position.Left,
              .MajorGrid = True,
              .PlotAreaName = "plot1"
        }
    }
    Me.flexChart1.Series.Add(acceleration)
    
    'Create new series for Velocity and set PlotAreaName specifying in which plot to render this series
    Dim velocity As Series = New Series() With {
          .Name = "Velocity",
          .DataSource = CreateDataPoints(Function(x) x, Function(y) y * y, 20),
          .AxisY = New Axis() With {
              .Position = Position.Left,
              .MajorGrid = True,
              .PlotAreaName = "plot2"
        }
    }
    Me.flexChart1.Series.Add(velocity)
    
    'Create new series for distance and set PlotAreaName specifying in which plot to render this series
    Dim distance As Series = New Series() With {
          .Name = "Distance",
          .DataSource = CreateDataPoints(Function(x) x, Function(y) 0.5 * y * y * y, 20),
          .AxisY = New Axis() With {
              .Position = Position.Left,
              .MajorGrid = True,
              .PlotAreaName = "plot3"
        }
    }
    Me.flexChart1.Series.Add(distance)
    

    Note that the above sample code uses a custom method named CreateDataPoints to generate random data. You can set up the data source as per your requirements.

    /// <summary>
    /// Method for creating data for FlexChart
    /// </summary>
    public static List<PointD> CreateDataPoints(Func<double, double> funX, Func<double, double> funY, int count)
    {
        var data = new List<PointD>();
        for (int i = 0; i < count; i++)
        {
            data.Add(new PointD
            {
                X = funX(i),
                Y = funY(i),
            });
        }
        return data;
    }
    
    ''' <summary>
    ''' Method for creating data for FlexChart
    ''' </summary>
    Public Shared Function CreateDataPoints(funX As Func(Of Double, Double), funY As Func(Of Double, Double), count As Integer) As List(Of PointD)
        Dim data As List(Of PointD) = New List(Of PointD)()
        For i As Integer = 0 To count - 1
            data.Add(New PointD() With {
                  .X = funX(i),
                  .Y = funY(i)
            })
        Next
        Return data
    End Function