Description This article describes how to add a logarithmic axis in Flutter radial gauge. Solution You can create a logarithmic axis in radial gauge widget by extending a custom axis renderer class from radial axis renderer class. Step 1: Create a custom axis renderer class by extending it from radial axis renderer. class _CustomAxisRenderer extends RadialAxisRenderer { _CustomAxisRenderer() : super(); } Step 2: Change the text value of the labels to required logarithmic visible labels by overriding the generateVisibleLabels method. @override List<CircularAxisLabel> generateVisibleLabels() { final List<CircularAxisLabel> _visibleLabels = <CircularAxisLabel>[]; num _minimum = _logBase(minimum, 10); num _maximum = _logBase(maximum, 10); for (num i = _minimum; i <= _maximum; i++) { final int _value = math.pow(10, i).floor(); // logBase value is 10 final CircularAxisLabel label = CircularAxisLabel( axisLabelStyle, _value.toInt().toString(), i, false); label.value = _value; _visibleLabels.add(label); } _labelsCount = _visibleLabels.length; return _visibleLabels; } // To convert the log value into linear value num _logBase(num value, num base) => math.log(value) / math.log(base); Step 3: To find the factor values based on the respective logarithmic value, override the valueToFactor method of custom axis renderer and implement the logics for converting the values. @override double valueToFactor(double value) { double _number = _logBase(value, 10) / (_labelsCount - 1); return _number; } Step 4: Create the radial gauge and add the custom axis with desired range. @override Widget build(BuildContext context) { return Scaffold( backgroundColor: Colors.white, body: Center( child: SfRadialGauge( axes: <RadialAxis>[ CustomAxis( minimum: 1, maximum: 10000, ) ], ), ), ); } Step 5: Return the custom axis renderer in the onCreateAxisRenderer event of radial axis. @override Widget build(BuildContext context) { return Scaffold( backgroundColor: Colors.white, body: Center( child: SfRadialGauge( axes: <RadialAxis>[ CustomAxis( minimum: 1, maximum: 10000, onCreateAxisRenderer: () { final _CustomAxisRenderer renderer = _CustomAxisRenderer(); return renderer; }, ) ], ), ), ); } Step 6: Include the needle pointer to annotate the desired value. pointers: <GaugePointer>[NeedlePointer(value: 1000)] Output View the Github Sample here.
You can apply the custom labels for LogarithmicAxis by adding the ChartAxisLabel class with the LabelContent and Position properties to the CustomLabels collection property, which is available in ChartAxis. 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 UWP Chart LogarithmicAxis.You can refer to our UWP 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 UWP 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!
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!
