We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
Hi Andy,
Thanks for using Syncfusion products.
We have analyzed requirement provided by you, and we suggest you to use “DateTimeFormat” property of chart control for changing the format of the axis labels in chart using “VisibleRangeChanged” event of chart control.
Please refer the following code snippet to achieve this:
<code>
[CS]
//adding VisibleRangeEvent in chartControl
this.chartControl1.VisibleRangeChanged += new EventHandler(this.chartControl1_VisibleRangeChanged);
private void chartControl1_VisibleRangeChanged(object sender, EventArgs e)
{
//change the labelformat after zooming
this.chartControl1.PrimaryXAxis.DateTimeFormat = "MM/dd";
}
</code>
Please let us know if you have any concern.
Regards,
Rekha.
Hi Andy,
Thanks for your patience.
Query 1: Is there any part of VisibleRangeChanged that tells you what the zoom level is
We can use “ZoomFactorX” property of chart control to find the chart is zoomed or not but we couldn’t find the exact zoom level of chart.
Please refer the code snippet to achieve this.
<code>
[CS]
if (chart.ZoomFactorX ==1)
{
chart.Series[0].Style.DisplayText = false;
}
</code>
Query 2: I'd like to be able to determine if they are all the way zoomed out and hide the labels.
We can use “ZoomFactorX” property of chart to check whether the chart is zoomed or not. The value of “ZoomFactorX” property of chart is less than one means, the chart is in zoomed state. We suggest you to set “DisplayText” property of Chart series to “false” for hide the datapoint labels.
Please refer the code snippet to achieve this.
<code>
[CS]
//disable the datapoint labels while zoom out
if (chart.ZoomFactorX ==1)
{
//hide the datapoint labels
chart.Series[0].Style.DisplayText = false;
//set the format of PrimaryXAxis labels
chart.PrimaryXAxis.DateTimeFormat = "MM/yyyy";
}
</code>
Query 3: I want to show the whole MM/DD/YYYY format, or somewhere in the middle.
We can customize format of axis labels by using “DateTimeFormat” property of Chart axis and also we can customize datapoint labels by using “Text” property of Chart Series.
Please refer the code snippet to achieve this.
<code>
[CS]
//create event for perform zooming operation
chart.VisibleRangeChanged += new EventHandler(chart_VisibleRangeChanged);
private void chart_VisibleRangeChanged(object sender, EventArgs e)
{
//Maximum value of x axis while zooming
var x1 = chart.PrimaryXAxis.VisibleRange.Max;
//Mimimum value of x axis while zooming
var y1 = chart.PrimaryXAxis.VisibleRange.Min;
//convert double value to DateTime value
DateTime dt = DateTime.FromOADate(x1);
DateTime dt1 = DateTime.FromOADate(y1);
//Subtract the start date with end date in range
TimeSpan span = dt.Subtract(dt1);
//used to find the days
var day = span.Days;
if (day <= 15)
{
chart.PrimaryXAxis.DateTimeFormat = "dd/MMM/yyyy";
chart.PrimaryXAxis.DateTimeInterval.Type = ChartDateTimeIntervalType.Days;
chart.Series[0].Style.DisplayText = true;
}
else if (day <= 60)
{
chart.PrimaryXAxis.DateTimeFormat = "dd/MMM";
chart.PrimaryXAxis.DateTimeInterval.Type = ChartDateTimeIntervalType.Weeks;
chart.Series[0].Style.DisplayText = true;
}
else if (day <= 180)
{
chart.PrimaryXAxis.DateTimeFormat = "MMM";
chart.PrimaryXAxis.DateTimeInterval.Type = ChartDateTimeIntervalType.Months;
chart.Series[0].Style.DisplayText = true;
}
else if (day > 180)
{
chart.PrimaryXAxis.DateTimeFormat = "MMM/yyyy";
chart.PrimaryXAxis.DateTimeInterval.Type = ChartDateTimeIntervalType.Months;
chart.Series[0].Style.DisplayText = true;
}
//disable the datapoint labels while zoom out
if (chart.ZoomFactorX ==1)
{
chart.Series[0].Style.DisplayText = false;
chart.PrimaryXAxis.DateTimeFormat = "MM/yyyy";
}
//Customize format of datapoint labels
for (var i = 0; i < series.Points.Count; i++)
{
chart.Series[0].Styles[i].Text = "XValue:"+series.Points[i].DateX.ToString(chart.PrimaryXAxis.DateTimeFormat)+ +"\n"+"YValue:"+series.Points[i].YValues[0].ToString();
chart.Series[0].Styles[i].TextOrientation = ChartTextOrientation.RegionUp;
}
}
</code>
We have created a simple sample and it can be downloaded in the following link.
http://www.syncfusion.com/downloads/support/directtrac/general/visiblerangechange-56556502.zip
Please refer the online documentation link for more information about VisibleRangeChanged event for zooming:
http://help.syncfusion.com/ug/windows%20forms/chart/default.htm#!Documents/visiblerangechangede.htm
Please refer the online documentation link for more information about “DateTimeFormat” property of Chart Axis:
http://help.syncfusion.com/ug/windows%20forms/chart/Documents/axislabeltextformatt.htm
Please refer the online documentation link for more information about customize the text of datapoint labels:
http://help.syncfusion.com/ug/windows%20forms/chart/Documents/textstyle.htm
Please let us know if you have any concern.
Regards,
Rekha.
