title: How to change font colors and lower vertical align labels with gauge charts in amcharts4?
body: <p>I'm trying to add two lines to the label of an amcharts4 gauge chart with a different font per line:</p>
  
  <p><a href="https://i.stack.imgur.com/xRXwA.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/xRXwA.png" alt="enter image description here"></a></p>
  
  <p>Even though I have <code>horizontalCenter</code> set to <code>middle</code>, font is still left-aligned.</p>
  
  <pre><code>        // label
          var label = &lt;%=strKey%&gt;.radarContainer.createChild(am4core.Label);
          label.isMeasured = false;
          label.fontSize = 22;
          label.x = am4core.percent('&lt;%=ThisChart.Average%&gt;');      // label inside
          label.y = am4core.percent(100);
          label.fontFamily = "Arial";
          label.fontColr = "#ff0000";
          label.fontWeight = "900";  // "normal" | "bold" | "bolder" | "lighter" | "100" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900"
          label.horizontalCenter = "middle";
          label.verticalCenter = "bottom";
          label.text = "&lt;%=FormatNumber(ThisChart.Average,,0)%&gt;%\n&lt;%=ThisChart.ChartTitle%&gt;";
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/q3tah.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/q3tah.png" alt="![enter image description here"></a></p>
  
  <p>Secondly, it appears I'm limited to the bottom of the chart.  I can add an additional label outside of the chart ("Progress"), but wondering if I can do this as part of the label.  The documentation doesn't seem to show how to set multiple labels, nor how to change the color of this label.</p>
  
  <p>===================</p>
  
  <h1>Update</h1>
  
  <p>Since I have two axis and one label, I want to use the label text for each axis, since the font sizing and colors differ for each, rather than using the singular chart label.</p>
  
  <p>In trying to follow <a href="https://codepen.io/team/amcharts/pen/3446cd09288ee4e5901c73b3970adbfe?editors=0010" rel="nofollow noreferrer">this</a> example, I'm getting this:</p>
  
  <p><a href="https://i.stack.imgur.com/T6fX3.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/T6fX3.png" alt="enter image description here"></a></p>
  
  <p>Using this code, where <code>&lt;%=strKey%&gt;</code> is a dynamic object name:</p>
  
  <pre><code>        // axis settings
          var axis0 = &lt;%=strKey%&gt;.xAxes.push(new am4charts.ValueAxis());
          axis0.min = 0;
          axis0.max = 100;  // average
          axis0.strictMinMax = true;
          axis0.renderer.labels.template.disabled = false;  // false forouter label ticks
          axis0.renderer.ticks.template.disabled = false;
          axis0.renderer.grid.template.location = 0;
          axis0.renderer.minGridDistance = 20;
          //axis0.renderer.labels.template.fill = am4core.color("#f00");
          //axis0.renderer.grid.template.disabled = true;
  
          var labelTemplate = axis0.renderer.labels.template;
          labelTemplate.rotation = 0;
          labelTemplate.horizontalCenter = "middle";
          labelTemplate.verticalCenter = "bottom";
          labelTemplate.dy = 10; // moves it a bit down;
          labelTemplate.inside = false; // this is done to avoid settings which are not suitable when label is rotated
          labelTemplate.fill = am4core.color("#f00");
          labelTemplate.background.fill = am4core.color("#ccc");
  </code></pre>
  
  <p>I think I may have to reference <code>radarContainer</code> for this, and only want one label positioned per axis.</p>
  
  <p><strong>Update</strong></p>
  
  <p>This is obviously not what I'm looking for as I need two lines with different fonts for the label.</p>