AmCharts5 values in legend in column chart

Question

Here is code example:

https://codepen.io/DenisRoss/pen/rNpgQLv?editors=0010

 var root = am5.Root.new("chartdiv"); root.setThemes([am5themes_Animated.new(root)]); var chart = root.container.children.push(am5xy.XYChart.new(root, {layout: root.verticalLayout})); var xRenderer = am5xy.AxisRendererX.new(root, {minGridDistance: 0}); xRenderer.labels.template.setAll({}); var xAxis = chart.xAxes.push(am5xy.CategoryAxis.new(root, { categoryField: "country", renderer: xRenderer, tooltip: am5.Tooltip.new(root, {}) })); var yAxis = chart.yAxes.push(am5xy.ValueAxis.new(root, { renderer: am5xy.AxisRendererY.new(root, {}) })); var series = chart.series.push(am5xy.ColumnSeries.new(root, { xAxis: xAxis, yAxis: yAxis, valueYField: "value", categoryXField: "country", tooltip: am5.Tooltip.new(root, { labelText:"{valueY}" }) })); series.columns.template.adapters.add("fill", function(fill, target) { return chart.get("colors").getIndex(series.columns.indexOf(target)); }); series.columns.template.adapters.add("stroke", function(stroke, target) { return chart.get("colors").getIndex(series.columns.indexOf(target)); }); var data = [{ country: "A", value: 500 }, { country: "B", value: 300 }, { country: "C", value: 200 }]; xAxis.data.setAll(data); series.data.setAll(data); var legend = chart.children.push(am5.Legend.new(root, { nameField: 'categoryX', valueField: 'valueY', // WHY DOES NOT WORK? T__T centerX: am5.percent(50), x: am5.percent(50), })); legend.data.setAll(series.dataItems);

 body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; } #chartdiv { width: 100%; height: 500px; }

 <script src="https://cdn.amcharts.com/lib/5/themes/Animated.js"></script> <script src="https://cdn.amcharts.com/lib/5/xy.js"></script> <script src="https://cdn.amcharts.com/lib/5/index.js"></script> <div id="chartdiv"></div>

It is AmCharts5 column chart with legend. But there is no values of columns in legend .

Here is another code example:

https://codepen.io/DenisRoss/pen/YzYbRrz?editors=0010

 var root = am5.Root.new("chartdiv"); root.setThemes([ am5themes_Animated.new(root) ]); var chart = root.container.children.push(am5percent.PieChart.new(root, { layout: root.verticalLayout })); var series = chart.series.push(am5percent.PieSeries.new(root, { valueField: "value", categoryField: "categoty", legendValueText: "{value}" })); series.data.setAll([{ categoty: "A", value: 500 }, { categoty: "B", value: 300 }, { categoty: "C", value: 200 }]); var legend = chart.children.push(am5.Legend.new(root, { centerX: am5.percent(50), x: am5.percent(50), })); legend.data.setAll(series.dataItems); series.appear(1000, 100);

 body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; } #chartdiv { width: 100%; height: 500px; }

 <script src="https://cdn.amcharts.com/lib/5/index.js"></script> <script src="https://cdn.amcharts.com/lib/5/percent.js"></script> <script src="https://cdn.amcharts.com/lib/5/themes/Animated.js"></script> <div id="chartdiv"></div>

It is PieChart with legends with values in legend .

How can i show values in legend in column chart?

Answer 1

Try "legend.data.push(series);" It has worked at my end....