How to use the @amcharts/amcharts4/charts.ColumnSeries 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 / drag-and-change-values / index.js View on Github external
categoryAxis.dataFields.category = "country";
categoryAxis.renderer.minGridDistance = 60;
categoryAxis.renderer.grid.template.disabled = true;
categoryAxis.renderer.line.disabled = true;

// value axis
let valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
// we set fixed min/max and strictMinMax to true, as otherwise value axis will adjust min/max while dragging and it won't look smooth
valueAxis.min = 0;
valueAxis.max = 3500;
valueAxis.strictMinMax = true;
valueAxis.renderer.line.disabled = true;
valueAxis.renderer.minWidth = 40;

// series
let series = chart.series.push(new am4charts.ColumnSeries());
series.dataFields.categoryX = "country";
series.dataFields.valueY = "visits";
series.tooltip.pointerOrientation = "vertical";
series.tooltip.dy = -8;

// label bullet
let labelBullet = new am4charts.LabelBullet();
series.bullets.push(labelBullet);
labelBullet.label.text = "{valueY.value.formatNumber('#.')}";
labelBullet.strokeOpacity = 0;
labelBullet.stroke = am4core.color("#dadada");
labelBullet.dy = - 20;

// series bullet
let bullet = series.bullets.push(new am4charts.CircleBullet());
bullet.stroke = am4core.color("#ffffff");
github amcharts / amcharts4 / dist / es2015 / examples / typescript / population-pyramid / index.ts View on Github external
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 = "#.#'%'";
femaleValueAxis.renderer.minLabelPosition = 0.01;

// Create series
var femaleSeries = femaleChart.series.push(new am4charts.ColumnSeries());
femaleSeries.dataFields.valueX = "female";
femaleSeries.dataFields.valueXShow = "percent";
femaleSeries.calculatePercent = true;
femaleSeries.fill = femaleChart.colors.getIndex(4);
femaleSeries.stroke = femaleSeries.fill;
//femaleSeries.sequencedInterpolation = true;
femaleSeries.columns.template.tooltipText = "Females, age{categoryY}: {valueX} ({valueX.percent.formatNumber('#.0')}%)";
femaleSeries.dataFields.categoryY = "age";
femaleSeries.interpolationDuration = 1000;


var mapChart = mainContainer.createChild(am4maps.MapChart);
mapChart.projection = new am4maps.projections.AlbersUsa();
mapChart.geodata = am4geodata_usaHigh;
mapChart.zoomControl = new am4maps.ZoomControl();
mapChart.zIndex = -1;
github amcharts / amcharts4 / dist / es2015 / examples / typescript / vertically-stacked-axes / index.ts View on Github external
// height of axis
valueAxis2.height = am4core.percent(35);
valueAxis2.zIndex = 3
// this makes gap between panels
valueAxis2.marginTop = 30;
valueAxis2.renderer.baseGrid.disabled = true;
valueAxis2.renderer.inside = true;
valueAxis2.renderer.labels.template.verticalCenter = "bottom";
valueAxis2.renderer.labels.template.padding(2,2,2,2);
//valueAxis.renderer.maxLabelPosition = 0.95;
valueAxis2.renderer.fontSize = "0.8em"

valueAxis2.renderer.gridContainer.background.fill = am4core.color("#000000");
valueAxis2.renderer.gridContainer.background.fillOpacity = 0.05;

let series2 = chart.series.push(new am4charts.ColumnSeries());
series2.dataFields.dateX = "date";
series2.dataFields.valueY = "quantity";
series2.yAxis = valueAxis2;
series2.tooltipText = "{valueY.value}";
series2.name = "Series 2";

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

let scrollbarX = new am4charts.XYChartScrollbar();
scrollbarX.series.push(series);
scrollbarX.marginBottom = 20;
chart.scrollbarX = scrollbarX;
github Azure-Samples / bc-community-samples / weather-insurance-app / stejin / WebApp / src / components / Trades.vue View on Github external
// height of axis
      valueAxis2.height = am4core.percent(20)
      valueAxis2.zIndex = 1
      // this makes gap between panels
      valueAxis2.marginTop = 20
      valueAxis2.renderer.baseGrid.disabled = true
      valueAxis2.renderer.labels.template.verticalCenter = 'bottom'
      valueAxis2.renderer.labels.template.padding(2, 2, 2, 2)
      // valueAxis2.renderer.maxLabelPosition = 0.95
      valueAxis2.renderer.fontSize = '0.8em'

      // uncomment these lines to fill plot area of this axis with some color
      valueAxis2.renderer.gridContainer.background.fill = interfaceColors.getFor('alternativeBackground')
      valueAxis2.renderer.gridContainer.background.fillOpacity = 0.05

      let series2 = chart.series.push(new am4charts.ColumnSeries())
      series2.dataFields.dateX = 'timestamp'
      series2.dataFields.valueY = 'volume'
      series2.dataFields.valueX = 'change'
      series2.yAxis = valueAxis2
      series2.tooltipText = '{valueY.value}'
      series2.name = 'Volume'
      series2.strokeWidth = 2

      series2.heatRules.push({
        'target': series2.columns.template,
        'property': 'stroke',
        'min': am4core.color('#dd6161'),
        'max': am4core.color('#5daf34'),
        'dataField': 'valueX'
      })
github amcharts / amcharts4 / dist / es2015 / examples / javascript / simple-bar-chart / index.js View on Github external
"visits": 443
}, {
	"country": "Canada",
	"visits": 441
}];


let categoryAxis = chart.yAxes.push(new am4charts.CategoryAxis());
categoryAxis.renderer.grid.template.location = 0;
categoryAxis.dataFields.category = "country";
categoryAxis.renderer.minGridDistance = 20;

let valueAxis = chart.xAxes.push(new am4charts.ValueAxis());
valueAxis.renderer.maxLabelPosition = 0.98;

let series = chart.series.push(new am4charts.ColumnSeries());
series.dataFields.categoryY = "country";
series.dataFields.valueX = "visits";
series.tooltipText = "{valueX.value}";
series.sequencedInterpolation = true;
series.defaultState.transitionDuration = 1000;
series.sequencedInterpolationDelay = 100;
series.columns.template.strokeOpacity = 0;

chart.cursor = new am4charts.XYCursor();
chart.cursor.behavior = "panY";


// as by default columns of the same series are of the same color, we add adapter which takes colors from chart.colors color set
series.columns.template.adapter.add("fill", (fill, target) => {
	return chart.colors.getIndex(target.dataItem.index);
});
github amcharts / amcharts4 / dist / es2015 / examples / javascript / simple-column-chart / index.js View on Github external
"visits": 443
}, {
	"country": "Canada",
	"visits": 441
}];

chart.padding(40, 40, 40, 40);

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

let valueAxis = chart.yAxes.push(new am4charts.ValueAxis());

let series = chart.series.push(new am4charts.ColumnSeries());
series.dataFields.categoryX = "country";
series.dataFields.valueY = "visits";
series.tooltipText = "{valueY.value}"
series.columns.template.strokeOpacity = 0;

chart.cursor = new am4charts.XYCursor();

// as by default columns of the same series are of the same color, we add adapter which takes colors from chart.colors color set
series.columns.template.adapter.add("fill", (fill, target) => {
	return chart.colors.getIndex(target.dataItem.index);
});
github amcharts / amcharts4 / dist / es2015 / examples / javascript / 100%-stacked-column-chart / index.js View on Github external
let categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
categoryAxis.dataFields.category = "category";
categoryAxis.renderer.minGridDistance = 60;
categoryAxis.renderer.grid.template.location = 0;
categoryAxis.interactionsEnabled = false;

let valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
valueAxis.min = 0;
valueAxis.max = 100;
valueAxis.strictMinMax = true;
valueAxis.calculateTotals = true;

valueAxis.renderer.minGridDistance = 20;
valueAxis.renderer.minWidth = 35;

let series1 = chart.series.push(new am4charts.ColumnSeries());
series1.columns.template.tooltipText = "{name}: {valueY.totalPercent.formatNumber('#.00')}%";
series1.columns.template.column.strokeOpacity = 1;
series1.name = "Series 1";
series1.dataFields.categoryX = "category";
series1.dataFields.valueY = "value1";
series1.dataFields.valueYShow = "totalPercent";
series1.dataItems.template.locations.categoryX = 0.5;
series1.stacked = true;
series1.tooltip.pointerOrientation = "vertical";
series1.tooltip.dy = - 20;
series1.cursorHoverEnabled = false;

let bullet1 = series1.bullets.push(new am4charts.LabelBullet());
bullet1.label.text = "{valueY.totalPercent.formatNumber('#.00')}%";
bullet1.locationY = 0.5;
bullet1.label.fill = am4core.color("#ffffff");
github Twasi / twasi-panel / src / views / Overview / ViewerChart.jsx View on Github external
messageslineSeries.stroke = '#fdd400';
    messageslineSeries.fill = '#fdd400';
    messageslineSeries.fillOpacity = 0.4;
    messageslineSeries.yAxis = valueAxisMessages;
    messageslineSeries.strokeWidth = 0;
    messageslineSeries.tensionX = 0.77;

    const valueAxisCommands = chart.yAxes.push(new am4charts.ValueAxis());
    valueAxisCommands.tooltip.disabled = true;
    valueAxisCommands.renderer.line.opacity = 0;
    valueAxisCommands.renderer.grid.template.disabled = true;
    valueAxisCommands.renderer.ticks.template.disabled = true;
    valueAxisCommands.min = 0;
    valueAxisCommands.renderer.disabled = true;

    const commandslineSeries = chart.series.push(new am4charts.ColumnSeries());
    commandslineSeries.showOnInit = false;
    commandslineSeries.name = 'Befehle';
    commandslineSeries.dataFields.valueY = 'chatCommands';
    commandslineSeries.dataFields.categoryX = 'timestamp';
    commandslineSeries.tooltipText = '[bold]{chatCommands}[/b] Befehle';
    commandslineSeries.tooltip.getStrokeFromObject = true;
    commandslineSeries.stroke = '#00aeae';
    commandslineSeries.fill = '#00aeae';
    messageslineSeries.fillOpacity = 0.4;
    commandslineSeries.yAxis = valueAxisCommands;
    commandslineSeries.strokeWidth = 0;
    commandslineSeries.tensionX = 0.77;

    chart.cursor = new am4charts.XYCursor();
    chart.cursor.lineX.opacity = 1;
    chart.cursor.lineY.opacity = 0;
github amcharts / amcharts4 / dist / es2015 / examples / javascript / heat-map-circles / index.js View on Github external
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";
series.dataFields.categoryY = "hour";
series.dataFields.value = "value";
series.columns.template.disabled = true;
series.sequencedInterpolation = true;

var bullet = series.bullets.push(new am4charts.CircleBullet());
bullet.tooltipText = "{weekday}, {hour}: {value.workingValue.formatNumber('#.')}";
bullet.strokeWidth = 3;
bullet.stroke = am4core.color("#ffffff");
bullet.strokeOpacity = 0;

bullet.adapter.add("tooltipY", (tooltipY, target) => {
	return -target.circle.radius + 1;
})
github SCADA-LTS / Scada-LTS / web-components / src / components / charts / BaseChart.js View on Github external
createSeries(seriesType, seriesValueX, seriesValueY, seriesName, suffix = "") {
        let series;
        if (seriesType === "Column") {
            series = this.chart.series.push(new am4charts.ColumnSeries());
        } else if (seriesType === "Line") {
            series = this.chart.series.push(new am4charts.LineSeries());
        } else if (seriesType === "StepLine") {
            series = this.chart.series.push(new am4charts.StepLineSeries());
        } else if (seriesType === "Pie") {
            series = this.chart.series.push(new am4charts.PieSeries());
        }

        if (seriesType === "Column") {
            series.dataFields.categoryX = seriesValueX;
            series.dataFields.valueY = seriesValueY;
            series.columns.template.tooltipText = "{valueY.value}";
            series.columns.template.tooltipY = 0;
            series.columns.template.strokeOpacity = 0;
        } else if (seriesType === "Pie") {
            series.dataFields.value = seriesValueY;