How to use the @amcharts/amcharts4/charts.XYChart 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 / javascript / columns-with-pies-inside / index.js View on Github external
"units": 200,
	"pie": [{
		"value": 75,
		"title": "Cat #1"
	}, {
		"value": 55,
		"title": "Cat #2"
	}, {
		"value": 70,
		"title": "Cat #3"
	}]
}];


// Create chart instance
var chart = am4core.create("chartdiv", am4charts.XYChart);


// Add data
chart.data = data;

// Create axes
let categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
categoryAxis.dataFields.category = "country";
categoryAxis.renderer.grid.template.location = 0;

let valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
valueAxis.title.text = "Units sold (M)";
valueAxis.min = 0;

// Create series
var series = chart.series.push(new am4charts.ColumnSeries());
github amcharts / amcharts4 / dist / es2015 / examples / typescript / population-pyramid / index.ts View on Github external
maleValueAxis.numberFormatter = new am4core.NumberFormatter();
maleValueAxis.numberFormatter.numberFormat = "#.#'%'";

// Create series
var maleSeries = maleChart.series.push(new am4charts.ColumnSeries());
maleSeries.dataFields.valueX = "male";
maleSeries.dataFields.valueXShow = "percent";
maleSeries.calculatePercent = true;
maleSeries.dataFields.categoryY = "age";
maleSeries.interpolationDuration = 1000;
maleSeries.columns.template.tooltipText = "Males, age{categoryY}: {valueX} ({valueX.percent.formatNumber('#.0')}%)";
//maleSeries.sequencedInterpolation = true;


var femaleChart = mainContainer.createChild(am4charts.XYChart);
femaleChart.paddingLeft = 0;
femaleChart.data = JSON.parse(JSON.stringify(usData));

// Create axes
var femaleCategoryAxis = femaleChart.yAxes.push(new am4charts.CategoryAxis());
femaleCategoryAxis.renderer.opposite = true;
femaleCategoryAxis.dataFields.category = "age";
femaleCategoryAxis.renderer.grid.template.location = 0;
femaleCategoryAxis.renderer.minGridDistance = 15;

var femaleValueAxis = femaleChart.xAxes.push(new am4charts.ValueAxis());
femaleValueAxis.min = 0;
femaleValueAxis.max = 10;
femaleValueAxis.strictMinMax = true;
femaleValueAxis.numberFormatter = new am4core.NumberFormatter();
femaleValueAxis.numberFormatter.numberFormat = "#.#'%'";
github amcharts / amcharts4 / dist / es2015 / examples / javascript / triangle-column-chart / index.js 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";

am4core.useTheme(am4themes_animated);

let chart = am4core.create("chartdiv", am4charts.XYChart);


chart.data = [{
    "country": "One",
    "visits": 3025
}, {
    "country": "Two",
    "visits": 1882
}, {
    "country": "Three",
    "visits": 1809
}, {
    "country": "Four",
    "visits": 1322
}, {
    "country": "Five",
github amcharts / amcharts4 / dist / es2015 / examples / typescript / map-line-gauge-mix / index.ts View on Github external
let pyongyangText = pyongyangTexts[i];
        if (time > pyongyangText.time) {
            pyongyangCircle.tooltipText = pyongyangText.text;
        }
    }

    if (pyongyangCircle.tooltipText) {
        pyongyangCircle.showTooltip();
    }
    else {
        pyongyangCircle.hideTooltip();
    }
}


let chart = container.createChild(am4charts.XYChart);
chart.padding(0, 50, 50, 50);
let dateAxis = chart.xAxes.push(new am4charts.DateAxis());
dateAxis.tooltip.background.pointerLength = 4;
dateAxis.tooltip.background.fillOpacity = 1;
dateAxis.tooltip.background.fill = am4core.color("#666666");
dateAxis.tooltip.background.stroke = dateAxis.tooltip.background.fill;


chart.height = 300;
chart.valign = "bottom";

let gradientFill = new am4core.LinearGradient();
gradientFill.addColor(am4core.color("#000000"), 0, 0);
gradientFill.addColor(am4core.color("#000000"), 1, 1);
gradientFill.rotation = 90;
github amcharts / amcharts4 / dist / es2015 / examples / javascript / map-line-gauge-mix / index.js View on Github external
let pyongyangText = pyongyangTexts[i];
        if (time > pyongyangText.time) {
            pyongyangCircle.tooltipText = pyongyangText.text;
        }
    }

    if (pyongyangCircle.tooltipText) {
        pyongyangCircle.showTooltip();
    }
    else {
        pyongyangCircle.hideTooltip();
    }
}


let chart = container.createChild(am4charts.XYChart);
chart.padding(0, 50, 50, 50);
let dateAxis = chart.xAxes.push(new am4charts.DateAxis());
dateAxis.tooltip.background.pointerLength = 4;
dateAxis.tooltip.background.fillOpacity = 1;
dateAxis.tooltip.background.fill = am4core.color("#666666");
dateAxis.tooltip.background.stroke = dateAxis.tooltip.background.fill;


chart.height = 300;
chart.valign = "bottom";

let gradientFill = new am4core.LinearGradient();
gradientFill.addColor(am4core.color("#000000"), 0, 0);
gradientFill.addColor(am4core.color("#000000"), 1, 1);
gradientFill.rotation = 90;
github amcharts / amcharts4 / dist / es2015 / examples / javascript / simple-column-chart / index.js 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";

am4core.useTheme(am4themes_animated);

let chart = am4core.create("chartdiv", am4charts.XYChart);


chart.data = [{
	"country": "USA",
	"visits": 3025
}, {
	"country": "China",
	"visits": 1882
}, {
	"country": "Japan",
	"visits": 1809
}, {
	"country": "Germany",
	"visits": 1322
}, {
	"country": "UK",
github amcharts / amcharts4 / dist / es2015 / examples / javascript / syncing-cursors-and-zoom / index.js View on Github external
function makeChart() {
  let chart = container.createChild(am4charts.XYChart);
  charts.push(chart);

  chart.data = generateData();
  chart.zoomOutButton.disabled = true;
  chart.padding(10, 15, 10, 15);

  let dateAxis = chart.xAxes.push(new am4charts.DateAxis());
  dateAxis.renderer.grid.template.location = 0;
  dateAxis.renderer.labels.template.disabled = true;
  dateAxis.tooltip.animationDuration = 0;
  dateAxis.cursorTooltipEnabled = false;

  let valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
  valueAxis.tooltip.disabled = true;
  valueAxis.tooltip.disabled = true;
  valueAxis.renderer.minWidth = 60;
github amcharts / amcharts4 / dist / es2015 / examples / javascript / bubble-chart / index.js 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 am4themes_dark from "@amcharts/amcharts4/themes/dark";


am4core.useTheme(am4themes_animated);
am4core.useTheme(am4themes_dark);

var chart = am4core.create("chartdiv", am4charts.XYChart);

var valueAxisX = chart.xAxes.push(new am4charts.ValueAxis());
var valueAxisY = chart.yAxes.push(new am4charts.ValueAxis());

var series = chart.series.push(new am4charts.LineSeries());
series.dataFields.valueX = "x";
series.dataFields.valueY = "y";
series.dataFields.value = "value";
series.strokeOpacity = 0;
series.sequencedInterpolation = true;
series.tooltip.pointerOrientation = "vertical";

var bullet = series.bullets.push(new am4core.Circle());
bullet.fill = am4core.color("#ff0000");
bullet.propertyFields.fill = "color";
bullet.strokeOpacity = 0;
github amcharts / amcharts4 / dist / es2015 / examples / javascript / simple-line-chart / index.js 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";


am4core.useTheme(am4themes_animated);

let chart = am4core.create("chartdiv", am4charts.XYChart);
chart.paddingRight = 20;

let data = [];
let visits = 10;
for (let i = 1; i < 366; i++) {
  visits += Math.round((Math.random() < 0.5 ? 1 : -1) * Math.random() * 10);
  data.push({ date: new Date(2018, 0, i), value: visits });
}

chart.data = data;

let dateAxis = chart.xAxes.push(new am4charts.DateAxis());
dateAxis.renderer.grid.template.location = 0;

let valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
valueAxis.tooltip.disabled = true;
github amcharts / amcharts4 / dist / es2015 / examples / javascript / heat-map-circles / index.js 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 am4themes_dark from "@amcharts/amcharts4/themes/dark";

am4core.useTheme(am4themes_animated);
am4core.useTheme(am4themes_dark);

let chart = am4core.create("chartdiv", am4charts.XYChart);
chart.maskBullets = false;

let xAxis = chart.xAxes.push(new am4charts.CategoryAxis());
let yAxis = chart.yAxes.push(new am4charts.CategoryAxis());

xAxis.dataFields.category = "weekday";
xAxis.renderer.minGridDistance = 40;
yAxis.dataFields.category = "hour";

xAxis.renderer.grid.template.disabled = true;
yAxis.renderer.grid.template.disabled = true;

yAxis.renderer.inversed = true;

var series = chart.series.push(new am4charts.ColumnSeries());
series.dataFields.categoryX = "weekday";