CODEWITHSUNDEEP
javascriptamchartsamcharts4
ElHaix
ElHaix

Reputation: 12996

How to change font colors and lower vertical align labels with gauge charts in amcharts4?

I'm trying to add two lines to the label of an amcharts4 gauge chart with a different font per line:

enter image description here

Even though I have horizontalCenter set to middle, font is still left-aligned.

        // label
        var label = <%=strKey%>.radarContainer.createChild(am4core.Label);
        label.isMeasured = false;
        label.fontSize = 22;
        label.x = am4core.percent('<%=ThisChart.Average%>');      // 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 = "<%=FormatNumber(ThisChart.Average,,0)%>%\n<%=ThisChart.ChartTitle%>";

![enter image description here

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.

===================

Update

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.

In trying to follow this example, I'm getting this:

enter image description here

Using this code, where <%=strKey%> is a dynamic object name:

        // axis settings
        var axis0 = <%=strKey%>.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");

I think I may have to reference radarContainer for this, and only want one label positioned per axis.

Update

This is obviously not what I'm looking for as I need two lines with different fonts for the label.

Upvotes: 4

Views: 1857

Answers (1)

Samuel Philipp
Samuel Philipp

Reputation: 11040

You can use label.textAlign to set the alignment to center and label.fill to set the text color:

label.textAlign = "middle";
label.fill = am4core.color('red');

Here is a code pen showing the result.

Alternatively you can use two labels to also use different colors and font sizes. Here is another code pen showing that behaviour.

To position your label you can use the following properties:

Upvotes: 2

Related Questions