JavaScript Data GridTime Series

Version 36.1.0

Enterprise

This section covers how to chart time series data using Integrated Charts.

Integrated Charts supports the charting of time series data using line and area charts when a time axis is chosen instead of a category or numeric axis.

Time vs Category Axis Copy Link

A Time Axis is used to plot continuous date / time values, whereas a Category Axis is used to plot discrete values or categories.

The example below highlights the differences between time and category axes. Notice that the time axis contains all days for the range of values provided, whereas the category axis only shows axis labels for the discrete values provide.

main.ts

import { AgChartsEnterpriseModule } from "ag-charts-enterprise";
import {
  ClientSideRowModelModule,
  ColDef,
  ColumnApiModule,
  FirstDataRenderedEvent,
  GridApi,
  GridOptions,
  GridReadyEvent,
  ModuleRegistry,
  ValueFormatterParams,
  createGrid,
  enableDevValidations,
} from "ag-grid-community";
import {
  ColumnMenuModule,
  ContextMenuModule,
  IntegratedChartsModule,
  RowGroupingModule,
} from "ag-grid-enterprise";
import { getData } from "./data";

// Enable extended validations only for development
if (process.env.NODE_ENV !== "production") {
  enableDevValidations();
}

ModuleRegistry.registerModules([
  ColumnApiModule,
  ClientSideRowModelModule,
  IntegratedChartsModule.with(AgChartsEnterpriseModule),
  ColumnMenuModule,
  ContextMenuModule,
  RowGroupingModule,
]);

let gridApi: GridApi;
let currentChartRef: any;

function getColumnDefs() {
  return [
    { field: "date", valueFormatter: dateFormatter },
    { field: "avgTemp" },
  ];
}

const gridOptions: GridOptions = {
  columnDefs: getColumnDefs(),
  defaultColDef: { flex: 1 },
  cellSelection: true,
  popupParent: document.body,
  enableCharts: true,
  chartThemeOverrides: {
    line: {
      title: {
        enabled: true,
        text: "Average Daily Temperatures",
      },
      navigator: {
        enabled: true,
        height: 20,
        spacing: 25,
      },
      axes: {
        time: {
          label: {
            rotation: 0,
            format: "%d %b",
          },
        },
        category: {
          label: {
            rotation: 0,
            formatter: (params: any) => {
              // charts typings
              return formatDate(params.value);
            },
          },
        },
        number: {
          label: {
            formatter: (params: any) => {
              // charts typings
              return params.value + "°C";
            },
          },
        },
      },
    },
  },
  chartToolPanelsDef: {
    panels: ["data", "format"],
  },
  onGridReady: (params: GridReadyEvent) => {
    getData().then((rowData) => params.api.setGridOption("rowData", rowData));
  },
  onFirstDataRendered,
};

function onFirstDataRendered(params: FirstDataRenderedEvent) {
  if (currentChartRef) {
    currentChartRef.destroyChart();
  }

  currentChartRef = params.api.createRangeChart({
    chartContainer: document.querySelector("#myChart") as HTMLElement,
    cellRange: {
      columns: ["date", "avgTemp"],
    },
    suppressChartRanges: true,
    chartType: "line",
  });
}

function dateFormatter(params: ValueFormatterParams) {
  return params.value
    ? params.value.toISOString().substring(0, 10)
    : params.value;
}

function toggleAxis() {
  const axisBtn = document.querySelector("#axisBtn") as any;
  axisBtn.textContent = axisBtn.value;
  axisBtn.value = axisBtn.value === "time" ? "category" : "time";

  const columnDefs: ColDef[] = getColumnDefs();
  columnDefs.forEach((colDef) => {
    if (colDef.field === "date") {
      colDef.chartDataType = axisBtn.value;
    }
  });

  gridApi!.setGridOption("columnDefs", columnDefs);
}

function formatDate(date: Date | number) {
  return Intl.DateTimeFormat("en-GB", {
    day: "2-digit",
    month: "short",
    year: undefined,
  }).format(new Date(date));
}

const gridDiv = document.querySelector<HTMLElement>("#myGrid")!;
gridApi = createGrid(gridDiv, gridOptions);

if (typeof window !== "undefined") {
  // Attach external event handlers to window so they can be called from index.html
  (<any>window).toggleAxis = toggleAxis;
}

style.css

.wrapper {
    display: grid;
    grid-template-rows: 50px 300px 400px;
    gap: 10px;
    padding: 10px;
}

#buttonRow {
    grid-row: 1;
}

#axisBtn {
    text-transform: capitalize;
}

data.ts

export async function getData(delay: number = 100): Promise<any[]> {
    return new Promise((resolve) => setTimeout(() => resolve(data), delay));
}

const data = [
    { date: new Date(2019, 0, 1), avgTemp: 8.27 },
    { date: new Date(2019, 0, 5), avgTemp: 7.22 },
    { date: new Date(2019, 0, 8), avgTemp: 11.54 },
    { date: new Date(2019, 0, 11), avgTemp: 8.44 },
    { date: new Date(2019, 0, 22), avgTemp: 12.03 },
    { date: new Date(2019, 0, 23), avgTemp: 9.68 },
    { date: new Date(2019, 0, 24), avgTemp: 9.9 },
    { date: new Date(2019, 0, 25), avgTemp: 8.74 },
];

index.html

<div class="wrapper">
    <div id="buttonRow">
        <label>Switch Axis to: </label>
        <button id="axisBtn" onclick="toggleAxis()" value="time">Category</button>
    </div>
    <div id="myGrid" class="my-grid"></div>
    <div id="myChart" class="my-chart"></div>
</div>

Time Axis Configuration Copy Link

A Time Axis can be configured by setting chartDataType = 'time' on the column definition.

For the time axis to work correctly, the column must contain values in one of the following formats:

Date
string in ISO 8601 format
number representing the numeric timestamp

Additionally, if chartDataType is not specified and the column contains Date values, it will automatically use a time axis.

The following snippet shows how different time series values can be configured to enable a time axis:

const gridOptions = {
    columnDefs: [
        // date objects are treated as time by default
        { field: 'someDate' },
        { field: 'someIsoString', chartDataType: 'time' },
        { field: 'someTimestamp', chartDataType: 'time' },
    ],
    rowData: [
        {
            someDate: new Date('Mon Apr 17 2023 12:43:17'), // date object
            someIsoString: '2023-04-17T11:43:17.000Z', // ISO 8601 string
            someTimestamp: 1681735397000, // numeric timestamp (JavaScript format)
        },
        // ... more rows
    ],

    // other grid options ...
}

The following example demonstrates configuring numeric timestamps to use a time axis:

main.ts

import { AgChartsEnterpriseModule } from "ag-charts-enterprise";
import {
  ClientSideRowModelModule,
  FirstDataRenderedEvent,
  GridApi,
  GridOptions,
  GridReadyEvent,
  ModuleRegistry,
  createGrid,
  enableDevValidations,
} from "ag-grid-community";
import {
  ColumnMenuModule,
  ContextMenuModule,
  IntegratedChartsModule,
  RowGroupingModule,
} from "ag-grid-enterprise";
import { getData } from "./data";

// Enable extended validations only for development
if (process.env.NODE_ENV !== "production") {
  enableDevValidations();
}

ModuleRegistry.registerModules([
  ClientSideRowModelModule,
  IntegratedChartsModule.with(AgChartsEnterpriseModule),
  ColumnMenuModule,
  ContextMenuModule,
  RowGroupingModule,
]);

let gridApi: GridApi;

const gridOptions: GridOptions = {
  columnDefs: [
    { field: "timestamp", chartDataType: "time" },
    { field: "cpuUsage" },
  ],
  defaultColDef: { flex: 1 },
  cellSelection: true,
  popupParent: document.body,
  enableCharts: true,
  chartThemeOverrides: {
    area: {
      title: {
        enabled: true,
        text: "CPU Usage",
      },
      navigator: {
        enabled: true,
        height: 20,
        spacing: 25,
      },
      axes: {
        time: {
          label: {
            rotation: 315,
            format: "%H:%M",
          },
        },
        number: {
          label: {
            formatter: (params: any) => {
              // charts typings
              return params.value + "%";
            },
          },
        },
      },
    },
  },
  chartToolPanelsDef: {
    panels: ["data", "format"],
  },
  onGridReady: (params: GridReadyEvent) => {
    getData().then((rowData) => params.api.setGridOption("rowData", rowData));
  },
  onFirstDataRendered,
};

function onFirstDataRendered(params: FirstDataRenderedEvent) {
  params.api.createRangeChart({
    chartContainer: document.querySelector("#myChart") as HTMLElement,
    cellRange: {
      columns: ["timestamp", "cpuUsage"],
    },
    suppressChartRanges: true,
    chartType: "area",
  });
}

function formatTime(date: Date | number) {
  return Intl.DateTimeFormat("en-GB", {
    hour: "2-digit",
    minute: "2-digit",
    second: "2-digit",
  }).format(new Date(date));
}

gridApi = createGrid(
  document.querySelector<HTMLElement>("#myGrid")!,
  gridOptions,
);

style.css

.wrapper {
    display: flex;
    flex-direction: column;
    height: 100%;
}

#myGrid {
    height: 300px;
    flex: none;
}

.my-chart {
    height: 400px;
    flex: none;
}

data.ts

export async function getData(delay: number = 100): Promise<any[]> {
    return new Promise((resolve) => setTimeout(() => resolve(data), delay));
}

const data = [
    { timestamp: 1600983900792, cpuUsage: 99 },
    { timestamp: 1600983905792, cpuUsage: 83 },
    { timestamp: 1600983912792, cpuUsage: 59 },
    { timestamp: 1600983915792, cpuUsage: 70 },
    { timestamp: 1600983921792, cpuUsage: 99 },
    { timestamp: 1600983929792, cpuUsage: 74 },
    { timestamp: 1600983930792, cpuUsage: 90 },
    { timestamp: 1600983936792, cpuUsage: 96 },
    { timestamp: 1600983942792, cpuUsage: 39 },
    { timestamp: 1600983950792, cpuUsage: 39 },
    { timestamp: 1600983955792, cpuUsage: 65 },
    { timestamp: 1600983960792, cpuUsage: 100 },
    { timestamp: 1600983965792, cpuUsage: 99 },
    { timestamp: 1600983972792, cpuUsage: 39 },
    { timestamp: 1600983974792, cpuUsage: 83 },
    { timestamp: 1600983979792, cpuUsage: 42 },
    { timestamp: 1600983982792, cpuUsage: 68 },
    { timestamp: 1600983985792, cpuUsage: 81 },
    { timestamp: 1600983992792, cpuUsage: 99 },
    { timestamp: 1600983999792, cpuUsage: 81 },
    { timestamp: 1600984004792, cpuUsage: 81 },
    { timestamp: 1600984006792, cpuUsage: 57 },
    { timestamp: 1600984009792, cpuUsage: 67 },
    { timestamp: 1600984014792, cpuUsage: 49 },
    { timestamp: 1600984017792, cpuUsage: 81 },
    { timestamp: 1600984025792, cpuUsage: 42 },
    { timestamp: 1600984029792, cpuUsage: 77 },
    { timestamp: 1600984031792, cpuUsage: 58 },
    { timestamp: 1600984036792, cpuUsage: 30 },
    { timestamp: 1600984039792, cpuUsage: 52 },
    { timestamp: 1600984043792, cpuUsage: 61 },
    { timestamp: 1600984044792, cpuUsage: 45 },
    { timestamp: 1600984048792, cpuUsage: 47 },
    { timestamp: 1600984049792, cpuUsage: 66 },
    { timestamp: 1600984050792, cpuUsage: 46 },
    { timestamp: 1600984053792, cpuUsage: 36 },
    { timestamp: 1600984061792, cpuUsage: 77 },
    { timestamp: 1600984062792, cpuUsage: 39 },
    { timestamp: 1600984068792, cpuUsage: 39 },
    { timestamp: 1600984076792, cpuUsage: 49 },
    { timestamp: 1600984084792, cpuUsage: 96 },
    { timestamp: 1600984086792, cpuUsage: 31 },
    { timestamp: 1600984092792, cpuUsage: 67 },
    { timestamp: 1600984098792, cpuUsage: 32 },
    { timestamp: 1600984104792, cpuUsage: 92 },
    { timestamp: 1600984110792, cpuUsage: 81 },
    { timestamp: 1600984115792, cpuUsage: 90 },
    { timestamp: 1600984117792, cpuUsage: 47 },
    { timestamp: 1600984123792, cpuUsage: 97 },
    { timestamp: 1600984128792, cpuUsage: 72 },
    { timestamp: 1600984131792, cpuUsage: 98 },
    { timestamp: 1600984137792, cpuUsage: 74 },
    { timestamp: 1600984145792, cpuUsage: 34 },
    { timestamp: 1600984151792, cpuUsage: 78 },
    { timestamp: 1600984152792, cpuUsage: 50 },
    { timestamp: 1600984160792, cpuUsage: 77 },
    { timestamp: 1600984165792, cpuUsage: 99 },
    { timestamp: 1600984171792, cpuUsage: 89 },
    { timestamp: 1600984175792, cpuUsage: 61 },
    { timestamp: 1600984182792, cpuUsage: 53 },
    { timestamp: 1600984187792, cpuUsage: 56 },
    { timestamp: 1600984193792, cpuUsage: 73 },
    { timestamp: 1600984198792, cpuUsage: 69 },
    { timestamp: 1600984205792, cpuUsage: 33 },
    { timestamp: 1600984213792, cpuUsage: 65 },
    { timestamp: 1600984219792, cpuUsage: 60 },
    { timestamp: 1600984226792, cpuUsage: 95 },
    { timestamp: 1600984232792, cpuUsage: 86 },
    { timestamp: 1600984236792, cpuUsage: 38 },
    { timestamp: 1600984238792, cpuUsage: 67 },
    { timestamp: 1600984243792, cpuUsage: 83 },
    { timestamp: 1600984250792, cpuUsage: 99 },
    { timestamp: 1600984253792, cpuUsage: 41 },
    { timestamp: 1600984260792, cpuUsage: 32 },
    { timestamp: 1600984263792, cpuUsage: 61 },
    { timestamp: 1600984267792, cpuUsage: 34 },
    { timestamp: 1600984271792, cpuUsage: 80 },
    { timestamp: 1600984276792, cpuUsage: 94 },
    { timestamp: 1600984277792, cpuUsage: 34 },
    { timestamp: 1600984278792, cpuUsage: 80 },
    { timestamp: 1600984282792, cpuUsage: 84 },
    { timestamp: 1600984287792, cpuUsage: 31 },
    { timestamp: 1600984291792, cpuUsage: 71 },
    { timestamp: 1600984297792, cpuUsage: 74 },
    { timestamp: 1600984299792, cpuUsage: 99 },
    { timestamp: 1600984302792, cpuUsage: 82 },
    { timestamp: 1600984303792, cpuUsage: 36 },
    { timestamp: 1600984311792, cpuUsage: 97 },
    { timestamp: 1600984319792, cpuUsage: 97 },
    { timestamp: 1600984327792, cpuUsage: 62 },
    { timestamp: 1600984330792, cpuUsage: 97 },
    { timestamp: 1600984333792, cpuUsage: 34 },
    { timestamp: 1600984338792, cpuUsage: 67 },
    { timestamp: 1600984342792, cpuUsage: 99 },
    { timestamp: 1600984343792, cpuUsage: 77 },
    { timestamp: 1600984349792, cpuUsage: 51 },
    { timestamp: 1600984353792, cpuUsage: 75 },
    { timestamp: 1600984356792, cpuUsage: 41 },
    { timestamp: 1600984360792, cpuUsage: 81 },
    { timestamp: 1600984380792, cpuUsage: 61 },
    { timestamp: 1600984400792, cpuUsage: 71 },
    { timestamp: 1600984410792, cpuUsage: 77 },
    { timestamp: 1600984420792, cpuUsage: 62 },
    { timestamp: 1600984429792, cpuUsage: 55 },
    { timestamp: 1600984430792, cpuUsage: 45 },
    { timestamp: 1600984432792, cpuUsage: 50 },
    { timestamp: 1600984436792, cpuUsage: 60 },
    { timestamp: 1600984439792, cpuUsage: 69 },
];

index.html

<div class="wrapper">
    <div id="myGrid" class="my-grid"></div>
    <div id="myChart" class="my-chart"></div>
</div>

Time Axis Combination Chart Copy Link

A time axis can also be used in combination charts as shown in the following example.

For more details on how to configure a combination chart, see the Range Chart API example.

main.ts

import { AgChartsEnterpriseModule } from "ag-charts-enterprise";
import {
  AgAxisCaptionFormatterParams,
  AgCartesianSeriesTooltipRendererParams,
  AgCrosshairLabelRendererParams,
} from "ag-charts-types";
import {
  ClientSideRowModelModule,
  FirstDataRenderedEvent,
  GridApi,
  GridOptions,
  GridReadyEvent,
  ModuleRegistry,
  ValueParserParams,
  createGrid,
  enableDevValidations,
} from "ag-grid-community";
import {
  ColumnMenuModule,
  ContextMenuModule,
  IntegratedChartsModule,
  RowGroupingModule,
} from "ag-grid-enterprise";
import { getData } from "./data";

// Enable extended validations only for development
if (process.env.NODE_ENV !== "production") {
  enableDevValidations();
}

ModuleRegistry.registerModules([
  ClientSideRowModelModule,
  IntegratedChartsModule.with(AgChartsEnterpriseModule),
  ColumnMenuModule,
  ContextMenuModule,
  RowGroupingModule,
]);

let gridApi: GridApi;

const gridOptions: GridOptions = {
  columnDefs: [
    {
      field: "date",
      chartDataType: "time",
      valueFormatter: (params) => params.value.toISOString().substring(0, 10),
    },
    { field: "rain", chartDataType: "series", valueParser: numberParser },
    { field: "pressure", chartDataType: "series", valueParser: numberParser },
    { field: "temp", chartDataType: "series", valueParser: numberParser },
  ],
  defaultColDef: { flex: 1 },
  cellSelection: true,
  popupParent: document.body,
  enableCharts: true,
  chartThemeOverrides: {
    common: {
      padding: {
        top: 45,
      },
      axes: {
        number: {
          title: {
            enabled: true,
            formatter: (params: AgAxisCaptionFormatterParams) => {
              return params.boundSeries.map((s) => s.name).join(" / ");
            },
          },
        },
        time: {
          crosshair: {
            label: {
              renderer: (params: AgCrosshairLabelRendererParams) => ({
                text: formatDate(params.value),
              }),
            },
          },
        },
      },
    },
    bar: {
      series: {
        strokeWidth: 2,
        fillOpacity: 0.8,
      },
    },
    line: {
      series: {
        strokeWidth: 5,
        strokeOpacity: 0.8,
      },
    },
  },
  onGridReady: (params: GridReadyEvent) => {
    getData().then((rowData) => params.api.setGridOption("rowData", rowData));
  },
  onFirstDataRendered,
};

function onFirstDataRendered(params: FirstDataRenderedEvent) {
  params.api.createRangeChart({
    chartContainer: document.querySelector("#myChart") as HTMLElement,
    cellRange: {
      columns: ["date", "rain", "pressure", "temp"],
    },
    suppressChartRanges: true,
    seriesChartTypes: [
      { colId: "rain", chartType: "groupedColumn", secondaryAxis: false },
      { colId: "pressure", chartType: "line", secondaryAxis: true },
      { colId: "temp", chartType: "line", secondaryAxis: true },
    ],
    chartType: "customCombo",
    aggFunc: "sum",
  });
}

function numberParser(params: ValueParserParams) {
  const value = params.newValue;
  if (value === null || value === undefined || value === "") {
    return null;
  }
  return parseFloat(value);
}

function formatDate(date: Date | number) {
  return Intl.DateTimeFormat("en-GB", {
    day: "2-digit",
    month: "short",
    year: undefined,
  }).format(new Date(date));
}

// set up the grid after the page has finished loading
gridApi = createGrid(
  document.querySelector<HTMLElement>("#myGrid")!,
  gridOptions,
);

style.css

.wrapper {
    display: flex;
    flex-direction: column;
    height: 100%;
}

#myGrid {
    height: 300px;
    flex: none;
}

#myChart {
    height: 400px;
    flex: none;
}

data.ts

export async function getData(delay: number = 100): Promise<any[]> {
    return new Promise((resolve) => setTimeout(() => resolve(data), delay));
}

const data = [
    {
        date: new Date(2021, 0, 1),
        temp: 2.1,
        rain: 0.22,
        pressure: 1011.6,
    },
    {
        date: new Date(2021, 0, 2),
        temp: 3.8,
        rain: 0.6,
        pressure: 1015.9,
    },
    {
        date: new Date(2021, 0, 3),
        temp: 3.8,
        rain: 2.2,
        pressure: 1017.6,
    },
    {
        date: new Date(2021, 0, 4),
        temp: 4.3,
        rain: 3.4,
        pressure: 1019.4,
    },
    {
        date: new Date(2021, 0, 5),
        temp: 3.7,
        rain: 1.4,
        pressure: 1020,
    },
    {
        date: new Date(2021, 0, 6),
        temp: 4,
        rain: 6.42,
        pressure: 1019.5,
    },
    {
        date: new Date(2021, 0, 7),
        temp: 1.1,
        rain: 0,
        pressure: 1018.5,
    },
    {
        date: new Date(2021, 0, 8),
        temp: 0.6,
        rain: 0,
        pressure: 1018.6,
    },
    {
        date: new Date(2021, 0, 9),
        temp: 1.2,
        rain: 0.4,
        pressure: 1026.3,
    },
    {
        date: new Date(2021, 0, 10),
        temp: 1,
        rain: 0,
        pressure: 1026,
    },
    {
        date: new Date(2021, 0, 11),
        temp: 6.7,
        rain: 0,
        pressure: 1017.8,
    },
    {
        date: new Date(2021, 0, 12),
        temp: 6.9,
        rain: 7.99,
        pressure: 1014.1,
    },
    {
        date: new Date(2021, 0, 13),
        temp: 6.1,
        rain: 2.19,
        pressure: 1018.4,
    },
    {
        date: new Date(2021, 0, 14),
        temp: 5,
        rain: 27.53,
        pressure: 1016.7,
    },
    {
        date: new Date(2021, 0, 15),
        temp: 2.4,
        rain: 0.6,
        pressure: 1029.7,
    },
    {
        date: new Date(2021, 0, 16),
        temp: 4.9,
        rain: 5.22,
        pressure: 1020,
    },
    {
        date: new Date(2021, 0, 17),
        temp: 5.8,
        rain: 0,
        pressure: 1023.5,
    },
    {
        date: new Date(2021, 0, 18),
        temp: 5.3,
        rain: 0.2,
        pressure: 1021.2,
    },
    {
        date: new Date(2021, 0, 19),
        temp: 10.7,
        rain: 2.69,
        pressure: 1004.1,
    },
    {
        date: new Date(2021, 0, 20),
        temp: 10.2,
        rain: 5.36,
        pressure: 987.5,
    },
    {
        date: new Date(2021, 0, 21),
        temp: 6.6,
        rain: 5.76,
        pressure: 984.6,
    },
    {
        date: new Date(2021, 0, 22),
        temp: 4,
        rain: 0.2,
        pressure: 992.2,
    },
    {
        date: new Date(2021, 0, 23),
        temp: 2.1,
        rain: 0.8,
        pressure: 995.6,
    },
    {
        date: new Date(2021, 0, 24),
        temp: 0.6,
        rain: 3.19,
        pressure: 997.1,
    },
    {
        date: new Date(2021, 0, 25),
        temp: 1.8,
        rain: 0.92,
        pressure: 1009.6,
    },
    {
        date: new Date(2021, 0, 26),
        temp: 3,
        rain: 0.6,
        pressure: 1015.8,
    },
    {
        date: new Date(2021, 0, 27),
        temp: 8.4,
        rain: 1.2,
        pressure: 1011,
    },
    {
        date: new Date(2021, 0, 28),
        temp: 10.9,
        rain: 18.8,
        pressure: 1001.6,
    },
    {
        date: new Date(2021, 0, 29),
        temp: 9.5,
        rain: 14.98,
        pressure: 998.3,
    },
    {
        date: new Date(2021, 0, 30),
        temp: 5.4,
        rain: 16.71,
        pressure: 997.9,
    },
    {
        date: new Date(2021, 0, 31),
        temp: 3.1,
        rain: 1,
        pressure: 997.9,
    },
    {
        date: new Date(2021, 1, 1),
        temp: 4.1,
        rain: 0.4,
        pressure: 996.9,
    },
    {
        date: new Date(2021, 1, 2),
        temp: 9.3,
        rain: 5.79,
        pressure: 994.7,
    },
    {
        date: new Date(2021, 1, 3),
        temp: 8.7,
        rain: 1.71,
        pressure: 996.6,
    },
    {
        date: new Date(2021, 1, 4),
        temp: 7,
        rain: 4.19,
        pressure: 1008.3,
    },
    {
        date: new Date(2021, 1, 5),
        temp: 8.3,
        rain: 10.6,
        pressure: 1008.2,
    },
    {
        date: new Date(2021, 1, 6),
        temp: 6.8,
        rain: 2.7,
        pressure: 1006.8,
    },
    {
        date: new Date(2021, 1, 7),
        temp: 1.8,
        rain: 10.59,
        pressure: 1004.4,
    },
    {
        date: new Date(2021, 1, 8),
        temp: -0.8,
        rain: 0,
        pressure: 1003.7,
    },
    {
        date: new Date(2021, 1, 9),
        temp: -0.1,
        rain: 0,
        pressure: 1006.9,
    },
    {
        date: new Date(2021, 1, 10),
        temp: 0.3,
        rain: 0,
        pressure: 1012.3,
    },
    {
        date: new Date(2021, 1, 11),
        temp: -0.9,
        rain: 0,
        pressure: 1025.1,
    },
    {
        date: new Date(2021, 1, 12),
        temp: -0.5,
        rain: 0,
        pressure: null,
    },
    {
        date: new Date(2021, 1, 13),
        temp: -0.9,
        rain: 0,
        pressure: 1032,
    },
    {
        date: new Date(2021, 1, 14),
        temp: 2.9,
        rain: 0.6,
        pressure: 1025.7,
    },
    {
        date: new Date(2021, 1, 15),
        temp: 8.8,
        rain: 3,
        pressure: 1018.2,
    },
    {
        date: new Date(2021, 1, 16),
        temp: 9.5,
        rain: 2.61,
        pressure: 1010,
    },
    {
        date: new Date(2021, 1, 17),
        temp: 10,
        rain: 3.41,
        pressure: 1009.8,
    },
    {
        date: new Date(2021, 1, 18),
        temp: 9,
        rain: 3.61,
        pressure: 1003.8,
    },
    {
        date: new Date(2021, 1, 19),
        temp: 8.8,
        rain: 0,
        pressure: 1009.1,
    },
    {
        date: new Date(2021, 1, 20),
        temp: 13.4,
        rain: 0,
        pressure: 1002.1,
    },
    {
        date: new Date(2021, 1, 21),
        temp: 12,
        rain: 0.23,
        pressure: 1008.3,
    },
    {
        date: new Date(2021, 1, 22),
        temp: 9.9,
        rain: 1,
        pressure: 1014.8,
    },
    {
        date: new Date(2021, 1, 23),
        temp: 10.7,
        rain: 0.2,
        pressure: 1022.9,
    },
    {
        date: new Date(2021, 1, 24),
        temp: 13.3,
        rain: 0,
        pressure: 1022.4,
    },
    {
        date: new Date(2021, 1, 25),
        temp: 10.7,
        rain: 0.8,
        pressure: 1026.7,
    },
    {
        date: new Date(2021, 1, 26),
        temp: 7.2,
        rain: 0,
        pressure: 1037.3,
    },
    {
        date: new Date(2021, 1, 27),
        temp: 7,
        rain: 0.2,
        pressure: 1040.9,
    },
    {
        date: new Date(2021, 1, 28),
        temp: 6.3,
        rain: 0,
        pressure: 1037.2,
    },
    {
        date: new Date(2021, 2, 1),
        temp: 6.4,
        rain: 0,
        pressure: 1032,
    },
    {
        date: new Date(2021, 2, 2),
        temp: 5.8,
        rain: 0,
        pressure: 1030,
    },
    {
        date: new Date(2021, 2, 3),
        temp: 5.9,
        rain: 9.17,
        pressure: 1027.6,
    },
    {
        date: new Date(2021, 2, 4),
        temp: 5.5,
        rain: 2.6,
        pressure: 1025.1,
    },
    {
        date: new Date(2021, 2, 5),
        temp: 4.8,
        rain: 0.2,
        pressure: 1031.8,
    },
    {
        date: new Date(2021, 2, 6),
        temp: 4.5,
        rain: 0,
        pressure: 1033.8,
    },
    {
        date: new Date(2021, 2, 7),
        temp: 3.9,
        rain: 0,
        pressure: 1027.7,
    },
    {
        date: new Date(2021, 2, 8),
        temp: 5.2,
        rain: 0,
        pressure: 1023.8,
    },
    {
        date: new Date(2021, 2, 9),
        temp: 7.8,
        rain: 0.2,
        pressure: 1020,
    },
    {
        date: new Date(2021, 2, 10),
        temp: 8.1,
        rain: 1.1,
        pressure: 1007.4,
    },
    {
        date: new Date(2021, 2, 11),
        temp: 9.9,
        rain: 6.32,
        pressure: 996.3,
    },
    {
        date: new Date(2021, 2, 12),
        temp: 7.8,
        rain: 4.8,
        pressure: 1002.1,
    },
    {
        date: new Date(2021, 2, 13),
        temp: 7.3,
        rain: 5.1,
        pressure: 995.7,
    },
    {
        date: new Date(2021, 2, 14),
        temp: 8,
        rain: 0.48,
        pressure: 1012.9,
    },
    {
        date: new Date(2021, 2, 15),
        temp: 9.7,
        rain: 1.78,
        pressure: 1020.4,
    },
    {
        date: new Date(2021, 2, 16),
        temp: 10.2,
        rain: 0.4,
        pressure: 1027.5,
    },
    {
        date: new Date(2021, 2, 17),
        temp: 7.8,
        rain: 1.99,
        pressure: 1033.2,
    },
    {
        date: new Date(2021, 2, 18),
        temp: 7.9,
        rain: 0.2,
        pressure: 1028.8,
    },
    {
        date: new Date(2021, 2, 19),
        temp: 8.3,
        rain: 0.4,
        pressure: 1028.1,
    },
    {
        date: new Date(2021, 2, 20),
        temp: 8.1,
        rain: 0,
        pressure: 1031.2,
    },
    {
        date: new Date(2021, 2, 21),
        temp: 8.8,
        rain: 0,
        pressure: 1028.7,
    },
    {
        date: new Date(2021, 2, 22),
        temp: 9.5,
        rain: 0,
        pressure: 1026.5,
    },
    {
        date: new Date(2021, 2, 23),
        temp: 8.3,
        rain: 0,
        pressure: 1024.2,
    },
    {
        date: new Date(2021, 2, 24),
        temp: 8.9,
        rain: 0,
        pressure: 1020.9,
    },
    {
        date: new Date(2021, 2, 25),
        temp: 8.9,
        rain: 2.39,
        pressure: 1018.4,
    },
    {
        date: new Date(2021, 2, 26),
        temp: 9.3,
        rain: 3.1,
        pressure: 1010.8,
    },
    {
        date: new Date(2021, 2, 27),
        temp: 7.9,
        rain: 1.12,
        pressure: 1020.5,
    },
    {
        date: new Date(2021, 2, 28),
        temp: 10.7,
        rain: 0,
        pressure: 1022.8,
    },
    {
        date: new Date(2021, 2, 29),
        temp: 13,
        rain: 0,
        pressure: 1026.6,
    },
    {
        date: new Date(2021, 2, 30),
        temp: 13.4,
        rain: 0,
        pressure: 1027.6,
    },
    {
        date: new Date(2021, 2, 31),
        temp: 14.4,
        rain: 0,
        pressure: 1020.5,
    },
    {
        date: new Date(2021, 3, 1),
        temp: 11.1,
        rain: 0,
        pressure: 1024.4,
    },
    {
        date: new Date(2021, 3, 2),
        temp: 7.5,
        rain: 0,
        pressure: 1030.2,
    },
    {
        date: new Date(2021, 3, 3),
        temp: 7.7,
        rain: 0,
        pressure: 1032.1,
    },
    {
        date: new Date(2021, 3, 4),
        temp: 9.3,
        rain: 0,
        pressure: 1026,
    },
    {
        date: new Date(2021, 3, 5),
        temp: 6.9,
        rain: 0,
        pressure: 1018.3,
    },
    {
        date: new Date(2021, 3, 6),
        temp: 4.1,
        rain: 0,
        pressure: 1020.6,
    },
    {
        date: new Date(2021, 3, 7),
        temp: 3.6,
        rain: 0,
        pressure: 1023.7,
    },
    {
        date: new Date(2021, 3, 8),
        temp: 7.9,
        rain: 0,
        pressure: 1021.7,
    },
    {
        date: new Date(2021, 3, 9),
        temp: 9.3,
        rain: 1,
        pressure: 1013.5,
    },
    {
        date: new Date(2021, 3, 10),
        temp: 7.1,
        rain: 0.2,
        pressure: 1013.2,
    },
    {
        date: new Date(2021, 3, 11),
        temp: 5.2,
        rain: 0.28,
        pressure: 1019.1,
    },
    {
        date: new Date(2021, 3, 12),
        temp: 5.2,
        rain: 2,
        pressure: 1028.6,
    },
    {
        date: new Date(2021, 3, 13),
        temp: 6.5,
        rain: 0,
        pressure: 1032.6,
    },
    {
        date: new Date(2021, 3, 14),
        temp: 8.4,
        rain: 0,
        pressure: 1032.7,
    },
    {
        date: new Date(2021, 3, 15),
        temp: 6.5,
        rain: 0.4,
        pressure: 1033.2,
    },
    {
        date: new Date(2021, 3, 16),
        temp: 6.9,
        rain: 0,
        pressure: 1031.2,
    },
    {
        date: new Date(2021, 3, 17),
        temp: 8.2,
        rain: 0,
        pressure: 1029.1,
    },
    {
        date: new Date(2021, 3, 18),
        temp: 9.3,
        rain: 0,
        pressure: 1025.1,
    },
    {
        date: new Date(2021, 3, 19),
        temp: 10.5,
        rain: 0,
        pressure: 1021.4,
    },
    {
        date: new Date(2021, 3, 20),
        temp: 11.3,
        rain: 0,
        pressure: 1018.1,
    },
    {
        date: new Date(2021, 3, 21),
        temp: 10.1,
        rain: 0,
        pressure: 1021,
    },
    {
        date: new Date(2021, 3, 22),
        temp: 8.5,
        rain: 0,
        pressure: 1027.1,
    },
    {
        date: new Date(2021, 3, 23),
        temp: 9.5,
        rain: 0,
        pressure: 1028.6,
    },
    {
        date: new Date(2021, 3, 24),
        temp: 10.7,
        rain: 0,
        pressure: 1027.5,
    },
    {
        date: new Date(2021, 3, 25),
        temp: 8.9,
        rain: 0,
        pressure: 1028.2,
    },
    {
        date: new Date(2021, 3, 26),
        temp: 8.2,
        rain: 0,
        pressure: 1021.7,
    },
    {
        date: new Date(2021, 3, 27),
        temp: 9.8,
        rain: 0,
        pressure: 1010.5,
    },
    {
        date: new Date(2021, 3, 28),
        temp: 9.3,
        rain: 2.1,
        pressure: 1006.4,
    },
    {
        date: new Date(2021, 3, 29),
        temp: 8.3,
        rain: 3.61,
        pressure: 1011.2,
    },
    {
        date: new Date(2021, 3, 30),
        temp: 8.3,
        rain: 0,
        pressure: 1015,
    },
    {
        date: new Date(2021, 4, 1),
        temp: 8.7,
        rain: 0.2,
        pressure: 1016.4,
    },
    {
        date: new Date(2021, 4, 2),
        temp: 9.3,
        rain: 2.6,
        pressure: 1020.3,
    },
    {
        date: new Date(2021, 4, 3),
        temp: 9.7,
        rain: 0.6,
        pressure: 1013.1,
    },
    {
        date: new Date(2021, 4, 4),
        temp: 10.3,
        rain: 5.53,
        pressure: 999.7,
    },
    {
        date: new Date(2021, 4, 5),
        temp: 7.5,
        rain: 3.2,
        pressure: 1008.7,
    },
    {
        date: new Date(2021, 4, 6),
        temp: 7.6,
        rain: 1.9,
        pressure: 1007.3,
    },
    {
        date: new Date(2021, 4, 7),
        temp: 9.9,
        rain: 0,
        pressure: 1015.2,
    },
    {
        date: new Date(2021, 4, 8),
        temp: 12.2,
        rain: 10.41,
        pressure: 1005.8,
    },
    {
        date: new Date(2021, 4, 9),
        temp: 16.4,
        rain: 0,
        pressure: 997.2,
    },
    {
        date: new Date(2021, 4, 10),
        temp: 13.6,
        rain: 0.8,
        pressure: 1000.1,
    },
    {
        date: new Date(2021, 4, 11),
        temp: 12.9,
        rain: 0.6,
        pressure: 1007,
    },
    {
        date: new Date(2021, 4, 12),
        temp: 13,
        rain: 1,
        pressure: 1008.5,
    },
    {
        date: new Date(2021, 4, 13),
        temp: 11.6,
        rain: 6.61,
        pressure: 1006.1,
    },
    {
        date: new Date(2021, 4, 14),
        temp: 10.2,
        rain: 1.2,
        pressure: 1009,
    },
    {
        date: new Date(2021, 4, 15),
        temp: 10.3,
        rain: 6.63,
        pressure: 1001.2,
    },
    {
        date: new Date(2021, 4, 16),
        temp: 10.5,
        rain: 6.39,
        pressure: 998,
    },
    {
        date: new Date(2021, 4, 17),
        temp: 11.5,
        rain: 11.32,
        pressure: 1004.6,
    },
    {
        date: new Date(2021, 4, 18),
        temp: 11.1,
        rain: 5.99,
        pressure: 1013.2,
    },
    {
        date: new Date(2021, 4, 19),
        temp: 12.4,
        rain: 6,
        pressure: 1017.4,
    },
    {
        date: new Date(2021, 4, 20),
        temp: 11.2,
        rain: 0.8,
        pressure: 1013.4,
    },
    {
        date: new Date(2021, 4, 21),
        temp: 11.8,
        rain: 2.16,
        pressure: 996.9,
    },
    {
        date: new Date(2021, 4, 22),
        temp: 10.8,
        rain: 7.39,
        pressure: 1002.7,
    },
    {
        date: new Date(2021, 4, 23),
        temp: 10.1,
        rain: 2.3,
        pressure: 1008.3,
    },
    {
        date: new Date(2021, 4, 24),
        temp: 10.3,
        rain: 12.26,
        pressure: 1003.1,
    },
    {
        date: new Date(2021, 4, 25),
        temp: 11,
        rain: 4.38,
        pressure: 1013.4,
    },
    {
        date: new Date(2021, 4, 26),
        temp: 11.5,
        rain: 0.8,
        pressure: 1014.7,
    },
    {
        date: new Date(2021, 4, 27),
        temp: 14.5,
        rain: 0,
        pressure: 1020,
    },
    {
        date: new Date(2021, 4, 28),
        temp: 14.9,
        rain: 0.6,
        pressure: 1023.2,
    },
    {
        date: new Date(2021, 4, 29),
        temp: 16.2,
        rain: 0.2,
        pressure: 1026.5,
    },
    {
        date: new Date(2021, 4, 30),
        temp: 13.2,
        rain: 0,
        pressure: 1027.6,
    },
    {
        date: new Date(2021, 4, 31),
        temp: 16,
        rain: 0.2,
        pressure: 1021.6,
    },
];

index.html

<div class="wrapper">
    <div id="myGrid"></div>
    <div id="myChart"></div>
</div>

Getting Started

AI Features

Layout & Styling

Charting

Core Features

Advanced Features

JavaScript Data GridTime Series

Time vs Category Axis Copy Link

Time Axis Configuration Copy Link

Time Axis Combination Chart Copy Link