Add legend document

iCHEF · Mar 11, 2019 · bd37a3c · bd37a3c
1 parent 004b94e
commit bd37a3c
Showing 1 changed file with 150 additions and 0 deletions.
diff --git a/docs/legend/legend.mdx b/docs/legend/legend.mdx
@@ -126,3 +126,153 @@ See [vx/legend custom legend example](https://vx-demo.now.sh/legends) and [legen
   </div>
 </Playground>
 
+## `direction`
+
+The direction of label. Default is `horizontal`.
+
+### horizontal
+
+<Playground>
+  <div style={{ width: '100%', height: '320px' }}>
+    <LineChart
+      data={multiLinesData}
+      x={{ type: 'quantitative', field: 'x' }}
+      y={{ type: 'quantitative', field: 'y' }}
+      color={{
+        field: "type",
+        type: "nominal",
+        legend: {
+          direction: 'horinzontal'
+        }
+      }}
+    />
+  </div>
+</Playground>
+
+### vertical
+
+<Playground>
+  <div style={{ width: '100%', height: '320px' }}>
+    <LineChart
+      data={multiLinesData}
+      x={{ type: 'quantitative', field: 'x' }}
+      y={{ type: 'quantitative', field: 'y' }}
+      color={{
+        field: "type",
+        type: "nominal",
+        legend: {
+          direction: 'vertical'
+        }
+      }}
+    />
+  </div>
+</Playground>
+
+## `orient`
+
+We could change where we put the legend by changing `legend.orient`. Default `orient` would be `right`. Allow `top`, `right`, `bottom` and `left` orient.
+
+### left
+
+<Playground>
+  <div style={{ width: '100%', height: '320px' }}>
+    <LineChart
+      data={multiLinesData}
+      x={{ type: 'quantitative', field: 'x' }}
+      y={{ type: 'quantitative', field: 'y' }}
+      color={{
+        field: "type",
+        type: "nominal",
+        legend: {
+          orient: 'left'
+        }
+      }}
+    />
+  </div>
+</Playground>
+
+### top
+
+<Playground>
+  <div style={{ width: '100%', height: '320px' }}>
+    <LineChart
+      data={multiLinesData}
+      x={{ type: 'quantitative', field: 'x' }}
+      y={{ type: 'quantitative', field: 'y' }}
+      color={{
+        field: "type",
+        type: "nominal",
+        legend: {
+          orient: 'top'
+        }
+      }}
+    />
+  </div>
+</Playground>
+
+### bottom
+
+<Playground>
+  <div style={{ width: '100%', height: '320px' }}>
+    <LineChart
+      data={multiLinesData}
+      x={{ type: 'quantitative', field: 'x' }}
+      y={{ type: 'quantitative', field: 'y' }}
+      color={{
+        field: "type",
+        type: "nominal",
+        legend: {
+          orient: 'bottom'
+        }
+      }}
+    />
+  </div>
+</Playground>
+
+## Legend config properties table
+
+<table>
+  <thead>
+    <tr>
+      <th>
+        name
+      </th>
+      <th>
+        type
+      </th>
+      <th>
+        description
+      </th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>hide</td>
+      <td>boolean</td>
+      <td>Hide legend or not. Default is `false`</td>
+    </tr>
+    <tr>
+      <td>direction</td>
+      <td>`horizontal` | `vertical`</td>
+      <td>
+        The direction of label. Default is `horizontal`
+      </td>
+    </tr>
+    <tr>
+      <td>orient</td>
+      <td>`top` | `right` | `bottom` | `left`;</td>
+      <td>
+        Where we put the legend in the chart. Default is `right`
+      </td>
+    </tr>
+    <tr>
+      <td>render</td>
+      <td>(labels: ReadonlyArray{'<'}object{'>'}) => React.ReactNode;</td>
+      <td>
+        Custom render function. If specify transcharts will call this to render custom legend.<br />
+        `labels` are all labels data in the legend and its attribute is as same as vx-legend label. See
+        <a target="_blank" rel="noopener" href="https://vx-demo.now.sh/legends">vx-legend example</a>
+      </td>
+    </tr>
+  </tbody>
+</table>