How to use the @amcharts/amcharts4/charts.LineSeries 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 / line-different-ups-downs / index.ts View on Github external
}    
    
    data.push({ date: new Date(2018, 0, i + 1), value: visits });
    previousValue = 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;
valueAxis.renderer.minWidth = 35;

let series = chart.series.push(new am4charts.LineSeries());
series.dataFields.dateX = "date";
series.dataFields.valueY = "value";
series.strokeWidth = 2;
series.tooltipText = "{valueY} {valueY.change}";

// set stroke property field
series.propertyFields.stroke = "color";

chart.cursor = new am4charts.XYCursor();

let scrollbarX = new am4core.Scrollbar();
chart.scrollbarX = scrollbarX;
github amcharts / amcharts4 / dist / es2015 / examples / javascript / changing-series-apppearance / index.js View on Github external
columnTemplate.filters.push(desaturateFilter);

// first way - get properties from data. but can only be done with columns, as they are separate objects.    
columnTemplate.propertyFields.strokeDasharray = "stroke";
columnTemplate.propertyFields.fillOpacity = "opacity";

// add some cool saturation effect on hover
let desaturateFilterHover = new am4core.DesaturateFilter();
desaturateFilterHover.saturation = 1;

let hoverState = columnTemplate.states.create("hover");
hoverState.transitionDuration = 2000;
hoverState.filters.push(desaturateFilterHover);

let lineSeries = chart.series.push(new am4charts.LineSeries());
lineSeries.dataFields.categoryX = "year";
lineSeries.dataFields.valueY = "income";
lineSeries.tooltipText = "income: {valueY.value}";
lineSeries.sequencedInterpolation = true;
lineSeries.defaultState.transitionDuration = 1500;
lineSeries.stroke = chart.colors.getIndex(11);
lineSeries.fill = lineSeries.stroke;
lineSeries.strokeWidth = 2;

// second way - add axis range.
let lineSeriesRange = categoryAxis.createSeriesRange(lineSeries);
lineSeriesRange.category = "2018";
lineSeriesRange.endCategory = "2019";
lineSeriesRange.contents.strokeDasharray = "3,3";
lineSeriesRange.locations.category = 0.5;
github Azure-Samples / bc-community-samples / weather-insurance-app / stejin / WebApp / src / components / Trades.vue View on Github external
valueAxis.tooltip.disabled = true
      valueAxis.zIndex = 2
      valueAxis.renderer.baseGrid.disabled = true
      valueAxis.renderer.inside = true
      // height of axis
      valueAxis.height = am4core.percent(80)
      valueAxis.renderer.labels.template.verticalCenter = 'bottom'
      valueAxis.renderer.labels.template.padding(2, 2, 2, 2)
      // valueAxis.renderer.maxLabelPosition = 0.95
      valueAxis.renderer.fontSize = '0.8em'

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

      let series = chart.series.push(new am4charts.LineSeries())
      series.dataFields.dateX = 'timestamp'
      series.dataFields.valueY = 'price'
      series.tooltipText = '{valueY.value}'
      series.name = 'Price'
      series.yAxis = valueAxis
      series.strokeWidth = 1
      series.stroke = am4core.color('#409EFF')

      let valueAxis2 = chart.yAxes.push(new am4charts.ValueAxis())
      valueAxis2.tooltip.disabled = true
      valueAxis2.renderer.inside = true
      // height of axis
      valueAxis2.height = am4core.percent(20)
      valueAxis2.zIndex = 1
      // this makes gap between panels
      valueAxis2.marginTop = 20
github amcharts / amcharts4 / dist / es2015 / examples / javascript / line-different-ups-downs / index.js View on Github external
}    
    
    data.push({ date: new Date(2018, 0, i + 1), value: visits });
    previousValue = 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;
valueAxis.renderer.minWidth = 35;

let series = chart.series.push(new am4charts.LineSeries());
series.dataFields.dateX = "date";
series.dataFields.valueY = "value";
series.strokeWidth = 2;
series.tooltipText = "{valueY} {valueY.change}";

// set stroke property field
series.propertyFields.stroke = "color";

chart.cursor = new am4charts.XYCursor();

let scrollbarX = new am4core.Scrollbar();
chart.scrollbarX = scrollbarX;
github amcharts / amcharts4 / dist / es2015 / examples / javascript / adding-live-data / index.js View on Github external
dateAxis.renderer.minGridDistance = 30;
dateAxis.dateFormats.setKey("second", "ss");
dateAxis.periodChangeDateFormats.setKey("second", "[bold]h:mm a");
dateAxis.periodChangeDateFormats.setKey("minute", "[bold]h:mm a");
dateAxis.periodChangeDateFormats.setKey("hour", "[bold]h:mm a");
dateAxis.renderer.inside = true;

var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
valueAxis.tooltip.disabled = true;
valueAxis.interpolationDuration = 500;
valueAxis.rangeChangeDuration = 500;
valueAxis.renderer.inside = true;
valueAxis.renderer.minLabelPosition = 0.05;
valueAxis.renderer.maxLabelPosition = 0.95;

var series = chart.series.push(new am4charts.LineSeries());
series.dataFields.dateX = "date";
series.dataFields.valueY = "value";
series.interpolationDuration = 500;
series.defaultState.transitionDuration = 0;
series.tensionX = 0.8;

chart.events.on("datavalidated", () => {
    dateAxis.zoom({ start: 1 / 15, end: 1.2 }, false, true);
});

dateAxis.interpolationDuration = 500;
dateAxis.rangeChangeDuration = 500;

document.addEventListener("visibilitychange", function() {
    if (document.hidden) {
        if (interval) {
github SCADA-LTS / Scada-LTS / ScadaLTS-UI-1 / src / components / graphicViewComponents / 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;
            series.dataFields.category = seriesValueX;
            series.slices.template.strokeWidth = 2;
github amcharts / amcharts4 / dist / es2015 / examples / simple-line-chart / index.ts View on Github external
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), name: "name" + i, value: visits });
}

chart.data = data;

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

let valueAxis = chart.yAxes.push(new charts.ValueAxis());
valueAxis.tooltip.disabled = true;
valueAxis.renderer.minWidth = 35;

let series = chart.series.push(new charts.LineSeries());
series.dataFields.dateX = "date";
series.dataFields.valueY = "value";

series.tooltipText = "{valueY.value}";
chart.cursor = new charts.XYCursor();

let scrollbarX = new charts.XYChartScrollbar();
scrollbarX.series.push(series);
chart.scrollbarX = scrollbarX;
github amcharts / amcharts4 / dist / es2015 / examples / javascript / multiple-axes-date-based-chart / index.js View on Github external
let valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
valueAxis.tooltip.disabled = true;

let series = chart.series.push(new am4charts.LineSeries());
series.dataFields.dateX = "date";
series.dataFields.valueY = "price";
series.tooltipText = "{valueY.value}";
series.name = "Series 1";
series.sequencedInterpolation = true;

let valueAxis2 = chart.yAxes.push(new am4charts.ValueAxis());
valueAxis2.tooltip.disabled = true;
valueAxis2.renderer.opposite = true;
valueAxis2.renderer.grid.template.disabled = true;

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

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;
github amcharts / amcharts4 / dist / es2015 / examples / typescript / map-line-gauge-mix / index.ts View on Github external
dateAxis.renderer.labels.template.fillOpacity = 0.4;
dateAxis.renderer.minLabelPosition = 0.03;

let valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
valueAxis.renderer.ticks.template.disabled = true;
valueAxis.min = -90;
valueAxis.max = 90;
valueAxis.renderer.minGridDistance = 20;
valueAxis.renderer.grid.template.disabled = true;
valueAxis.renderer.line.disabled = true;
valueAxis.tooltip.disabled = true;
valueAxis.strictMinMax = true;
valueAxis.renderer.labels.template.fillOpacity = 0.4;
valueAxis.renderer.inside = true;

let lineSeries = chart.series.push(new am4charts.LineSeries());
lineSeries.dataFields.valueY = "value";
lineSeries.dataFields.dateX = "time";
lineSeries.tooltipText = "{valueY.workingValue}%";
lineSeries.stroke = am4core.color("#3f2698");
lineSeries.tooltip.background.fillOpacity = 0;
lineSeries.tooltip.autoTextColor = false;
lineSeries.tooltip.label.fill = am4core.color("#ffffff");
lineSeries.tooltip.filters.clear();
lineSeries.tooltip.pointerOrientation = "vertical";
lineSeries.strokeWidth = 2;
lineSeries.tensionX = 0.7;

let negativeRange = valueAxis.createSeriesRange(lineSeries);
negativeRange.value = 0;
negativeRange.endValue = - 100;
negativeRange.contents.stroke = am4core.color("#84279a");
github amcharts / amcharts4 / dist / es2015 / examples / es2015 / multiple-axes-date-based-chart / index.js View on Github external
valueAxis.tooltip.disabled = true;

let series = chart.series.push(new am4charts.LineSeries());
series.dataFields.dateX = "date";
series.dataFields.valueY = "price";
series.tooltipText = "{valueY.value}";
series.name = "Series 1";
series.sequencedInterpolation = true;
series.defaultState.transitionDuration = 3000;

let valueAxis2 = chart.yAxes.push(new am4charts.ValueAxis());
valueAxis2.tooltip.disabled = true;
valueAxis2.renderer.opposite = true;
valueAxis2.renderer.grid.template.disabled = true;

let series2 = chart.series.push(new am4charts.LineSeries());
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();