Sample - mixing the Scatter and StepLine series

[pauloanalista]

Mixing the Scatter and StepLine series

Does anyone have any examples?

[pauloanalista]

I managed to build an example, I'll leave the code below that can help someone else.

HTML

<div id="chart">
        <apx-chart [series]="chartOptions.series" [chart]="chartOptions.chart" [tooltip]="chartOptions.tooltip"
      [xaxis]="chartOptions.xaxis" [fill]="chartOptions.fill" [tooltip]="chartOptions.tooltip"
      [stroke]="chartOptions.stroke" [legend]="chartOptions.lengend" [markers]="chartOptions.markers"></apx-chart>
  </div>

TS

import { Component, ViewChild } from "@angular/core";
import * as ApexCharts from "apexcharts";

import {
  ChartComponent,
  ApexAxisChartSeries,
  ApexChart,
  ApexFill,
  ApexYAxis,
  ApexTooltip,
  ApexTitleSubtitle,
  ApexXAxis
} from "ng-apexcharts";

export type ChartOptions = {
  series: ApexAxisChartSeries;
  chart: ApexChart;
  xaxis: ApexXAxis;
  yaxis: ApexYAxis | ApexYAxis[];
  markers: ApexMarkers;
  title: ApexTitleSubtitle;
  labels: string[];
  stroke: ApexStroke;
  dataLabels: any; // ApexDataLabels;
  fill: ApexFill;
  tooltip: ApexTooltip;
  legend: ApexLegend;
};


@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {
  @ViewChild("chart") chart: ChartComponent;
  public chartOptions: Partial<ChartOptions>;

  constructor() {
    this.chartOptions = {
      chart: {
        height: 350,
        type: 'line',
      },
      fill: {
        type: 'solid',
      },
      markers: { size: [5, 12] },
      stroke: {
        curve: "stepline"
      },
      tooltip: {
        shared: false,
        intersect: true,
      },
      legend: {
        show: true
      },
      xaxis: {
        type: 'numeric',
        min: 0,
        max: 12,
        tickAmount: 12
      },
      series: [
        {
          name: 'Points',
          type: 'scatter',
          data: [
            { x: 1, y: 30 },
            { x: 2, y: 25 },
            { x: 3, y: 30 },
            { x: 4, y: 35 },
            { x: 5, y: 25 }
          ]
        },
        {
          name: 'Line',
          type: 'line',
          data: [
            { x: 1, y: 32 },
            { x: 2, y: 22 },
            { x: 3, y: 32 },
            { x: 4, y: 32 },
            { x: 5, y: 22 }
          ]
        }],
    };
    //var chart = new ApexCharts(document.querySelector("#chart"), this.chartOptions);
    //chart.render();
  }

  getRandomInt(min, max) {
    min = Math.ceil(min);
    max = Math.floor(max);
    return Math.floor(Math.random() * (max - min)) + min;
  }

  montaDadosFakePassageiro() {
    let vet = [];

    for (let h = 0; h <= 23; h++) {
      for (let p = 20; p <= 60; p++) {
        vet.push({ x: h, y: this.getRandomInt(p, 60) });
      }
    }
    return vet;
  }

  montaDadosFakeMediaPassageiro() {
    let vet = [];

    for (let h = 0; h <= 23; h++) {
      vet.push({ x: h, y: this.getRandomInt(30, 55) });
    }
    return vet;
  }


}