Angular bubble chart with apexcharts

Question

How can I do a bubble chart like this with apexcharts with only two date (Xaxis) and this format MM/YYYY with apexcharts or with any other Angular chart library

This is very important for me please help

Answer 1

To data point add xAxis as date ms. Use xAxis label formatter to get MM/yyyy.

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  @ViewChild("chart") chart: ChartComponent;
  public chartOptions: Partial<ChartOptions>;

  constructor() {
    this.chartOptions = {
      xaxis: {
        tickAmount: 12,
        type: "datetime",
        labels: {
          datetimeFormatter: {
            year: 'yyyy',
            month: 'MM/yyyy',
            day: 'MM/yyyy',
            hour: 'HH:mm'
          }
        }
      },
      series: [
        {
          name: "Bubble1",
          data: [[new Date().getTime(), 43, 28]]
        },
        {
          name: "Bubble2",
          data: [[new Date().getTime(), 60, 28]
        }
      ],
      chart: {
        height: 350,
        type: "bubble"
      },
      dataLabels: {
        enabled: false
      },
      fill: {
        opacity: 0.8
      },
      title: {
        text: "Simple Bubble Chart"
      },
      yaxis: {
        max: 70
      }
    };
  }
}

Working example: https://codesandbox.io/s/broken-feather-gsnouq?file=/src/app/app.component.ts