Help customizing Linear Gauge - remove axis labels, add score

[Matthew]

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]

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, 

https://ej2.syncfusion.com/aspnetmvc/documentation/linear-gauge/annotations/?no-cache=1 

 

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: 

 

 

Sample link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/sample316424049 

 

 

Kindly revert us, if you have any concerns. 

 

Regards, 

Baby. 

[Matthew]

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]

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, 

 https://www.syncfusion.com/downloads/support/directtrac/general/ze/sample2083649859 

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

Regards, 

Baby. 

[LEO]

Hello,

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

[Rachel A]

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. 

 

https://www.syncfusion.com/downloads/support/directtrac/general/ze/SAMPLE~31213312392 

 

 

 

Thanks, 

Rachel.