title: Customising Microcharts
body: <p>I'm trying to achieve the chart similar to the attached screenshot. The problem is, how can I put values in each arc (70, 76) of the chart? I'm using <a href="https://github.com/aloisdeniel/Microcharts" rel="nofollow noreferrer">Microchart</a> library.</p>
  
  <p>The attached screenshot is from <a href="https://github.com/Microsoft/SmartHotel360-mobile-desktop-apps" rel="nofollow noreferrer">SmartHotel360</a> xamarin demo app. It would be really helpful if someone can help me to point in the correct direction.</p>
  
  <p><a href="https://i.stack.imgur.com/kug3W.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/kug3W.png" alt="enter image description here"></a></p>
  
  <pre><code>void PopulateChart()
  {
      var data = new[]
      {
          new Microcharts.Entry(50)
          {
              ValueLabel = "50",
              Color = SKColor.Parse("#104950")
          },
          new Microcharts.Entry(70)
          {
              ValueLabel = "70",
              Color = SKColor.Parse("#F7A4B9")
          },
          new Microcharts.Entry(90)
          {
              ValueLabel = "90",
              Color = SKColor.Parse("#0084b4")
          }
      };
  
      this.chartView.Chart = new TemperatureChart() { Entries = data };
  }
  
  using Microcharts;
  using SkiaSharp;
  using System;
  using System.Linq;
  
  namespace chart
  {
      public class TemperatureChart : Chart
      {
          public TemperatureChart()
          {
              BackgroundColor = SKColor.Parse("#F6F1E9");
          }
  
          public float CaptionMargin { get; set; } = 12;
  
          public float LineSize { get; set; } = 18;
  
          public float StartAngle { get; set; } = -180;
  
          private float AbsoluteMinimum =&gt; Entries.Select(x =&gt; x.Value).Concat(new[] { MaxValue, MinValue, InternalMinValue ?? 0 }).Min(x =&gt; Math.Abs(x));
  
          private float AbsoluteMaximum =&gt; Entries.Select(x =&gt; x.Value).Concat(new[] { MaxValue, MinValue, InternalMinValue ?? 0 }).Max(x =&gt; Math.Abs(x));
  
          private float ValueRange =&gt; AbsoluteMaximum - AbsoluteMinimum;
  
          public override void DrawContent(SKCanvas canvas, int width, int height)
          {
              var sumValue = Entries.Sum(x =&gt; Math.Abs(x.Value));
              var radius = (Math.Min(width, height) - (2 * Margin)) / 2;
              var cx = width / 2;
              var cy = Convert.ToInt32(height / 1.25);
              var lineWidth = (LineSize &lt; 0) ? (radius / ((Entries.Count() + 1) * 2)) : LineSize;
              var radiusSpace = lineWidth * 4;
  
              foreach (var entry in Entries.OrderByDescending(e =&gt; e.Value))
              {
                  DrawChart(canvas, entry, radiusSpace, cx, cy, lineWidth);
              }
  
              DrawCaption(canvas, cx, cy, radiusSpace);
          }
  
          public void DrawChart(SKCanvas canvas, Entry entry, float radius, int cx, int cy, float strokeWidth)
          {
              using (var paint = new SKPaint
              {
                  Style = SKPaintStyle.Stroke,
                  StrokeWidth = strokeWidth,
                  StrokeCap = SKStrokeCap.Round,
                  Color = entry.Color,
                  IsAntialias = true
              })
              {
                  using (SKPath path = new SKPath())
                  {
                      var sweepAngle = 180 * (Math.Abs(entry.Value) - AbsoluteMinimum) / ValueRange;
                      path.AddArc(SKRect.Create(cx - radius, cy - radius, 2 * radius, 2 * radius), StartAngle, sweepAngle);
                      canvas.DrawPath(path, paint);
                  }
              }
          }
  
          private void DrawCaption(SKCanvas canvas, int cx, int cy, float radius)
          {
              var minimum = 0;
              var medium = Math.Round(Entries.Max(e =&gt; e.Value) / 2);
              var maximum = Entries.Max(e =&gt; e.Value);
  
              canvas.DrawCaptionLabels(string.Empty, SKColor.Empty, $"{minimum}°", SKColors.Black, LabelTextSize, new SKPoint(cx - radius - LineSize - CaptionMargin, cy), SKTextAlign.Center);
              canvas.DrawCaptionLabels(string.Empty, SKColor.Empty, $"{medium}°", SKColors.Black, LabelTextSize, new SKPoint(cx, cy - radius - LineSize), SKTextAlign.Center);
              canvas.DrawCaptionLabels(string.Empty, SKColor.Empty, $"{maximum}°", SKColors.Black, LabelTextSize, new SKPoint(cx + radius + LineSize + CaptionMargin, cy), SKTextAlign.Center);
          }
      }
  }
  </code></pre>