title: Angular - Custom DaterangePicker in Highchart
body: <p>I create a highcharts similar to <a href="https://www.highcharts.com/stock/demo/compare" rel="nofollow noreferrer">this</a> in angular (v8). I want to remove default filter an create one custom with help of <a href="https://www.npmjs.com/package/ngx-daterangepicker-material" rel="nofollow noreferrer">ngx daterangepicker</a>. I need to filter the array but is a <a href="https://www.highcharts.com/samples/data/msft-c.json" rel="nofollow noreferrer">complex array</a>. I try to create multiple iterations with foreach but doens´t work.</p>
  
  <p>This is my TS code</p>
  
  <pre><code>import { Component, OnInit } from "@angular/core";
  import { fadeAnimation } from "../../../../animations.component";
  import { StockChart } from "angular-highcharts";
  import { HttpClient } from "@angular/common/http";
  import * as Highcharts from "highcharts";
  import * as moment from "moment";
  declare let AdminLTE: any;
  
  @Component({
    selector: "app-metergraph",
    templateUrl: "./graph.component.html",
    styleUrls: ["./graph.component.scss"],
    animations: [fadeAnimation]
  })
  export class MetersGraphComponent implements OnInit {
    chart: StockChart;
    seriesOptions: any = [];
    ranges: any;
    pickerlang: any;
    seriesCounter = 0;
    names = ["MSFT", "AAPL"];
  
    constructor(private http: HttpClient) {}
  
    ngOnInit(): void {
      AdminLTE.init();
      moment.locale("es");
      this.names.forEach((element, i) =&gt; {
        this.http
          .get(
            "https://www.highcharts.com/samples/data/" +
              element.toLowerCase() +
              "-c.json"
          )
          .forEach((data: any) =&gt; {
            this.seriesOptions[i] = {
              name: element,
              data: data
            };
            this.seriesCounter += 1;
            if (this.seriesCounter === this.names.length) {
              this.createGraph();
            }
          });
      });
  
      this.ranges = {
        Today: [moment(), moment()],
        Yesterday: [moment().subtract(1, "days"), moment().subtract(1, "days")],
        "Last 7 Days": [moment().subtract(6, "days"), moment()],
        "Last 30 Days": [moment().subtract(29, "days"), moment()],
        "This Month": [moment().startOf("month"), moment().endOf("month")],
        "Last Month": [
          moment()
            .subtract(1, "month")
            .startOf("month"),
          moment()
            .subtract(1, "month")
            .endOf("month")
        ]
      };
  
      this.pickerlang = {
        format: "DD/MM/YYYY",
        direction: "ltr",
        weekLabel: "W",
        cancelLabel: "Cancelar",
        applyLabel: "Aceptar",
        clearLabel: "",
        daysOfWeek: moment.weekdaysMin(),
        monthNames: moment.monthsShort(),
        firstDay: 1
      };
  
      Highcharts.setOptions({
        lang: {
          loading: "Cargando...",
          months: [
            "Enero",
            "Febrero",
            "Marzo",
            "Abril",
            "Mayo",
            "Junio",
            "Julio",
            "Agosto",
            "Septiembre",
            "Octubre",
            "Noviembre",
            "Diciembre"
          ],
          weekdays: [
            "Domingo",
            "Lunes",
            "Martes",
            "Miércoles",
            "Jueves",
            "Viernes",
            "Sábado"
          ],
          shortMonths: [
            "Ene",
            "Feb",
            "Mar",
            "Abr",
            "May",
            "Jun",
            "Jul",
            "Ago",
            "Sep",
            "Oct",
            "Nov",
            "Dic"
          ],
          rangeSelectorFrom: "Desde",
          rangeSelectorTo: "Hasta",
          rangeSelectorZoom: "Período",
          downloadPNG: "Descargar imagen PNG",
          downloadJPEG: "Descargar imagen JPEG",
          downloadPDF: "Descargar imagen PDF",
          downloadSVG: "Descargar imagen SVG",
          downloadCSV: "Descargar imagen CSV",
          downloadXLS: "Descargar imagen XLS",
          printChart: "Imprimir",
          resetZoom: "Reiniciar zoom",
          resetZoomTitle: "Reiniciar zoom",
          viewData: "Ver tabla",
          openInCloud: "Ver en web",
          thousandsSep: ",",
          decimalPoint: "."
        }
      });
    }
  
    createGraph() {
      this.chart = new StockChart({
        xAxis: {
          crosshair: {
            width: 1,
            color: "red"
          }
        },
        rangeSelector: {
          enabled: false
        },
        chart: {
          zoomType: "x",
          panning: true,
          panKey: "shift"
        },
  
        plotOptions: {
          series: {
            showInNavigator: true
          }
        },
        tooltip: {
          pointFormat:
            '&lt;span style="color:{series.color}"&gt;{series.name}&lt;/span&gt;: &lt;b&gt;{point.y} litros&lt;/b&gt;&lt;br/&gt;',
          valueDecimals: 2,
          split: true
        },
        series: this.seriesOptions
      });
    }
  
    change(data: any) {
      console.log(data["startDate"].toJSON().substring(0, 10));
      console.log(data["endDate"].toJSON().substring(0, 10));
      this.seriesOptions.forEach((element: any) =&gt; {
        // console.log(element);
        element["data"].forEach(index =&gt; {
          //console.log(index[0]);
          index.forEach((datetime: any) =&gt; {
            console.log(datetime); //MULTIPLE ITERATIONS FAIL, MAYBE HIGHCHART HAVE A FUNCTION TO FILTER ARRAY WITH  FIELD VALUES.
          });
        });
        // console.log(element["data"]);
        //console.log(element["data"][0]);
      });
    }
  }
  </code></pre>
  
  <p>And this is my HTML</p>
  
  <pre><code>&lt;div class="content-wrapper"&gt;
    &lt;section class="content-header"&gt;
      &lt;section class="content"&gt;
        &lt;div class="panel panel-default"&gt;
          &lt;div class="panel-heading"&gt;
            &lt;h5&gt;
              &lt;b&gt;Test&lt;/b&gt;
            &lt;/h5&gt;
          &lt;/div&gt;
          &lt;div class="panel-body"&gt;
            &lt;input type="text" ngxDaterangepickerMd [locale]="pickerlang" [(ngModel)]="selected" class="form-control"
              placeholder="Rango de fecha" (ngModelChange)="change($event)" [ranges]="ranges"
              [showCustomRangeLabel]="true" [alwaysShowCalendars]="true" /&gt;
            &lt;div [chart]="chart"&gt;&lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/section&gt;
    &lt;/section&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Finally i add a <a href="https://i.stack.imgur.com/K3Y3w.png" rel="nofollow noreferrer">screen</a> of page.</p>
  
  <p>So the question is: How can i filter this type of array with values of the timepicker ? Iteration fail. Maybe highchart has a function to send fields values and filter.</p>