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. Image for the cookie policy date
  1. Home
  2. Forum
  3. Xamarin.Forms
  4. Help customizing Linear Gauge - remove axis labels, add score

Help customizing Linear Gauge - remove axis labels, add score

I am trying to add some customizations to the Linear Gauge control for MVC and am having some difficulty.

1. Remove the axis range numbers from below the chart.

2. Place the score (or progress) inside the bar.

I have a mockup image of what we need - attached in a zip as well as at the following link (https://i.imgur.com/R9pFraj.png). If a Linear Gauge is not the correct control, please advise. I think it's pretty close I just have these two issues.

Many thanks in advance,
Matthew

Attachment: bar_2b1d703f.zip


EDIT: This is the closest I have been able to get to what we need...

            @Html.EJS().LinearGauge("container2_41").Width("80%").Load("onGaugeLoad").Container(new Syncfusion.EJ2.LinearGauge.LinearGaugeContainer
       {
           Width = 30,
           BackgroundColor = "#E1FFF1",
           Border = new Syncfusion.EJ2.LinearGauge.LinearGaugeBorder { Width = 1},
           Offset = -20
       }).Orientation(Syncfusion.EJ2.LinearGauge.Orientation.Horizontal).Axes(new List {
                new Syncfusion.EJ2.LinearGauge.LinearGaugeAxis
                {
                    Line = new Syncfusion.EJ2.LinearGauge.LinearGaugeLine { Offset = 30, Color = "#FFFFFF00" },
                    LabelStyle = new Syncfusion.EJ2.LinearGauge.LinearGaugeLabel { Offset = 50, Format = "{value}" },
                    MajorTicks = new Syncfusion.EJ2.LinearGauge.LinearGaugeTick { Interval = 65, Height = 10, Color="#FFFFFF00", Width = -100 },
                    MinorTicks = new Syncfusion.EJ2.LinearGauge.LinearGaugeTick { Interval = 0, Height = 10, Color="#FFFFFF00" },
                    Maximum = 100,

                    Ranges = new List
                    {
                        new Syncfusion.EJ2.LinearGauge.LinearGaugeRange
                        {
                            Start = 0.00001, End = 65, Color = "#1976D2", StartWidth = 30, EndWidth = 30
                        },
                    },

                    Pointers = new List
                    {
                        new Syncfusion.EJ2.LinearGauge.LinearGaugePointer
                        {
                            Value = 45, Height=15,Width=3,Placement = Syncfusion.EJ2.LinearGauge.Placement.Near,
                            Offset = -50,MarkerType = Syncfusion.EJ2.LinearGauge.MarkerType.Triangle, Color="#000000"
                        },
                    },

                }
            }).Render()
       

5 Replies
BP Baby Palanidurai Syncfusion Team July 2, 2019 01:06 PM UTC

Hi Matthew, 
 
Greetings from Syncfusion. 
 
We have analyzed your query. Based on your requirement, we have prepared a sample. To place the score inside the bar, you can use annotations to place the text inside the bar.  
 
For more information about annotations, kindly find the below documentation link, 
 
Code snippet: 
 
  @Html.EJS().LinearGauge("container2_41").Width("80%").Container(new Syncfusion.EJ2.LinearGauge.LinearGaugeContainer 
   { 
   }).Orientation(Syncfusion.EJ2.LinearGauge.Orientation.Horizontal).Axes(new List<LinearGaugeAxis> { 
                new Syncfusion.EJ2.LinearGauge.LinearGaugeAxis 
                { 
                    LabelStyle = new Syncfusion.EJ2.LinearGauge.LinearGaugeLabel { Offset = 50,Font=new { size= "0px"}, Format = "{value}" }, 
                   // Other customization 
                } 
            }).Annotations(new List<LinearGaugeAnnotation> 
            { 
                new LinearGaugeAnnotation 
                { 
                    Content="#template", 
                    ZIndex = "1", 
                    AxisValue = 35, 
                    Y = -10 
                } 
            }).Render() 
 
 
Screenshot: 
 
 
 
 
Kindly revert us, if you have any concerns. 
 
Regards, 
Baby. 


MA Matthew July 3, 2019 07:16 PM UTC

This is very helpful. Thank you.

But I do need to point out this is the second question I have asked where a zipped project was provided. I was completely unable to get either of these projects to build or run. I wasted a good hour or two trying to get this project to work. There were issues with the Nuget packages as well as references to System.Net.Http. I would suggest you try to run these on a fresh system so you can see the errors I am referring to.

BP Baby Palanidurai Syncfusion Team July 4, 2019 06:22 PM UTC

Hi Matthew, 

Sorry for the inconvenience caused. 

In our previous sample, we have just provided the sample without some packages. Now we have created a new project and attached the runnable sample for your reference. You can install nuget and make runnable the below sample link, 

Kindly revert us, if you need any further assistance on this. We are always happy in assisting you. 

Regards, 
Baby. 



LE LEO December 2, 2019 02:00 PM UTC

Hello,

Can you help me achieve this same layout using the linear gauge control for Xamarin Forms ?

RA Rachel A Syncfusion Team December 3, 2019 08:42 AM UTC

Hi LEO, 
 
Greetings from Syncfusion. 
 
We have prepared the sample to achieve the same output in Xamarin Forms SfGauge and the sample you can download from the below link. 
 
 
 
 
Thanks, 
Rachel. 


Loader.
Up arrow icon