This article explains how to change the distance between the axis labels and the title in UWP chart. It has been achieved by using the LabelExtent property of axis as shown in the following code sample. [XAML] LabelExtent property usage in X-axis <syncfusion:SfChart Header="Project Cost Breakdown" > <!--Initialize the horizontal axis for SfChart--> <syncfusion:SfChart.PrimaryAxis> <syncfusion:CategoryAxis Header="Project" FontSize="14" LabelExtent="300" /> </syncfusion:SfChart.PrimaryAxis> <!--Initialize the vertical axis for SfChart--> <syncfusion:SfChart.SecondaryAxis> <syncfusion:NumericalAxis Header="Cost" FontSize="14" Maximum="30" /> </syncfusion:SfChart.SecondaryAxis> <!--Initialize the series for SfChart--> <syncfusion:BarSeries ItemsSource="{Binding Data}" Palette="Metro" XBindingPath="XValue" YBindingPath="YValue" ShowTooltip="True" > </syncfusion:BarSeries> </syncfusion:SfChart> Output[XAML]LabelExtent property usage in Y-axis <syncfusion:SfChart Header="Project Cost Breakdown" > <!--Initialize the horizontal axis for SfChart--> <syncfusion:SfChart.PrimaryAxis> <syncfusion:CategoryAxis Header="Project" FontSize="14" /> </syncfusion:SfChart.PrimaryAxis> <!--Initialize the vertical axis for SfChart--> <syncfusion:SfChart.SecondaryAxis> <syncfusion:NumericalAxis Header="Cost" FontSize="14" Maximum="30" LabelExtent="300" /> </syncfusion:SfChart.SecondaryAxis> <!--Initialize the series for SfChart--> <syncfusion:BarSeries ItemsSource="{Binding Data}" Palette="Metro" XBindingPath="XValue" YBindingPath="YValue" ShowTooltip="True" > </syncfusion:BarSeries> </syncfusion:SfChart> Output See alsoHow to bind the SQL Database in UWP ChartHow to wrap the multi-level axis label's text in WPF ChartHow to apply the custom labels in UWP LogarithmicAxisHow to get axis range in chart
This article describes how to display axis labels between the ticks. Essential EJ2 Chart allows you to position the Category axis labels between the ticks. You can use labelPlacement property of the primaryXAxis to customize the tick position. This property takes either OnTicks or BetweenTicks as values. By default, labels in category axis are placed by BetweenTicks. The following steps explains how to display axis labels between the ticks Step 1: Create the chart component with category axis. let chart: Chart = new Chart({ primaryXAxis: { valueType: "Category", }, series: [ { dataSource: categoryData, xName: "country", yName: "gold", type: "Column" } ] }); chart.appendTo("#container"); Step 2: Use the labelPlacement property to display axis labels between the ticks. let chart: Chart = new Chart({ primaryXAxis: { valueType: "Category", // label placement as between ticks labelPlacement: "BetweenTicks" } }); chart.appendTo("#container"); Output You can see the demo sample from this link
DescriptionIn WPF SfChart, the LogarithmicAxis allows the use of custom axis labels to improve data readability. You can define these custom labels by adding instances of the ChartAxisLabel class to the CustomLabels collection property, which is available in ChartAxis. Each custom label is created by specifying the LabelContent and Position properties.The following code sample demonstrates how to apply the custom labels for LogarithmicAxis. C#: LogarithmicAxis logarithmicAxis = new LogarithmicAxis (); logarithmicAxis.LogarithmicBase = 10; logarithmicAxis.Interval = 1; logarithmicAxis.Minimum = 1; logarithmicAxis.Maximum = 100000; double logarithmicBase = logarithmicAxis.LogarithmicBase; ChartAxisLabel hundred= new ChartAxisLabel(); hundred.Position = Math.Round(Math.Log(100, logarithmicBase), 3); hundred.LabelContent = "Hundred"; logarithmicAxis.CustomLabels.Add(hundred); ChartAxisLabel fiveHundred = new ChartAxisLabel(); fiveHundred.Position = Math.Round(Math.Log(500, logarithmicBase), 3); fiveHundred.LabelContent = "Five Hundred"; logarithmicAxis.CustomLabels.Add(fiveHundred); ChartAxisLabel thousand = new ChartAxisLabel(); thousand.Position = Math.Round(Math.Log(1000, logarithmicBase), 3); thousand.LabelContent = "Thousand "; logarithmicAxis.CustomLabels.Add(thousand); Chart.SecondaryAxis = logarithmicAxis; Output:ConclusionI hope you enjoyed learning about how to apply the custom labels in WPF Charts LogarithmicAxis.You can refer to our WPF Chart feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our WPF Chart example to understand how to create and manipulate data.For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion®, you can try our 30-day free trial to check out our other controls.If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
You can use ChartAxisLabelClick event to get index of the axis. This event will return axis index, label index and label text of the clicked label. void chart_ChartAxisLabelClick(object sender, ChartRegionMouseEventArgs e) { MessageBox.Show("Axis Index: " + e.Region.AxisIndex); } Other than ChartAxisLabelClick event, as an workaround you can ChartRegionClick event to get the axis index of the clicked label. Since the axis index value has been provided in Axes region, not in AxesLabel region, you cannot get axis index value when you click in axis label region. To get event notification when you click in axis label region, create a workaround sample, in which you can compare the axis line bounds with the mouse position X and Y values obtained in the ChartRegionClick event. void chart_ChartRegionClick(object sender, ChartRegionMouseEventArgs e) { var axis = this.chart.Axes; int x =e.Point.X; int y = e.Point.Y; for (int i = 0; i < axis.Count; i++) { if (x >= axis[i].Rect.X && x <= axis[i].Rect.X + axis[i].Rect.Width && y >= axis[i].Rect.Y && y <= axis[i].Rect.Y + axis[i].Rect.Height) { MessageBox.Show("Axis Index: " + i); } } } The index of x-axis is displayed as 0, and the index of y-axis is displayed as 1. The following screenshot illustrates the result when clicking y-axis labels. Sample link: axislabel-click
The decimal values displayed in the axis labels can be rounded by using the RoundingPlaces property of the axis. The following code example illustrates this CSHTML @(Html.EJ().Chart("container") .PrimaryXAxis(axis => axis.RoundingPlaces(3)) .Series(ser => { . . . . . . . . . . . . . . }) ) The following screenshot displays the Chart with labels rounded to 3 digits in primary X-axis. ConclusionI hope you enjoyed learning about how to round the decimal values in Chart axis.You can refer to our ASP.NET MVC Chart feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our ASP.NET MVC Chart example to understand how to create and manipulate data.For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
Essential Chart supports to hide the axis labels by setting transparent color to the labels by using the Font property of the axis. The Font property also supports customizing font family, font weight, font size, and opacity of axis labels. The following code example illustrates this. ASP <ej:Chart ID="container" runat="server"> <PrimaryXAxis> <Font Color="transparent"></Font> </PrimaryXAxis> </ej:Chart> The above code example displays the Chart without labels in the primary X-axis similar to the following screenshot
Essential Chart supports placing the labels in the X-axis between the ticks or on the ticks by using the LabelPlacement property of the axis. This property takes either onTicks or betweenTicks as values. By default, labels in categorical axis are placed between the ticks and labels in the numerical axis are placed near the ticks. Refer to the Axis for more information on the types of axes supported by the Essential Chart. Only category axis supports placing labels between ticks and other types of axes places labels near the ticks. ASP <ej:Chart ID="container" runat="server"> <PrimaryXAxis LabelPlacement="betweenTicks"></PrimaryXAxis> . . . . . . . . . . . . </ej:Chart> The following screenshot displays the axis labels between the ticks. Conclusion I hope you enjoyed learning about how to display axis labels between the ticks in .NET WebForms Chart.You can refer to our .NET WebForms Chart feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our example to understand how to create and manipulate data.For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
format labels in date time axis in .NET WebForms ChartsEssential Chart supports formatting labels in an axis using LabelFormat property of axis. This property takes a format string as value based on the value type of axis. You can display the date values in the date time axis in date, month, year, time, date/month/year, etc., formats using LabelFormat property. By default, Chart automatically formats the axis labels smartly, based on the calculated minimum and maximum values of data points. You can also specify the desired format to the labels using LabelFormat property. The following code example illustrates this. ASP <ej:Chart ID="container" CanResize="true" runat="server"> <PrimaryXAxis LabelFormat="MMM dd, yyyy"></PrimaryXAxis> . . . . . . . . . . . . . . . . . . . . </ej:Chart> The following screenshot displays the Chart with primary X axis in “MMM dd, yyyy” format. Figure SEQ Figure \* ARABIC 1: Chart with primary X axis in “MMM dd, yyyy” format Date Time formats The following table illustrates the various date time formats for axis labels. Label Format Value Example Date Result Description M 01/01/2015 January 1 Displays the name of the month and numeric date. MM 01/01/2015 01 Displays the month in two digits from 01 to 12. MMM 01/01/2015 Jan Displays three letters of the month name. MMMM 01/01/2015 January Displays the name of the month. dd 01/01/2015 01 Displays the day of the month from 01 to 31. ddd 01/01/2015 Thu Displays the first three letters of the day. dddd 01/01/2015 Thursday Displays the name of the day. yy 01/01/2015 15 Displays the last two digits of the year. yyyy 01/01/2015 2015 Displays the four digits of year. t 01/01/2015 12:00 AM Displays the short time. (hour and minutes) tt 01/01/2015 AM Displays AM or PM. T 01/01/2015 12:00:00 AM Displays long time. (hour, minutes and seconds) hh 01/01/2015 12 Displays the hour of the day in 12-hour format. mm 01/01/2015 00 Displays the minute from 00 to 59. ss 01/01/2015 00 Displays the seconds from 00 to 59. gg 01/01/2015 A.D. Displays the period or era. zzz 01/01/2015 +05:30 Displays the difference between UTC and current time zone. f 01/01/2015 Thursday, January 01, 2015 12:00 AM Displays the long date and short time. F 01/01/2015 Thursday, January 01, 2015 12:00:00 AM Displays the long date and long time. Conclusion I hope you enjoyed learning about how to format labels in date time axis in .NET WebForms Charts.You can refer to our .NET WebForms Charts feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our example to understand how to create and manipulate data.For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
Essential Chart supports formatting labels in an axis using labelFormat property of axis. This property takes a format string as value based on the value type of axis. You can display the date values in the date time axis in date, month, year, time, date/month/year, etc., formats using labelFormat property. By default, Chart automatically formats the axis labels smartly, based on the calculated minimum and maximum values of data points. You can also specify the desired format to the labels using labelFormat property. The following code example illustrates this. JS $("#container").ejChart({ primaryXAxis: { labelFormat: 'MMM dd, yyyy' }, series: [{ points: [{ x: new Date("1 /1/2014"), y: 35 }, { x: new Date("2/1/2014"), y: 25 }, { x: new Date("3/1/2014"), y: 34 }, { x: new Date("4/1/2014"), y: 65 }, { x: new Date("5/1/2014"), y: 73 }, { x: new Date("6/1/2014"), y: 37 } ], name: 'series' }] }); The following screenshot displays the Chart with primary X axis in “MMM dd, yyyy” format. Figure SEQ Figure \* ARABIC 1: Chart with primary X axis in “MMM dd, yyyy” format JS Playground sample link: Datetime Labels Formatting Date Time formats The following table illustrates the various date time formats for axis labels. Label Format Value Example Date Result Description M 01/01/2015 January 1 Displays the name of the month and numeric date. MM 01/01/2015 01 Displays the month in two digits from 01 to 12. MMM 01/01/2015 Jan Displays three letters of the month name. MMMM 01/01/2015 January Displays the name of the month. dd 01/01/2015 01 Displays the day of the month from 01 to 31. ddd 01/01/2015 Thu Displays the first three letters of the day. dddd 01/01/2015 Thursday Displays the name of the day. yy 01/01/2015 15 Displays the last two digits of the year. yyyy 01/01/2015 2015 Displays the four digits of year. t 01/01/2015 12:00 AM Displays the short time. (hour and minutes) tt 01/01/2015 AM Displays AM or PM. T 01/01/2015 12:00:00 AM Displays long time. (hour, minutes and seconds) hh 01/01/2015 12 Displays the hour of the day in 12-hour format. mm 01/01/2015 00 Displays the minute from 00 to 59. ss 01/01/2015 00 Displays the seconds from 00 to 59. gg 01/01/2015 A.D. Displays the period or era. zzz 01/01/2015 +05:30 Displays the difference between UTC and current time zone. f 01/01/2015 Thursday, January 01, 2015 12:00 AM Displays the long date and short time. F 01/01/2015 Thursday, January 01, 2015 12:00:00 AM Displays the long date and long time. ConclusionI hope you enjoyed learning how JS Charts supports formatting labels in an axis.You can refer to our JavaScript Chart feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our JavaScript Chart example to understand how to create and manipulate data.For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
Essential Chart supports placing the labels in the X-axis between the ticks or on the ticks by using the LabelPlacement property of the axis. This property takes either onTicks or betweenTicks as values. By default, labels in categorical axis are placed between the ticks and labels in the numerical axis are placed near the ticks. Refer to the Axis for more information on the types of axes supported by the Essential Chart. Only category axis supports placing labels between ticks and other types of axes places labels near the ticks. JS <div id="container"></div> <script type="text/javascript"> $(function () { $("#container").ejChart({ primaryXAxis: { labelPlacement: 'betweenTicks' }, . . . }); }); </script> The following screenshot displays the axis labels between the ticks. Figure: Chart with labels placed between the ticks JS Playground sample link: Label PlacementConclusion I hope you enjoyed learning about how to display axis labels between the ticks in JavaScript Chart.You can refer to our JavaScript Chart feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our example to understand how to create and manipulate data.For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
The decimal values displayed in axis labels can be rounded by using the RoundingPlaces property of axis. The following code example illustrates this. ASP <ej:Chart ID="container" OnClientTrackAxisToolTip="crosshairLabel" runat="server"> <PrimaryXAxis RoundingPlaces="3"></PrimaryXAxis> . . . . . . . . . . . . . . . . </ej:Chart> The following screenshot displays the Chart with labels rounded to 3 digits in primary X- axis. Note:A new version of Essential Studio for ASP.NET is available. Versions prior to the release of Essential Studio 2014, Volume 2 will now be referred to as a classic versions.The new ASP.NET suite is powered by Essential Studio for JavaScript providing client-side rendering of HTML 5-JavaScript controls, offering better performance, and better support for touch interactivity. The new version includes all the features of the old version, so migration is easy.The Classic controls can be used in existing projects; however, if you are starting a new project, we recommend using the latest version of Essential Studio for ASP.NET. Although Syncfusion will continue to support all Classic Versions, we are happy to assist you in migrating to the newest edition.For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls. If you have any queries or require clarifications, please let us know in the comments section below.You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
jQuery Essential Chart supports to hide the axis labels by setting transparent color to the labels by using the font property of the axis. The font property also supports customizing font family, font weight, font size, and opacity of axis labels. The following code example illustrates this. JS $("#container").ejChart({ primaryXAxis: { font: { color:"transparent" } } }); The above code example displays the Chart without labels in the primary X-axis similar to the following screenshot. Figure: Chart with hidden labels in primary X axis JS Playground sample link: Labels hiding Conclusion I hope you enjoyed learning about how to hide the axis labels in the Chart. You can refer to our jQuerry ejCharts’s feature tour page to know about its other groundbreaking feature representations. You can also explore our jQuery ejCharts example to understand how to present and manipulate data. For current customers, you can check out our WinForms components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our WinForms Diagram and other WinForms components. If you have any queries or require clarifications, please let us know in comments below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
The decimal values displayed in axis labels can be rounded by using the roundingPlaces property of axis. The following JavaScript Chart code example illustrates this JS $("#container").ejChart({ primaryXAxis: { roundingPlaces: 3 }, series: [{ points: [{ x: 2.25345, y: 26 }, { x: 2.2567, y: 56 }, . . . . . . . . . . . . . . . . . . ] }] }); The following screenshot displays the Chart with labels rounded to 3 digits in primary X-axis. Figure: Chart with X-axis labels rounded to 3 digits JS Playground sample link: Rounding labelsConclusionI hope you enjoyed learning about how to round the decimal values in Chart axis.You can refer to our JavaScript Chart feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our JavaScript Chart example to understand how to create and manipulate data.For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
Description:WPF Chart (SfChart) allows you to customize axis labels to a particular format like controlling the decimal digits, date-time format, etc. This section describes how to format the axis labels.Solution:For instance, when the axis label needs to display the time value and two decimal points, you can set the LabelFormat property in the corresponding axis in WPF Chart (SfChart). XAML <syncfusion:SfChart.PrimaryAxis> <syncfusion:DateTimeAxis LabelFormat="hh:mm tt" IntervalType="Hours" Interval="1" Header="Computer sales" /> </syncfusion:SfChart.PrimaryAxis> <syncfusion:SfChart.SecondaryAxis> <syncfusion:NumericalAxis Header="Quantity Sold" LabelFormat="##.00"/> </syncfusion:SfChart.SecondaryAxis> C# this.sampleChart.PrimaryAxis.LabelFormat = hh:mm tt "; this.sampleChart.SecondaryAxis.LabelFormat = "##.00"; Output ConclusionI hope you enjoyed learning about how to display axis labels in a particular format of WPF Chart.You can refer to our WPF Chart feature tour page to know about its other groundbreaking feature representations. You can also explore our WPF Chart documentation to understand how to create and manipulate data.For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion®, you can try our 30-day free trial to check out our other controls.If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
You can define custom axis ticker label in WPF Chart (SfChart) by the following two ways: 1. You can define the ticker label by using the LabelsSource, ContentPath, and PositionPath properties of a chart axis. In the following sample, DataValues is the observablecollection, which contains the label content and position values of chart axes. The LabelsSource property binds the collection of DataValues. The ContentPath property is to specify the collection, and the PositionPath property defines the position of the chart axis. XAML <!—Custom x-axis ticker labels --> <Syncfusion:SfChart.PrimaryAxis> <Syncfusion:CategoryAxis FontSize="12" LabelsSource="{Binding DataValues}" ContentPath="ContentX" PositionPath="PositionX"> </Syncfusion:CategoryAxis> </Syncfusion:SfChart.PrimaryAxis> <!—Custom y-axis ticker labels --> <Syncfusion:SfChart.SecondaryAxis> <Syncfusion:NumericalAxis FontSize="12" LabelsSource="{Binding DataValues}" ContentPath=" ContentY" PositionPath=" PositionY"> </Syncfusion:NumericalAxis> </Syncfusion:SfChart.SecondaryAxis> 2. Using chart axis CustomLabels, we can define the ticker label of custom x-axis and y-axis as shown in the following code. XAML <!—Custom x-axis ticker labels --> <Syncfusion:SfChart.PrimaryAxis> <Syncfusion:CategoryAxis FontSize="12" > <Syncfusion:CategoryAxis.CustomLabels> <Syncfusion:ChartAxisLabel LabelContent="Sonata" Position="0" /> <Syncfusion:ChartAxisLabel LabelContent="Titan" Position="1" /> <Syncfusion:ChartAxisLabel LabelContent="Fastrack" Position="2" /> <Syncfusion:ChartAxisLabel LabelContent="Timex" Position="3" /> <Syncfusion:ChartAxisLabel LabelContent="Rolex" Position="4" /> <Syncfusion:ChartAxisLabel LabelContent="Omega" Position="5" /> <Syncfusion:ChartAxisLabel LabelContent="Maruti" Position="6" /> </Syncfusion:CategoryAxis.CustomLabels> </Syncfusion:CategoryAxis> </Syncfusion:SfChart.PrimaryAxis> <!—Custom y-axis ticker labels --> <Syncfusion:SfChart.SecondaryAxis> <Syncfusion:NumericalAxis FontSize="12" > <Syncfusion:NumericalAxis.CustomLabels> <Syncfusion:ChartAxisLabel Position="0" LabelContent="Item 0"/> <Syncfusion:ChartAxisLabel Position="500" LabelContent="Item 1"/> <Syncfusion:ChartAxisLabel Position="1000" LabelContent="Item 2"/> <Syncfusion:ChartAxisLabel Position="1500" LabelContent="Item 3"/> <Syncfusion:ChartAxisLabel Position="2000" LabelContent="Item 4"/> <Syncfusion:ChartAxisLabel Position="2500" LabelContent="Item 5"/> </Syncfusion:NumericalAxis.CustomLabels> </Syncfusion:NumericalAxis> </Syncfusion:SfChart.SecondaryAxis> Output ConclusionI hope you enjoyed learning how to define ticker labels of custom axis in WPF Chart.You can refer to our WPF Chart feature tour page know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our WPF Chart Examples to understand how to create and manipulate data.For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion®, you can try our 30-day free trial to check out our other controls.If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
