How to use the @amcharts/amcharts4/core.Scrollbar 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 / step-line-no-risers-chart / index.js View on Github external
valueAxis.renderer.minWidth = 35;

let series = chart.series.push(new am4charts.StepLineSeries());
series.dataFields.dateX = "date";
series.dataFields.valueY = "value";
series.noRisers = true;
series.strokeWidth = 2;
series.fillOpacity = 0.2;
series.stroke = chart.colors.getIndex(14);
series.fill = series.stroke;
series.sequencedInterpolation = true;

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

chart.scrollbarX = new am4core.Scrollbar();
github amcharts / amcharts4 / dist / es2015 / examples / typescript / horizontally-stacked-axes / index.ts View on Github external
valueAxis3.renderer.grid.template.stroke = interfaceColors.getFor("background");
valueAxis3.renderer.grid.template.strokeOpacity = 1;
valueAxis3.title.text = "Axis 3";

let series3 = chart.series.push(new am4charts.LineSeries());
series3.dataFields.categoryY = "category";
series3.dataFields.valueX = "value3";
series3.tooltipText = "{valueX.value}";
series3.xAxis = valueAxis3;
series3.name = "Series 3";
series3.bullets.push(new am4charts.CircleBullet());

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

let scrollbarY = new am4core.Scrollbar();
chart.scrollbarY = scrollbarY;
github amcharts / amcharts4 / dist / es2015 / examples / stacked-column-chart / index.ts View on Github external
series3.columns.template.width = amcharts4.percent(80);
series3.columns.template.tooltipText = "{name}: {valueY.value}";
series3.name = "Series 3";
series3.dataFields.categoryX = "category";
series3.dataFields.valueY = "value3";
series3.stacked = true;

let series4 = chart.series.push(new charts.ColumnSeries());
series4.columns.template.width = amcharts4.percent(80);
series4.columns.template.tooltipText = "{name}: {valueY.value}";
series4.name = "Series 4";
series4.dataFields.categoryX = "category";
series4.dataFields.valueY = "value4";
series4.stacked = true;

chart.scrollbarX = new amcharts4.Scrollbar();
github GetTerminus / terminus-ui / demo / app / components / chart / chart.component.ts View on Github external
series3.dataFields.categoryX = 'category';
      series3.dataFields.valueY = 'value3';
      series3.stacked = true;

      const series4 = chart.series.push(new am4charts.RadarColumnSeries());
      series4.columns.template.width = am4core.percent(80);
      series4.columns.template.tooltipText = '{name}: {valueY.value}';
      series4.name = 'Series 4';
      series4.dataFields.categoryX = 'category';
      series4.dataFields.valueY = 'value4';
      series4.stacked = true;

      chart.seriesContainer.zIndex = -1;

      chart.scrollbarX = new am4core.Scrollbar();
      chart.scrollbarY = new am4core.Scrollbar();

      chart.cursor = new am4charts.RadarCursor();
      chart.cursor.xAxis = categoryAxis;
      chart.cursor.fullWidthLineX = true;
      chart.cursor.lineX.strokeOpacity = 0;
      chart.cursor.lineX.fillOpacity = 0.1;
      chart.cursor.lineX.fill = am4core.color('#000000');
    }

    /**
     * TREEMAP
     */
    if (tsChartTreeTypeCheck(chart)) {
      chart.data = [{
        name: 'First',
        children: [
github GetTerminus / terminus-ui / demo / app / components / chart / chart.component.ts View on Github external
series3.name = 'Series 3';
      series3.dataFields.categoryX = 'category';
      series3.dataFields.valueY = 'value3';
      series3.stacked = true;

      const series4 = chart.series.push(new am4charts.RadarColumnSeries());
      series4.columns.template.width = am4core.percent(80);
      series4.columns.template.tooltipText = '{name}: {valueY.value}';
      series4.name = 'Series 4';
      series4.dataFields.categoryX = 'category';
      series4.dataFields.valueY = 'value4';
      series4.stacked = true;

      chart.seriesContainer.zIndex = -1;

      chart.scrollbarX = new am4core.Scrollbar();
      chart.scrollbarY = new am4core.Scrollbar();

      chart.cursor = new am4charts.RadarCursor();
      chart.cursor.xAxis = categoryAxis;
      chart.cursor.fullWidthLineX = true;
      chart.cursor.lineX.strokeOpacity = 0;
      chart.cursor.lineX.fillOpacity = 0.1;
      chart.cursor.lineX.fill = am4core.color('#000000');
    }

    /**
     * TREEMAP
     */
    if (tsChartTreeTypeCheck(chart)) {
      chart.data = [{
        name: 'First',
github amcharts / amcharts4 / dist / es2015 / examples / javascript / 100%-stacked-column-chart / index.js View on Github external
let series2 = chart.series.push(series1.clone());
series2.name = "Series 2";
series2.dataFields.valueY = "value2";
series2.fill = chart.colors.next();
series2.stroke = series2.fill;
series2.cursorHoverEnabled = false;

let series3 = chart.series.push(series1.clone());
series3.name = "Series 3";
series3.dataFields.valueY = "value3";
series3.fill = chart.colors.next();
series3.stroke = series3.fill;
series3.cursorHoverEnabled = false;

chart.scrollbarX = new am4core.Scrollbar();

chart.cursor = new am4charts.XYCursor();
chart.cursor.behavior = "panX";
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 amcharts / amcharts4 / dist / es2015 / examples / javascript / date-based-radar / index.js View on Github external
series4.dataItems.template.locations.dateX = 0;

let series5 = chart.series.push(new am4charts.RadarColumnSeries());
series5.name = "Series 5";
series5.dataFields.openDateX = "startDate5";
series5.dataFields.dateX = "endDate5";
series5.dataFields.categoryY = "category";
series5.clustered = false;
series5.columns.template.radarColumn.cornerRadius = 30;
series5.columns.template.tooltipText = "{category}: {openDateX} - {dateX}";
series5.columns.template.hiddenState.properties.opacity = 0;
series5.dataItems.template.locations.dateX = 0;

chart.seriesContainer.zIndex = -1;

chart.scrollbarX = new am4core.Scrollbar();
chart.scrollbarY = new am4core.Scrollbar();

chart.cursor = new am4charts.RadarCursor();
chart.cursor.innerRadius = am4core.percent(40);
chart.cursor.lineY.disabled = true;

let yearLabel = chart.radarContainer.createChild(am4core.Label);
yearLabel.text = "2018";
yearLabel.fontSize = 30;
yearLabel.horizontalCenter = "middle";
yearLabel.verticalCenter = "middle";
github amcharts / amcharts4 / dist / es2015 / examples / typescript / dumbbell-plot / index.ts View on Github external
series.fillOpacity = 0;
series.strokeOpacity = 1;
series.columns.template.width = 0.01;
series.tooltip.pointerOrientation = "horizontal";

var openBullet = series.bullets.create(am4charts.CircleBullet);
openBullet.locationY = 1;

var closeBullet = series.bullets.create(am4charts.CircleBullet);

closeBullet.fill = chart.colors.getIndex(4);
closeBullet.stroke = closeBullet.fill;

chart.cursor = new am4charts.XYCursor();

chart.scrollbarX = new am4core.Scrollbar();
chart.scrollbarY = new am4core.Scrollbar();
github amcharts / amcharts4 / dist / es2015 / examples / typescript / dumbbell-plot-horizontal / index.ts View on Github external
series.columns.template.height = 0.01;
series.tooltip.pointerOrientation = "vertical";

var openBullet = series.bullets.create(am4charts.CircleBullet);
openBullet.locationX = 1;

var closeBullet = series.bullets.create(am4charts.CircleBullet);

closeBullet.fill = chart.colors.getIndex(4);
closeBullet.stroke = closeBullet.fill;

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

chart.scrollbarX = new am4core.Scrollbar();
chart.scrollbarY = new am4core.Scrollbar();