How to use the @amcharts/amcharts4/charts.XYChartScrollbar 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 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 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 / duration-axis / index.js View on Github external
dateAxis.renderer.grid.template.location = 0;

let valueAxis = chart.yAxes.push(new am4charts.DurationAxis());
valueAxis.tooltip.disabled = true;
valueAxis.renderer.minWidth = 35;
valueAxis.baseUnit = "second";

let series = chart.series.push(new am4charts.StepLineSeries());
series.dataFields.dateX = "date";
series.dataFields.valueY = "seconds";
series.tooltipText = "{valueY.formatDuration()}";
series.fillOpacity = 0.3;

chart.cursor = new am4charts.XYCursor();

let scrollbarX = new am4charts.XYChartScrollbar();
scrollbarX.series.push(series);
chart.scrollbarX = scrollbarX;
github GetTerminus / terminus-ui / demo / app / components / chart / chart.component.ts View on Github external
dateAxis.renderer.grid.template.location = 0;

      const valueAxis = chart.yAxes.push(new am4charts.ValueAxis() as any);
      if (valueAxis.tooltip) {
        valueAxis.tooltip.disabled = true;
      }
      valueAxis.renderer.minWidth = 35;

      const series = chart.series.push(new am4charts.LineSeries() as any);
      series.dataFields.dateX = 'date';
      series.dataFields.valueY = 'value';

      series.tooltipText = '{valueY.value}';
      chart.cursor = new am4charts.XYCursor() as any;

      const scrollbarX = new am4charts.XYChartScrollbar();
      scrollbarX.series.push(series);
      chart.scrollbarX = scrollbarX as any;
    }

    /**
     * MAP
     */
    if (tsChartMapTypeCheck(chart)) {
      const polygonSeries = new am4maps.MapPolygonSeries();
      polygonSeries.useGeodata = true;
      polygonSeries.include = [
        'PT',
        'ES',
        'FR',
        'DE',
        'BE',
github amcharts / amcharts4 / dist / es2015 / examples / typescript / vertically-stacked-axes / index.ts View on Github external
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 amcharts / amcharts4 / dist / es2015 / examples / angular / simple-line-chart / src / app / app.component.ts View on Github external
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.tooltipText = "{valueY.value}";
      chart.cursor = new am4charts.XYCursor();

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

      this.chart = chart;
    });
  }