Ngx charts bubble chart advice

Question

I am trying to get a bubble chart to populate using ngx-charts. The problem is the swimlane documentation on it is almost non-existent and I haven't been able to find any good examples.

I have read the open source code that swimlane provides and have created what I believe are the appropriate variables in Typescript and have constructed my data points using an example line graph I found using the same tools. However the chart still appears empty on the page.

HTML:

<ngx-charts-bubble-chart
      [view]="view"
      [results]="bubbleDemoTempData"
      [showGridLines]="showGridLines"
      [legend]="showLegend"
      [legendTitle]="legendTitle"
      [xAxis]="showXAxis"
      [yAxis]="showYAxis"
      [showXAxisLabel]="showXAxisLabel"
      [showYAxisLabel]="showYAxisLabel"
      [xAxisLabel]="xAxisLabel"
      [yAxisLabel]="yAxisLabel"
      [autoScale]="autoScale"
      [scheme]="colorScheme"
      [minRadius]="minRadius"
      [maxRadius]="maxRadius"
      (select)="onSelectBubbleInteractivePoint($event)"
      *ngIf="dataTypeDisplay == 'GraphForm'" 
      [@fade]>
</ngx-charts-bubble-chart>

TypeScript:

view: any[] = [700, 400];

// options
showXAxis = true;
showXAxisLabel = true;
showYAxisLabel = true;
showYAxis = true;
gradient = false;
showLegend = true;
legendTitle = "Hi";
xAxisLabel = 'Number';
yAxisLabel = 'Color Value';
showGridLines = true;
autoScale=true;
minRadius = 1;
maxRadius = 1;

colorScheme = {
    domain: ['#5AA454', '#A10A28', '#C7B42C', '#AAAAAA']
};

Data Points:

public multi = [
    {
      "name": "Germany",
      "series": [
        {
          "name": "2010",
          "value": 7300000
        },
        {
          "name": "2011",
          "value": 8940000
        }
      ]
    },

    {
      "name": "USA",
      "series": [
        {
          "name": "2010",
          "value": 7870000
        },
        {
          "name": "2011",
          "value": 8270000
        }
      ]
    },

    {
      "name": "France",
      "series": [
        {
          "name": "2010",
          "value": 5000002
        },
        {
          "name": "2011",
          "value": 5800000
        }
      ]
    }
  ];

I would appreciate if someone could give me some advice on correctly populating the chart.

Answer 1

I was eventually able to get it worked out. I will post the same 3 code snippets from above here in their updated forms.

HTML:

<ngx-charts-bubble-chart
        [results]="bubbleDemoTempData"
        [view]="view"
        [showGridLines]="showGridLines"
        [legend]="legend"
        [legendTitle]="legendTitle"
        [legendPosition]="legendPOsition"
        [xAxis]="XAxis"
        [yAxis]="YAxis"
        [showXAxisLabel]="showXAxisLabel"
        [showYAxisLabel]="showYAxisLabel"
        [xAxisLabel]="xAxisLabel"
        [yAxisLabel]="yAxisLabel"
        [trimXAxisTicks]="trimXAxisTicks"
        [trimYAxisTicks]="trimYAxisTicks"
        [maxXAxisTickLength]="maxXAxisTickLength"
        [maxYAxisTickLength]="maxYAxisTickLength"
        [roundDomains]="roundDomains"
        [minRadius]="minRadius"
        [maxRadius]="maxRadius"
        [autoScale]="autoScale"
        [schemeType]="schemeType"
        (select)="onSelectBubbleInteractivePoint($event)"
        *ngIf="dataTypeDisplay == 'GraphForm'" 
        [@fade]>
    </ngx-charts-bubble-chart>

TypeScript:

view: any[] = [700, 400];

// options
showGridLines = true;
legend = true;
legendTitle = "Dots Mf'er";
legendPosition = "right";
xAxis = true;
yAxis = true;
showXAxisLabel = true;
showYAxisLabel = true;
xAxisLabel = "LR";
yAxisLabel = "Jobs";
trimXAxisTicks = true;
trimYAxisTicks = true;
rotateXAxisTicks = true;
maxXAxisTickLength = 16;
maxYAxisTickLength = 16;
// xAxisTicks;
// yAxisTicks;
roundDomains = false;
maxRadius = 5;
minRadius = 5;
autoScale = true;
schemeType = "ordinal";
tooltipDisabled = false;

Data Points:

public bubbleDemoTempData = [
        {
          "name": "Example1",
          "series": [
            {
              "name": "a",
              "x": 0,
              "y": 0,
              "r": 1
            },
            {
                "name": "b",
                "x":10,
                "y":3,
                "r":10
            }
          ]
        },
        {
            "name":"Example2",
            "series": [
                {
                    "name":"1",
                    "x":20,
                    "y":1,
                    "r":30
                },
                {
                    "name":"2",
                    "x":3,
                    "y":3,
                    "r":500
                }
            ]
        }
      ];

This works and definitely answers my question from above. That being said the grid lines are still not appearing but that's an entirely different issue that I may have to post a new ticket for.