docs: add example of custom date formatting on x axis

Author: rakannimer

apps/docs/docs/examples/line-chart.mdx

@@ -158,6 +158,27 @@ This example demonstrates a Material Design Line Chart with default settings.
   )}
 </ContextProvider>
 
+### Dates in x axis with custom formatting
+
+<ContextProvider>
+  {({ branch, theme }) => (
+    <iframe
+      src={`https://codesandbox.io/embed/github/RakanNimer/react-google-charts/tree/${branch}/sandboxes/line-chart/formatted-date?fontsize=14&hidenavigation=1&module=%2FApp.tsx&theme=${theme}`}
+      style={{
+        width: "100%",
+        height: "500px",
+        border: 0,
+        borderRadius: "4px",
+        overflow: "hidden",
+      }}
+      title="Dates in x axis with custom formatting Line Chart"
+      allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
+      sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
+      loading="lazy"
+    ></iframe>
+  )}
+</ContextProvider>
+
 ### Material Design Dual Y-Axis Chart
 
 This example shows how to create a Material Design Line Chart with dual Y-axes.

sandboxes/line-chart/formatted-date/App.tsx

@@ -0,0 +1,42 @@
+import React from "react";
+import { Chart } from "react-google-charts";
+
+export const data = [
+  ["Time", "Sales", "Expenses"],
+  [new Date(2022, 4, 15, 9, 30), 1030, 540],
+  [new Date(2022, 4, 17, 10, 30), 1000, 400],
+  [new Date(2022, 5, 13, 11, 30), 1170, 460],
+  [new Date(2022, 6, 13, 12, 30), 660, 1120],
+];
+
+export const options = {
+  title: "Company Performance",
+  curveType: "function",
+  legend: { position: "bottom" },
+  hAxis: {
+    title: "Date",
+    format: "MMM dd, yyyy", // Custom date format
+    gridlines: { count: 3 }, // Controls the number of gridlines
+  },
+};
+
+export function App() {
+  return (
+    <Chart
+      chartType="LineChart"
+      width="100%"
+      height="400px"
+      data={data}
+      options={options}
+      formatters={[
+        {
+          column: 0,
+          type: "DateFormat",
+          options: {
+            timeZone: 0,
+          },
+        },
+      ]}
+    />
+  );
+}

sandboxes/line-chart/formatted-date/index.tsx

@@ -0,0 +1,7 @@
+import React from "react";
+import { render } from "react-dom";
+
+import { App } from "./App";
+
+const rootElement = document.getElementById("root");
+render(<App />, rootElement);

sandboxes/line-chart/formatted-date/package.json

@@ -0,0 +1,15 @@
+{
+  "description": "Basic line chart with formatted time dates on hAxis",
+  "main": "index.tsx",
+  "dependencies": {
+    "react": "17.0.2",
+    "react-dom": "17.0.2",
+    "react-google-charts": "*",
+    "react-scripts": "4.0.3"
+  },
+  "devDependencies": {
+    "@types/react": "17.0.20",
+    "@types/react-dom": "17.0.9",
+    "typescript": "4.4.2"
+  }
+}