How to use the @amcharts/amcharts4/charts.Legend function in @amcharts/amcharts4

To help you get started, we’ve selected a few @amcharts/amcharts4 examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github amcharts / amcharts4 / dist / es2015 / examples / simple-pie-chart-rounded-corners / index.ts View on Github external
chart.innerRadius = amcharts4.percent(50);

let series = chart.series.push(new charts.PieSeries());
series.dataFields.value = "value";
series.dataFields.category = "country";

series.slices.template.cornerRadius = 10;
series.slices.template.innerCornerRadius = 7;

// this creates initial animation
series.hiddenState.properties.opacity = 1;
series.hiddenState.properties.endAngle = -90;
series.hiddenState.properties.startAngle = -90;

chart.legend = new charts.Legend();
github GetTerminus / terminus-ui / demo / app / components / chart / chart.component.ts View on Github external
const pieSeries = chart.series.push(new am4charts.PieSeries() as any);
      pieSeries.dataFields.value = 'litres';
      pieSeries.dataFields.category = 'country';

      // Let's cut a hole in our Pie chart the size of 40% the radius
      chart.innerRadius = am4core.percent(40) as any;

      // Disable ticks and labels
      pieSeries.labels.template.disabled = true;
      pieSeries.ticks.template.disabled = true;

      // Disable tooltips
      pieSeries.slices.template.tooltipText = '';

      // Add a legend
      chart.legend = new am4charts.Legend() as any;
    }

    /**
     * RADAR
     */
    if (tsChartRadarTypeCheck(chart)) {
      chart.data = [
        {
          category: 'One',
          value1: 8,
          value2: 2,
          value3: 4,
          value4: 3,
        },
        {
          category: 'Two',
github amcharts / amcharts4 / dist / es2015 / examples / typescript / force-directed-tree-expandable / index.ts View on Github external
import * as am4core from "@amcharts/amcharts4/core";
import * as am4charts from "@amcharts/amcharts4/charts";
import am4themes_animated from "@amcharts/amcharts4/themes/animated";
import * as am4plugins_forceDirected from "@amcharts/amcharts4/plugins/forceDirected";


am4core.useTheme(am4themes_animated);

let chart = am4core.create("chartdiv", am4plugins_forceDirected.ForceDirectedTree);
chart.legend = new am4charts.Legend();

let networkSeries = chart.series.push(new am4plugins_forceDirected.ForceDirectedSeries())

networkSeries.data = [{
  name: 'Flora',
  children: [{
    name: 'Black Tea', value: 1
  }, {
    name: 'Floral',
    children: [{
      name: 'Chamomile', value: 1
    }, {
      name: 'Rose', value: 1
    }, {
      name: 'Jasmine', value: 1
    }]
github amcharts / amcharts4 / dist / es2015 / examples / es2015 / multiple-axes-date-based-chart / index.js View on Github external
series2.dataFields.dateX = "date";
series2.dataFields.valueY = "quantity";
series2.yAxis = valueAxis2;
series2.tooltipText = "{valueY.value}";
series2.name = "Series 2";
series2.sequencedInterpolation = true;
series2.defaultState.transitionDuration = 3000;

chart.cursor = new am4charts.XYCursor();
chart.cursor.xAxis = dateAxis;

let scrollbarX = new am4charts.XYChartScrollbar();
scrollbarX.series.push(series);
chart.scrollbarX = scrollbarX;

chart.legend = new am4charts.Legend();
chart.legend.parent = chart.plotContainer;
chart.legend.zIndex = 100;
chart.legend.valueLabels.template.text = "{valueY.value.formatNumber('$#.')}";
github amcharts / amcharts4 / dist / es2015 / examples / javascript / stacked-area-radar-chart / index.js View on Github external
let bulletValueLabel = bullet.createChild(am4core.Label);
bulletValueLabel.text = "{valueY.total.formatNumber('$#.0')}";
bulletValueLabel.verticalCenter = "middle";
bulletValueLabel.horizontalCenter = "right";
bulletValueLabel.dy = -3;

let label = bullet.createChild(am4core.Label);
label.text = "{categoryX}";
label.verticalCenter = "middle";
label.paddingLeft = 20;

valueAxis.calculateTotals = true;


chart.legend = new am4charts.Legend();
chart.legend.parent = chart.radarContainer;
chart.legend.width = 110;
chart.legend.horizontalCenter = "middle";
chart.legend.markers.template.width = 22;
chart.legend.markers.template.height = 18;
chart.legend.markers.template.dy = 2;
chart.legend.labels.template.fontSize = "0.7em";
chart.legend.dy = 20;
chart.legend.dx = -9;

chart.legend.itemContainers.template.cursorOverStyle = am4core.MouseCursorStyle.pointer;
let itemHoverState = chart.legend.itemContainers.template.states.create("hover");
itemHoverState.properties.dx = 5;

let title = chart.radarContainer.createChild(am4core.Label);
title.text = "COMPANIES WITH\nTHE MOST CASH\nHELD OVERSEAS"
github amcharts / amcharts4 / dist / es2015 / examples / stacked-column-chart / index.ts View on Github external
}, {
	"category": "Six",
	"value1": 8,
	"value2": 7,
	"value3": 10,
	"value4": 4
}, {
	"category": "Seven",
	"value1": 10,
	"value2": 8,
	"value3": 6,
	"value4": 4
}]

chart.padding(30, 30, 10, 30);
chart.legend = new charts.Legend();

chart.colors.step = 2;

let categoryAxis = chart.xAxes.push(new charts.CategoryAxis());
categoryAxis.dataFields.category = "category";
categoryAxis.renderer.minGridDistance = 60;
categoryAxis.renderer.grid.template.location = 0;
categoryAxis.mouseEnabled = false;

let valueAxis = chart.yAxes.push(new charts.ValueAxis());
valueAxis.tooltip.disabled = true;
valueAxis.renderer.grid.template.strokeOpacity = 0.05;
valueAxis.renderer.minGridDistance = 20;
valueAxis.mouseEnabled = false;
valueAxis.min = 0;
valueAxis.renderer.minWidth = 35;
github SCADA-LTS / Scada-LTS / web-components / src / components / charts / BaseChart.js View on Github external
createScrollBarsAndLegend(scrollbarX = true, scrollbarY = false, legend = true, cursor = true) {
        if (scrollbarX) {
            this.chart.scrollbarX = new am4charts.XYChartScrollbar();
            this.chart.scrollbarX.parent = this.chart.bottomAxesContainer;
        }
        if (scrollbarY) {
            this.chart.scrollbarY = new am4core.Scrollbar();
            this.chart.scrollbarY.parent = this.chart.leftAxesContainer;
        }
        if (legend) {
            this.chart.legend = new am4charts.Legend();
        }
        if (cursor) {
            this.chart.cursor = new am4charts.XYCursor();
            this.chart.cursor.behavior = "panXY";
        }
    }
github amcharts / amcharts4 / dist / es2015 / examples / javascript / pictorial-stacked-chart-horizontal / index.js View on Github external
var series = chart.series.push(new am4charts.PictorialStackedSeries());
series.dataFields.value = "value";
series.dataFields.category = "name";
series.alignLabels = true;

series.maskSprite.path = iconPath;
series.orientation = "horizontal";
series.ticks.template.locationX = 0.5;
series.ticks.template.locationY = 0.65;
series.ticks.template.stroke = am4core.color("#aaaaaa");
series.ticks.template.strokeOpacity = 0.5;
series.ticks.template.strokeDasharray = "5";

series.labelsContainer.height = 150;

chart.legend = new am4charts.Legend();
chart.legend.position = "bottom";
github SCADA-LTS / Scada-LTS / ScadaLTS-UI-1 / src / components / graphicViewComponents / charts / BaseChart.js View on Github external
createScrollBarsAndLegend(scrollbarX = true, scrollbarY = false, legend = true, cursor = true) {
        if (scrollbarX) {
            this.chart.scrollbarX = new am4charts.XYChartScrollbar();
            this.chart.scrollbarX.parent = this.chart.bottomAxesContainer;
        }
        if (scrollbarY) {
            this.chart.scrollbarY = new am4core.Scrollbar();
            this.chart.scrollbarY.parent = this.chart.leftAxesContainer;
        }
        if (legend) {
            this.chart.legend = new am4charts.Legend();
        }
        if (cursor) {
            this.chart.cursor = new am4charts.XYCursor();
            this.chart.cursor.behavior = "panXY";
        }
    }
github amcharts / amcharts4 / dist / es2015 / examples / javascript / funnel-chart / index.js View on Github external
"value": 10
}];

let series = chart.series.push(new am4charts.FunnelSeries());
series.colors.step = 2;
series.dataFields.value = "value";
series.dataFields.category = "name";
series.alignLabels = true;

series.labelsContainer.paddingLeft = 15;
series.labelsContainer.width = 200;

//series.orientation = "horizontal";
//series.bottomRatio = 1;

chart.legend = new am4charts.Legend();
chart.legend.position = "left";
chart.legend.valign = "bottom";
chart.legend.margin(5,5,20,5);