CODEWITHSUNDEEP
javascriptjsonchartslabelamcharts
Rouven
Rouven

Reputation: 324

Creating labels in amCharts with json based config

I'm trying to figure out how to create a label in amcharts. But I try to do so with JSON-based config. Here is the tutorial:

https://www.amcharts.com/docs/v4/concepts/json-config/

I copied the first example. It works (after I've fixed two syntax errors in the example code >.<). Now I've tried to insert a label with this instructions (you have to click on "JSON" to see the JSON-based example):

https://www.amcharts.com/docs/v4/tutorials/placing-labels-anywhere-on-the-chart/

Nothing happens, except the font size of all automatically created labels was increased :( My script looks like this:

    var chart = am4core.createFromConfig({
      "children": [{
        "type": "Label",
        "text": "Hello world!",
        "fontSize": 20,
        "align": "center"
      }],
      "series": [{
        "type": "PieSeries",
        "dataFields": {
          "value": "litres",
          "category": "country"
        }
      }],
      "data": [{
        "country": "Lithuania",
        "litres": 501.9
      }, {
        "country": "Czech Republic",
        "litres": 301.9
      }],
      "legend": {}
    }, "chartdiv", am4charts.PieChart);

Upvotes: 1

Views: 504

Answers (1)

WhiteHat
WhiteHat

Reputation: 61275

using the following property appears to add the label... 

"forceCreate": true

see following working snippet... 

var chart = am4core.createFromConfig({
  "children": [{
    "type": "Label",
    "forceCreate": true,
    "text": "Hello world!",
    "fontSize": 20,
    "align": "center"
  }],
  "series": [{
    "type": "PieSeries",
    "dataFields": {
      "value": "litres",
      "category": "country"
    }
  }],
  "data": [{
    "country": "Lithuania",
    "litres": 501.9
  }, {
    "country": "Czech Republic",
    "litres": 301.9
  }],
  "legend": {}
}, "chartdiv", am4charts.PieChart);
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
<script src="//www.amcharts.com/lib/4/core.js"></script>
<script src="//www.amcharts.com/lib/4/charts.js"></script>
<div id="chartdiv"></div>

Upvotes: 1

Related Questions