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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Help customizing Linear Gauge - remove axis labels, add score

Thread ID:

Created:

Updated:

Platform:

Replies:

149607 Jul 1,2019 05:02 PM UTC Dec 3,2019 08:42 AM UTC Xamarin.Forms 5
loading
Tags: SfLinearGauge
Matthew
Asked On July 1, 2019 06:56 PM UTC

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()
       

Baby Palanidurai [Syncfusion]
Replied On 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. 


Matthew
Replied On 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.

Baby Palanidurai [Syncfusion]
Replied On 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. 



LEO
Replied On December 2, 2019 02:00 PM UTC

Hello,

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

Rachel A [Syncfusion]
Replied On 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. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon