Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
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;
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;
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";
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";
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;
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);