How to add an image on Chart area
12 Jun 202310 minutes to read
By using the ChartDockControl with adding image on the dock control with position changes, you can add an image anywhere on the chart area to represent the details with pictorial format.
ChartDockControl dockControl;
ChartControl chartControl;
ChartSeries chartSeries;
...
this.chartControl = new ChartControl();
this.chartControl.Location = new System.Drawing.Point(200, 55);
this.chartControl.Palette = ChartColorPalette.GreenYellowStyle;
this.chartControl.Size = new System.Drawing.Size(452, 400);
this.chartControl.TabIndex = 2;
this.chartControl.ShowLegend = false;
this.chartControl.PrimaryXAxis.DrawMinorGrid = false;
this.chartControl.PrimaryXAxis.DrawGrid = false;
this.chartControl.PrimaryXAxis.EdgeLabelsDrawingMode = ChartAxisEdgeLabelsDrawingMode.Shift;
this.chartControl.PrimaryYAxis.DrawMinorGrid = false;
this.chartControl.PrimaryYAxis.DrawGrid = false;
this.chartControl.PrimaryYAxis.EdgeLabelsDrawingMode = ChartAxisEdgeLabelsDrawingMode.Shift;
this.chartControl.Paint += ChartControl_Paint;
PictureBox picture = new PictureBox();
picture.Image = Image.FromFile(@"..\..\peek.png");
picture.SizeMode = PictureBoxSizeMode.StretchImage;
picture.Size = new Size(38, 38);
dockControl = new ChartDockControl(picture);
dockControl.Size = new Size(38, 38);
dockControl.Position = ChartDock.Floating;
dockControl.Alignment = ChartAlignment.Center;
dockControl.Controls.Add(picture);
dockControl.BringToFront();
this.chartControl.Controls.Add(dockControl);
chartSeries = new ChartSeries();
chartSeries.Type = ChartSeriesType.Line;
chartSeries.Points.Add(new ChartPoint(2001, 12));
chartSeries.Points.Add(new ChartPoint(2002, 14));
chartSeries.Points.Add(new ChartPoint(2002, 14));
chartSeries.Points.Add(new ChartPoint(2004, 24));
chartSeries.Points.Add(new ChartPoint(2005, 40));
chartSeries.Points.Add(new ChartPoint(2005, 40));
chartSeries.Points.Add(new ChartPoint(2007, 20));
chartSeries.Points.Add(new ChartPoint(2008, 30));
this.chartControl.Series.Add(chartSeries);
this.Controls.Add(this.chartControl);
...
private void ChartControl_Paint(object sender, PaintEventArgs e)
{
var position = this.chartControl.ChartArea.GetPointByValue(this.chartControl.Series[0].Points[5]);
//Position the dock control
dockControl.Location = new Point(position.X-(dockControl.Height-20),position.Y - dockControl.Height);
}
...Private chartControl As Syncfusion.Windows.Forms.Chart.ChartControl
Private dockControl As ChartDockControl
Private pictureBox As PictureBox
Private chartSeries As ChartSeries
Private xPosition As Point
...
Private Sub InitializeComponent()
Me.ClientSize = New System.Drawing.Size(800, 450)
Me.chartControl = New ChartControl()
Me.SuspendLayout()
Me.chartControl.Location = New System.Drawing.Point(200, 55)
Me.chartControl.Palette = ChartColorPalette.GreenYellowStyle
Me.chartControl.Size = New System.Drawing.Size(452, 400)
Me.chartControl.TabIndex = 2
Me.chartControl.ShowLegend = False
Me.chartControl.PrimaryXAxis.DrawMinorGrid = False
Me.chartControl.PrimaryXAxis.DrawGrid = False
Me.chartControl.PrimaryXAxis.EdgeLabelsDrawingMode = ChartAxisEdgeLabelsDrawingMode.Shift
Me.chartControl.PrimaryYAxis.DrawMinorGrid = False
Me.chartControl.PrimaryYAxis.DrawGrid = False
Me.chartControl.PrimaryYAxis.EdgeLabelsDrawingMode = ChartAxisEdgeLabelsDrawingMode.Shift
AddHandler Me.chartControl.Paint, AddressOf Me.chartControl1_Paint
Dim img As Image = Image.FromStream(New MemoryStream(File.ReadAllBytes("peek.png")))
pictureBox = New PictureBox()
pictureBox.Image = img
pictureBox.SizeMode = PictureBoxSizeMode.StretchImage
pictureBox.Size = New Size(38, 38)
dockControl = New ChartDockControl(pictureBox)
dockControl.Size = New Size(38, 38)
dockControl.Position = ChartDock.Floating
dockControl.Alignment = ChartAlignment.Center
dockControl.Controls.Add(pictureBox)
dockControl.BringToFront()
Me.chartControl.Controls.Add(dockControl)
chartSeries = New ChartSeries()
chartSeries.Type = ChartSeriesType.Line
chartSeries.Points.Add(New ChartPoint(2001, 12))
chartSeries.Points.Add(New ChartPoint(2002, 14))
chartSeries.Points.Add(New ChartPoint(2002, 14))
chartSeries.Points.Add(New ChartPoint(2004, 24))
chartSeries.Points.Add(New ChartPoint(2005, 40))
chartSeries.Points.Add(New ChartPoint(2005, 40))
chartSeries.Points.Add(New ChartPoint(2007, 20))
chartSeries.Points.Add(New ChartPoint(2008, 30))
Me.chartControl.Series.Add(chartSeries)
Me.Controls.Add(chartControl)
Me.Name = "Form1"
Me.Text = "Form1"
Me.ResumeLayout(False)
End Sub
Private Sub chartControl1_Paint(ByVal sender As Object, ByVal e As PaintEventArgs)
xPosition = Me.chartControl.ChartArea.GetPointByValue(Me.chartControl.Series(0).Points(5))
dockControl.Location = New Point(xPosition.X - 20, xPosition.Y - dockControl.Height)
End Sub