How to use the @amcharts/amcharts4/core.color 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 / typescript / day-night-map / index.ts View on Github external
night2.interactionsEnabled = false;
night2.stroke = am4core.color("#000000");
night2.strokeOpacity = 0;


// images series
var imagesSeries = mapChart.series.push(new am4maps.MapImageSeries())
var tooltip = imagesSeries.tooltip;
tooltip.label.padding(15, 15, 15, 15);
tooltip.background.cornerRadius = 25;

// sun
var sun = imagesSeries.mapImages.create();
var suncircle = sun.createChild(am4core.Circle);
suncircle.radius = 10;
suncircle.fill = am4core.color("#ffba00");
suncircle.strokeOpacity = 0;
sun.filters.push(new am4core.BlurFilter());

// graticule
var graticuleSeires = mapChart.series.push(new am4maps.GraticuleSeries());
graticuleSeires.mapLines.template.stroke = am4core.color("#ffffff");
graticuleSeires.fitExtent = false;

// add slider to chart container in order not to occupy space
var slider = mapChart.chartContainer.createChild(am4core.Slider);
slider.start = 0.5;
slider.valign = "bottom";
slider.padding(0, 30, 0, 80);
slider.background.padding(0, 30, 0, 80);
slider.marginBottom = 15;
slider.events.on("rangechanged", function () {
github GetTerminus / terminus-ui / demo / app / components / chart / chart.component.ts View on Github external
level1Column.strokeOpacity = 0;

      /* Create second-level series */
      const level2 = chart.seriesTemplates.create('1');
      const level2Column = level2.columns.template;
      level2Column.column.cornerRadius(10, 10, 10, 10);
      level2Column.fillOpacity = 0.8;
      level2Column.stroke = am4core.color('#fff');
      level2Column.strokeWidth = 5;
      level2Column.strokeOpacity = 1;

      const level2Bullet = level2.bullets.push(new am4charts.LabelBullet());
      level2Bullet.locationY = 0.5;
      level2Bullet.locationX = 0.5;
      level2Bullet.label.text = '{name}';
      level2Bullet.label.fill = am4core.color('#fff');

      /* Add a navigation bar */
      chart.navigationBar = new am4charts.NavigationBar();
      chart.homeText = 'TOP';
    }

    /**
     * SANKEY
     */
    if (tsChartSankeyTypeCheck(chart)) {
      // Set data
      chart.data = [
        {
          from: 'A',
          to: 'D',
          value: 10,
github amcharts / amcharts4 / dist / es2015 / examples / typescript / drill-down-map / index.ts View on Github external
chart.zoomControl = new am4maps.ZoomControl();

var homeButton = new am4core.Button();
homeButton.events.on("hit", restoreContinents);

homeButton.icon = new am4core.Sprite();
homeButton.padding(7, 5, 7, 5);
homeButton.width = 30;
homeButton.icon.path = "M16,8 L14,8 L14,16 L10,16 L10,10 L6,10 L6,16 L2,16 L2,8 L0,8 L8,0 L16,8 Z M16,8";
homeButton.marginBottom = 10;
homeButton.parent = chart.zoomControl;
homeButton.insertBefore(chart.zoomControl.plusButton);

// Shared
var hoverColorHex = "#9a7bca";
var hoverColor = am4core.color(hoverColorHex);
var hideCountries = function() {
  countryTemplate.hide();
  labelContainer.hide();
};

// Continents 
var continentsSeries = chart.series.push(new am4maps.MapPolygonSeries());


try {
  continentsSeries.geodata = am4geodata_continentsLow;
}
catch (e) {
  continentsSeries.raiseCriticalError(new Error("Map geodata could not be loaded. Please download the latest <a href="\&quot;https://www.amcharts.com/download/download-v4/\&quot;">amcharts geodata</a> and extract its contents into the same directory as your amCharts files."));
}
github SCADA-LTS / Scada-LTS / web-components / src / components / charts / BaseChart.js View on Github external
}
        this.pointPastValues = new Map();
        this.pointCurrentValue = new Map();
        this.liveUpdatePointValues = new Map();
        this.lastUpdate = 0;
        this.liveUpdateInterval = 5000;
        this.domain = domain;
        let colorPallete = [
            am4core.color("#39B54A"),
            am4core.color("#69FF7D"),
            am4core.color("#166921"),
            am4core.color("#690C24"),
            am4core.color("#B53859"),
            am4core.color("#734FC1"),
            am4core.color("#824F1B"),
            am4core.color("#69421B"),
        ];
        if (colors !== undefined) {
            colors = colors.split(",");
            if (colors.length > 0) {
                for (let i = colors.length - 1; i >= 0; i--) {
                    colorPallete.unshift(am4core.color(colors[i].trim()));
                }
            }
        }
        this.chart.colors.list = colorPallete;
        this.yAxesCount = 0;
    }
github amcharts / amcharts4 / dist / es2015 / examples / es2015 / stacked-area-radar-chart / index.js View on Github external
chart.cursor.selection.fill = am4core.color("#62b5ce");

let bullet = series2.bullets.create();
bullet.fill = am4core.color("#000000");
bullet.strokeOpacity = 0;
bullet.locationX = 0.5;


let line = bullet.createChild(am4core.Line);
line.x2 = -100;
line.x1 = 0;
line.y1 = 0;
line.y1 = 0;
line.strokeOpacity = 1;

line.stroke = am4core.color("#000000");
line.strokeDasharray = "2,3";
line.strokeOpacity = 0.4;


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;
github amcharts / amcharts4 / dist / es2015 / examples / javascript / pictorial-stacked-chart-horizontal / index.js View on Github external
"value": 187
}, {
    "name": "Salt",
    "value": 123
}];

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 amcharts / amcharts4 / dist / es2015 / examples / javascript / pictorial-bar-chart / index.js View on Github external
image.verticalCenter = "top";

image.propertyFields.href = "icon";
image.height = am4core.percent(100);
image.propertyFields.widthRatio = "ratio";

bullet.events.on("positionchanged", (event)=>{
    event.target.deepInvalidate();
});

var label = series.bullets.push(new am4charts.LabelBullet());
label.label.text = "{height} metres";
label.dy = -15;

let gradient = new am4core.LinearGradient();
gradient.addColor(am4core.color("#f0b24f"));
gradient.addColor(am4core.color("#ca6c46"));
gradient.addColor(am4core.color("#0c0524"));
gradient.rotation = 90;
chart.background.fill = gradient;
github amcharts / amcharts4 / dist / es2015 / examples / javascript / column-chart-with-images-as-bullets / index.js View on Github external
let series = chart.series.push(new am4charts.ColumnSeries);
series.dataFields.valueY = "steps";
series.dataFields.categoryX = "name";
series.tooltipText = "{valueY.value}";
series.tooltip.pointerOrientation = "vertical";
series.tooltip.dy = - 6;
series.columnsContainer.zIndex = 100;

let columnTemplate = series.columns.template;
columnTemplate.width = am4core.percent(50);
columnTemplate.maxWidth = 66;
columnTemplate.column.cornerRadius(60, 60, 10, 10);
columnTemplate.strokeOpacity = 0;

series.heatRules.push({ target: columnTemplate, property: "fill", dataField: "valueY", min: am4core.color("#e5dc36"), max: am4core.color("#5faa46") });
series.mainContainer.mask = undefined;

let cursor = new am4charts.XYCursor();
chart.cursor = cursor;
cursor.lineX.disabled = true;
cursor.lineY.disabled = true;
cursor.behavior = "none";

let bullet = columnTemplate.createChild(am4charts.CircleBullet);
bullet.circle.radius = 30;
bullet.valign = "bottom";
bullet.align = "center";
bullet.isMeasured = true;
bullet.interactionsEnabled = false;
bullet.verticalCenter = "bottom";
github amcharts / amcharts4 / dist / es2015 / examples / es2015 / stacked-area-radar-chart / index.js View on Github external
chart.padding(0, 0, 0, 0)

chart.scrollbarY.padding(20, 0, 20, 0);
chart.scrollbarX.padding(0, 20, 0, 80);

chart.scrollbarY.background.padding(20, 0, 20, 0);
chart.scrollbarX.background.padding(0, 20, 0, 80);


chart.cursor = new am4charts.RadarCursor();
chart.cursor.lineX.strokeOpacity = 1;
chart.cursor.lineY.strokeOpacity = 0;
chart.cursor.lineX.stroke = am4core.color("#62b5ce");
chart.cursor.innerRadius = am4core.percent(30);
chart.cursor.radius = am4core.percent(50);
chart.cursor.selection.fill = am4core.color("#62b5ce");

let bullet = series2.bullets.create();
bullet.fill = am4core.color("#000000");
bullet.strokeOpacity = 0;
bullet.locationX = 0.5;


let line = bullet.createChild(am4core.Line);
line.x2 = -100;
line.x1 = 0;
line.y1 = 0;
line.y1 = 0;
line.strokeOpacity = 1;

line.stroke = am4core.color("#000000");
line.strokeDasharray = "2,3";
github amcharts / amcharts4 / dist / es2015 / examples / javascript / countries-morphing-to-pie-chart / index.js View on Github external
pieChart.height = radius * 2;
    pieChart.radius = radius;

    let centerPoint = am4core.utils.spritePointToSvg(polygon.polygon.centerPoint, polygon.polygon);
    centerPoint = am4core.utils.svgPointToSprite(centerPoint, chart.seriesContainer);

    pieChart.x = centerPoint.x - radius;
    pieChart.y = centerPoint.y - radius;

    let fill = polygon.fill;
    let desaturated = fill.saturate(0.3);

    for (let i = 0; i &lt; pieSeries.dataItems.length; i++) {
        let dataItem = pieSeries.dataItems.getIndex(i);
        dataItem.value = Math.round(Math.random() * 100);
        dataItem.slice.fill = am4core.color(am4core.colors.interpolate(
            fill.rgb,
            am4core.color("#ffffff").rgb,
            0.2 * i
        ));

        dataItem.label.background.fill = desaturated;
        dataItem.tick.stroke = fill;
    }

    pieSeries.show();
    pieChart.show();

    countryLabel.text = "{name}";
    countryLabel.dataItem = polygon.dataItem;
    countryLabel.fill = desaturated;
    countryLabel.show();