Multiple ChartAreas, how do align them and how to set the width of them?


  • I have 50 states with a pie chart for each one in a chartarea, so I have 50 ChartAreas but they are rendering 7 on each row, I want it to only show 2 or 3 per row, how can I set that? Or how can I set the width and height of the chartarea?
    Tuesday, September 07, 2010 6:02 PM


  • In this thread:

    ..After the third chart area, chart will automatically arrange all chart areas in 2 (or more) columns. You can override this behavior by providing custom ChartArea.Position

    So you'll have to position each chart area to where you want it on the chart. ChartArea.Position is of type ElementPosition which also defines the relative width and height of the chart area (the position x and y values are also relative to the chart size.)

    Try this example:

    Imports System.Windows.Forms.DataVisualization.Charting
    Public Class Form1
    	Private Sub ExampleForm_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
    		'Add a chart to the form in the designer
    		'Init chart
    		Dim series As Series
    		Dim area As ChartArea
    		Dim legend As Legend
    		Dim numberOfAreas As Integer = 50
    		Dim numberOfColumns As Integer = 3
    		Dim numberOfRows As Integer = CInt(Math.Ceiling(numberOfAreas / numberOfColumns))
    		Dim rowHeight As Integer = 100
    		Dim columnWidth As Integer = 300
    		Chart1.Height = CInt(rowHeight * numberOfRows)
    		Chart1.Width = CInt(columnWidth * numberOfColumns)
    		'ChartArea dimensions
    		Dim posX, posY, width, height As Single	'These are all percentages of the whole chart
    		'ChartArea Width & height
    		width = CSng(100 / (numberOfColumns * 2))
    		height = CSng(100 / numberOfRows)
    		For i As Integer = 0 To numberOfAreas - 1
    			'ChartArea Position X & Y
    			posX = CSng((i Mod numberOfColumns) * (100 / numberOfColumns))
    			posY = CSng(Math.Floor(i / numberOfColumns) * (100 / numberOfRows))
    			'Create a chartarea
    			area = New ChartArea("AREA" & i)
    			area.Position = New ElementPosition(posX, posY, width, height)
    			'Create legend
    			legend = New Legend("LEGEND" & i)
    			legend.DockedToChartArea = area.Name
    			legend.IsDockedInsideChartArea = False
    			legend.Alignment = StringAlignment.Center
    			'Create a series
    			series = New Series("SERIES" & i)
    			series.ChartType = SeriesChartType.Pie
    			series.ChartArea = area.Name
    			series.Legend = legend.Name
    			series.Label = (i + 1).ToString
    			series.LegendText = String.Format("X={0:0.#} Y={1:0.#} W={2:0.#} H={3:0.#}", posX, posY, width, height)
    			'Add data to series
    			series.Points.AddXY(1, 50)
    			series.Points.AddXY(2, 25)
    			series.Points.AddXY(3, 70)
    			series.Points.AddXY(4, 20)
    	End Sub
    End Class
    Friday, September 10, 2010 9:48 AM