How to use the igniteui-angular-charts/ES5/igx-size-scale-component.IgxSizeScaleComponent function in igniteui-angular-charts

To help you get started, we’ve selected a few igniteui-angular-charts 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 IgniteUI / igniteui-angular-samples / src / app / maps / geo-map-type-scatter-bubble-series / map-type-scatter-bubble-series.component.ts View on Github external
public addSeriesWith(locations: any[]) {
        const sizeScale = new IgxSizeScaleComponent();
        sizeScale.minimumValue = 4;
        sizeScale.maximumValue = 60;

        const brushes = [
            "rgba(14, 194, 14, 0.4)",  // semi-transparent green
            "rgba(252, 170, 32, 0.4)", // semi-transparent orange
            "rgba(252, 32, 32, 0.4)"  // semi-transparent red
        ];

        const brushScale = new IgxValueBrushScaleComponent();
        brushScale.brushes = brushes;
        brushScale.minimumValue = 0;
        brushScale.maximumValue = 30;

        const symbolSeries = new IgxGeographicProportionalSymbolSeriesComponent();
        symbolSeries.dataSource = locations;
github IgniteUI / igniteui-angular-samples / src / app / charts / zoomslider / zoomslider-overview / zoomslider-overview.component.ts View on Github external
public createSeries(chart: IgxDataChartComponent) {
        const sizeScale1 = new IgxSizeScaleComponent();
        sizeScale1.minimumValue = 15;
        sizeScale1.maximumValue = 40;
        const sizeScale2 = new IgxSizeScaleComponent();
        sizeScale2.minimumValue = 5;
        sizeScale2.maximumValue = 15;

        const xAxis = chart.actualAxes.filter(a => a.isNumeric)[0] as IgxNumericXAxisComponent;
        const yAxis = chart.actualAxes.filter(a => a.isNumeric)[1] as IgxNumericYAxisComponent;

        const series1 = new IgxBubbleSeriesComponent();
        series1.title = "High Income Country";
        series1.dataSource = SampleScatterStats.getCountriesWithHighIncome();
        series1.showDefaultTooltip = false;
        series1.xMemberPath = "population";
        series1.yMemberPath = "gdpTotal";
        series1.radiusMemberPath = "gdpPerCapita";
        series1.radiusScale = sizeScale1;
        series1.markerType = MarkerType.Circle;
        series1.xAxis = xAxis;
github IgniteUI / igniteui-angular-samples / src / app / charts / data-chart / data-chart-type-scatter-series / data-chart-type-scatter-series.component.ts View on Github external
series2.name = "series2";
            series2.title = "Poor Countries";
            series2.markerType = MarkerType.Circle;
            series2.dataSource = SampleScatterStats.getCountriesWithLowIncome();
            series2.showDefaultTooltip = true;
            series2.xMemberPath = "population";
            series2.yMemberPath = "gdpTotal";
            series2.xAxis = this.xAxis;
            series2.yAxis = this.yAxis;

            this.chart.series.clear();
            this.chart.series.add(series1);
            this.chart.series.add(series2);

        } else if (seriesType === "Bubble") {
            const sizeScale = new IgxSizeScaleComponent();
            sizeScale.minimumValue = 10;
            sizeScale.maximumValue = 60;

            const brushScale1 = new IgxValueBrushScaleComponent();
            brushScale1.brushes = ["#FFFFFF", "#b56ffc"];
            brushScale1.minimumValue = 10;
            brushScale1.maximumValue = 60;

            const series1 = new IgxBubbleSeriesComponent();
            series1.name = "series1";
            series1.title = "Large Countries";
            series1.markerType = MarkerType.Circle;
            series1.dataSource = SampleScatterStats.getCountriesWithLargePop();
            series1.showDefaultTooltip = true;
            series1.xMemberPath = "population";
            series1.yMemberPath = "gdpTotal";
github IgniteUI / igniteui-angular-samples / src / app / charts / zoomslider / zoomslider-overview / zoomslider-overview.component.ts View on Github external
public createSeries(chart: IgxDataChartComponent) {
        const sizeScale1 = new IgxSizeScaleComponent();
        sizeScale1.minimumValue = 15;
        sizeScale1.maximumValue = 40;
        const sizeScale2 = new IgxSizeScaleComponent();
        sizeScale2.minimumValue = 5;
        sizeScale2.maximumValue = 15;

        const xAxis = chart.actualAxes.filter(a => a.isNumeric)[0] as IgxNumericXAxisComponent;
        const yAxis = chart.actualAxes.filter(a => a.isNumeric)[1] as IgxNumericYAxisComponent;

        const series1 = new IgxBubbleSeriesComponent();
        series1.title = "High Income Country";
        series1.dataSource = SampleScatterStats.getCountriesWithHighIncome();
        series1.showDefaultTooltip = false;
        series1.xMemberPath = "population";
        series1.yMemberPath = "gdpTotal";
        series1.radiusMemberPath = "gdpPerCapita";
github IgniteUI / igniteui-angular-samples / src / app / charts / data-chart / data-chart-overview / data-chart-overview.component.ts View on Github external
public createSeries(data: any, title: string) {
        const sizeScale = new IgxSizeScaleComponent();
        sizeScale.minimumValue = 10;
        sizeScale.maximumValue = 60;

        const id = "series" + this.chart.series.count;

        const series1 = new IgxBubbleSeriesComponent();
        series1.name = id;
        series1.title = title;
        series1.markerType = MarkerType.Circle;
        series1.dataSource = data;
        series1.showDefaultTooltip = true;
        series1.xMemberPath = "population";
        series1.yMemberPath = "gdpTotal";
        series1.radiusMemberPath = "gdpPerCapita";
        series1.radiusScale = sizeScale;
        series1.xAxis = this.xAxis;
github IgniteUI / igniteui-angular-samples / src / app / charts / data-chart / data-chart-navigation / data-chart-navigation.component.ts View on Github external
public createSeries() {
        const sizeScale = new IgxSizeScaleComponent();
        sizeScale.minimumValue = 10;
        sizeScale.maximumValue = 60;

        const series = new IgxBubbleSeriesComponent();
        series.title = "Countries";
        series.dataSource = SampleScatterStats.getCountries();
        series.showDefaultTooltip = true;
        series.xMemberPath = "population";
        series.yMemberPath = "gdpTotal";
        series.radiusMemberPath = "gdpPerCapita";
        series.radiusScale = sizeScale;
        series.xAxis = this.xAxis;
        series.yAxis = this.yAxis;

        this.chart.series.clear();
        this.chart.series.add(series);

igniteui-angular-charts

Ignite UI Angular charting components for building rich data visualizations for modern web apps.

Infragistics(R) Ultimate lice…
Latest version published 20 days ago

Package Health Score

60 / 100
Full package analysis

Popular igniteui-angular-charts functions