docs: Chart options docs (#275)

* Chart options docs

* removing node 10 from matrix

* adding test placeholder

* semantics improvement

* remove size workflow

* Chart additional options

* clean up Chart options docs

* Chart Component Props Docs

* semantics

Author: lautapercuspain

docs/src/pages/docs/api.md

@@ -58,6 +58,85 @@ const data = React.useMemo(
 
 The individual datums in a series' `data` array can be anything you want! Just remember that most of the types for React Charts will require you to pass the type of your `Datum`s as the first generic type to work correctly.
 
+## Chart Component Props
+
+The Chart component props can be passed in its `options` property object:
+
+```javascript
+<Chart
+  options={{
+    data,
+    primaryAxis,
+    secondaryAxes,
+  }}
+/>
+```
+
+The data property should be an array of series, each series should be an array of objects.
+Each object should have two properties, by convention called primary and secondary, but it can be named as you want. One of these properties will be used as the primary axis and the other as the secondary axes.
+
+```javascript
+const data = [
+  {
+    label: 'Series 1',
+    data: [
+      {
+        primary: '2022-02-03T00:00:00.000Z',
+        likes: 130,
+      },
+      {
+        primary: '2022-03-03T00:00:00.000Z',
+        likes: 150,
+      },
+    ],
+  },
+  {
+    label: 'Series 2',
+    data: [
+      {
+        primary: '2022-04-03T00:00:00.000Z',
+        likes: 200,
+      },
+      {
+        primary: '2022-05-03T00:00:00.000Z',
+        likes: 250,
+      },
+    ],
+  },
+]
+```
+
+The `primaryAxis` and `secondaryAxes` options, should have a prop called getValue, which is a getter function that returns the axis value for the datum. Example:
+
+```javascript
+const primaryAxis = React.useMemo(
+  () => ({
+    getValue: (datum: { primary: string }) => datum.primary,
+  }),
+  []
+)
+const secondaryAxes = React.useMemo(
+  () => [
+    {
+      getValue: (datum: { likes: number }) => datum.likes,
+      elementType: 'area',
+    },
+  ],
+  []
+)
+```
+
+The `initialHeight` and `initialWidth` expect a number, a default value is applied for each of those, 300 and 200 respectively. It's important to mention that these options are available SSR only.
+If you'd like to have a custom height and width in the client side you may have a wrapper div that sets the width and height CSS attributes
+
+`interactionMode` expect an string wich can be "primary" or "closest". It's been using for the tooltip position. By default, primary is being set.
+
+`showVoronoi` expect a boolean, it's a debug option to visualize the interaction click-map that sits on top of the chart.
+
+`getSeriesOrder` expect a function, this option will allows you to reorder the series if you want.
+
+`primaryCursor` and `secundaryCursor` take the options that configure the line/rectangle that is drawn underneath your cursor when you hover over the chart. When both are used, it produces a kind of cross-hair. Both are set to true by default.
+
 ## Axes
 
 React Charts use axes to configure a fair amount of the charts. Axes handle many things like: