@graphenedata/cli 0.0.1

package/dist/docs/data_apps/components/charts/mixed-type-charts.md

@@ -0,0 +1,240 @@
+---
+title: Mixed-Type Charts
+description: Display multiple series types on the same chart, for example a bar for an amount, and a line for a related percentage.
+---
+
+Use mixed-type charts to display multiple series types on the same chart, for example a bar for an amount, and a line for a related percentage. 
+
+Mixed-type charts can be confusing, so use them sparingly. To add reference lines, areas or points to a chart instead, see [Annotations](/components/charts/annotations).
+
+> **Info**
+> 
+> The easiest way to create mixed-type charts is setting up [a secondary y-axis in `LineChart`](/components/charts/line-chart#secondary-axis-with-bar) or a [secondary axis in `BarChart`](/components/charts/bar-chart#secondary-axis-with-line)
+
+You can combine multiple chart types inside a single `<Chart>` tag to create mixed-type charts.
+
+## Examples
+
+### Mixed-Type Chart
+
+This example uses multiple y columns and multiple series types (bar and line)
+
+```markdown
+<Chart data="fda_recalls">
+    <Bar y=voluntary_recalls/>
+    <Line y=fda_recalls/>
+</Chart>
+```
+
+Because x is the first column in the dataset, an explicit `x` prop is not required.
+
+This structure also gives you control over the individual series on your chart. For example, if you have a single series running through a component, you can override props specifically for that series. Since the FDA acronym was not fully capitalized above, you can rename that specific series inside the `<Line>` primitive:
+
+```markdown
+<Chart data="fda_recalls">
+    <Bar y=voluntary_recalls/>
+    <Line y=fda_recalls name="FDA Recalls"/>
+</Chart>
+```
+
+# Chart `<Chart>`
+
+```markdown
+<Chart data="query_name">
+    Insert primitives here
+</Chart>
+```
+
+## Data
+
+| Name | Description | Required | Options | Default |
+|------|-------------|----------|---------|---------|
+| data | Query name, wrapped in curly braces | true | query name | - |
+| x | Column to use for the x-axis of the chart | false | column name | - |
+| y | Column(s) to use for the y-axis of the chart | false | column name \| array of column names | - |
+| sort | Whether to apply default sort to your data. Default is x ascending for number and date x-axes, and y descending for category x-axes | false | ['true', 'false'] | "true" |
+| series | Column to use as the series (groups) in a multi-series chart | false | column name | - |
+| xFmt | Format to use for x column ([see available formats](/core-concepts/formatting)) | false | Excel-style format \| built-in format name \| custom format name | - |
+| yFmt | Format to use for y column ([see available formats](/core-concepts/formatting)) | false | Excel-style format \| built-in format name \| custom format name | - |
+| yLog | Whether to use a log scale for the y-axis | false | ['true', 'false'] | "false" |
+| yLogBase | Base to use when log scale is enabled | false | number | 10 |
+| emptySet | Sets behaviour for empty datasets. Can throw an error, a warning, or allow empty. When set to 'error', empty datasets will block builds in build:strict. Note this only applies to initial page load - empty datasets caused by input component changes (dropdowns, etc.) are allowed. | false | ['error', 'warn', 'pass'] | "error" |
+| emptyMessage | Text to display when an empty dataset is received - only applies when emptySet is 'warn' or 'pass', or when the empty dataset is a result of an input component change (dropdowns, etc.). | false | string | "No records" |
+
+## Chart
+
+| Name | Description | Required | Options | Default |
+|------|-------------|----------|---------|---------|
+| swapXY | Swap the x and y axes to create a horizontal chart | false | ['true', 'false'] | "false" |
+| title | Chart title. Appears at top left of chart. | false | string | - |
+| subtitle | Chart subtitle. Appears just under title. | false | string | - |
+| legend | Turns legend on or off. Legend appears at top center of chart. | false | ['true', 'false'] | true for multiple series |
+| chartAreaHeight | Minimum height of the chart area (excl. header and footer) in pixels. Adjusting the height affects all viewport sizes and may impact the mobile UX. | false | number | 180 |
+| xAxisTitle | Name to show under x-axis. If 'true', formatted column name is used. Only works with swapXY=false | false | ['true', 'string', 'false'] | "false" |
+| yAxisTitle | Name to show beside y-axis. If 'true', formatted column name is used. | false | ['true', 'string', 'false'] | "false" |
+| xGridlines | Turns on/off gridlines extending from x-axis tick marks (vertical lines when swapXY=false) | false | ['true', 'false'] | "false" |
+| yGridlines | Turns on/off gridlines extending from y-axis tick marks (horizontal lines when swapXY=false) | false | ['true', 'false'] | "true" |
+| xAxisLabels | Turns on/off value labels on the x-axis | false | ['true', 'false'] | "true" |
+| yAxisLabels | Turns on/off value labels on the y-axis | false | ['true', 'false'] | "true" |
+| xBaseline | Turns on/off thick axis line (line appears at y=0) | false | ['true', 'false'] | "true" |
+| yBaseline | Turns on/off thick axis line (line appears directly alongside the y-axis labels) | false | ['true', 'false'] | "false" |
+| xTickMarks | Turns on/off tick marks for each of the x-axis labels | false | ['true', 'false'] | "false" |
+| yTickMarks | Turns on/off tick marks for each of the y-axis labels | false | ['true', 'false'] | "false" |
+| yMin | Starting value for the y-axis | false | number | - |
+| yMax | Maximum value for the y-axis | false | number | - |
+| yScale | Whether to scale the y-axis to fit your data. yMin and yMax take precedence over yScale | false | ['true', 'false'] | "false" |
+| options | JavaScript object to add or override chart configuration settings (see Custom Charts page) | false | object | - |
+| colorPalette | Array of custom colours to use for the chart. E.g., `{['#cf0d06','#eb5752','#e88a87']}` | false | array of color strings (CSS name \| hexademical \| RGB \| HSL) | built-in color palette |
+| seriesColors | Apply a specific color to each series in your chart. Unspecified series will receive colors from the built-in palette as normal. Note the double curly braces required in the syntax `seriesColors={{"Canada": "red", "US": "blue"}}` | false | object with series names and assigned colors | colors applied by order of series in data |
+| renderer | Which chart renderer type (canvas or SVG) to use. See ECharts' [documentation on renderers](https://echarts.apache.org/handbook/en/best-practices/canvas-vs-svg). | false | ['canvas', 'svg'] | "canvas" |
+| downloadableData | Whether to show the download button to allow users to download the data | false | ["true", "false"] | "true" |
+| downloadableImage | Whether to show the button to allow users to save the chart as an image | false | ["true", "false"] | "true" |
+
+# Line `<Line/>`
+
+```markdown
+<Chart data="query_name">
+    <Line/>
+</Chart>
+```
+
+## Options
+
+| Name | Description | Required | Options | Default |
+|------|-------------|----------|---------|---------|
+| y | Column(s) to use for the y-axis of the chart. Can be different than the y supplied to Chart | false | column name \| array of column names | y supplied to Chart |
+| series | Column to use as the series (groups) in a multi-series chart. Can be different than the series supplied to Chart | false | column name | series supplied to Chart |
+| name | Name to show in legend for a single series (to override column name) | false | string | - |
+| lineColor | Color to override default series color. Only accepts a single color. | false | CSS name \| hexademical \| RGB \| HSL | - |
+| lineOpacity | % of the full color that should be rendered, with remainder being transparent | false | number (0 to 1) | 1 |
+| lineType | Options to show breaks in a line (dashed or dotted) | false | ['solid', 'dashed', 'dotted'] | "solid" |
+| lineWidth | Thickness of line (in pixels) | false | number | 2 |
+| markers | Turn on/off markers (shapes rendered onto the points of a line) | false | ['true', 'false'] | "false" |
+| markerShape | Shape to use if markers=true | false | ['circle', 'emptyCircle', 'rect', 'triangle', 'diamond'] | "circle" |
+| markerSize | Size of each shape (in pixels) | false | number | 8 |
+| handleMissing | Treatment of missing values in the dataset | false | ['gap', 'connect', 'zero'] | "gap" |
+| options | JavaScript object to add or override chart configuration settings (see Custom Charts page) | false | object | - |
+
+# Area `<Area/>`
+
+```markdown
+<Chart data="query_name">
+    <Area/>
+</Chart>
+```
+
+## Options
+
+| Name | Description | Required | Options | Default |
+|------|-------------|----------|---------|---------|
+| y | Column(s) to use for the y-axis of the chart. Can be different than the y supplied to Chart | false | column name \| array of column names | y supplied to Chart |
+| series | Column to use as the series (groups) in a multi-series chart. Can be different than the series supplied to Chart | false | column name | series supplied to Chart |
+| name | Name to show in legend for a single series (to override column name) | false | string | - |
+| fillColor | Color to override default series color. Only accepts a single color. | false | CSS name \| hexademical \| RGB \| HSL | - |
+| fillOpacity | % of the full color that should be rendered, with remainder being transparent | false | number (0 to 1) | 0.7 |
+| line | Show line on top of the area | false | ['true', 'false'] | "true" |
+| handleMissing | Treatment of missing values in the dataset | false | ['gap', 'connect', 'zero'] | gap (single series) \| zero (multi-series) |
+| options | JavaScript object to add or override chart configuration settings (see Custom Charts page) | false | object | - |
+
+# Bar `<Bar/>`
+
+```markdown
+<Chart data="query_name">
+    <Bar/>
+</Chart>
+```
+
+## Options
+
+| Name | Description | Required | Options | Default |
+|------|-------------|----------|---------|---------|
+| y | Column to use for the y-axis of the chart | false | column name | - |
+| name | Name to show in legend for a single series (to override column name) | false | string | - |
+| type | Grouping method to use for multi-series charts | false | ['stacked', 'grouped'] | "stacked" |
+| stackName | Name for an individual stack. If separate Bar components are used with different stackNames, the chart will show multiple stacks | false | string | - |
+| fillColor | Color to override default series color. Only accepts a single color. | false | CSS name \| hexademical \| RGB \| HSL | - |
+| fillOpacity | % of the full color that should be rendered, with remainder being transparent | false | number (0 to 1) | 1 |
+| outlineWidth | Width of line surrounding each bar | false | number | 0 |
+| outlineColor | Color to use for outline if outlineWidth > 0 | false | CSS name \| hexademical \| RGB \| HSL | - |
+| options | JavaScript object to add or override chart configuration settings (see Custom Charts page) | false | object | - |
+
+# Scatter `<Scatter/>`
+
+```markdown
+<Chart data="query_name">
+    <Scatter/>
+</Chart>
+```
+
+## Options
+
+| Name | Description | Required | Options | Default |
+|------|-------------|----------|---------|---------|
+| y | Column to use for the y-axis of the chart | false | column name | - |
+| name | Name to show in legend for a single series (to override column name) | false | string | - |
+| shape | Options for which shape to use for scatter points | false | ['circle', 'emptyCircle', 'rect', 'triangle', 'diamond'] | "circle" |
+| pointSize | Change size of all points on the chart | false | number | 10 |
+| opacity | % of the full color that should be rendered, with remainder being transparent | false | number (0 to 1) | 0.7 |
+| fillColor | Color to override default series color. Only accepts a single color. | false | CSS name \| hexademical \| RGB \| HSL | - |
+| outlineWidth | Width of line surrounding each shape | false | number | 0 |
+| outlineColor | Color to use for outline if outlineWidth > 0 | false | CSS name \| hexademical \| RGB \| HSL | - |
+| options | JavaScript object to add or override chart configuration settings (see Custom Charts page) | false | object | - |
+
+# Bubble `<Bubble/>`
+
+```markdown
+<Chart data="query_name">
+    <Bubble/>
+</Chart>
+```
+
+## Options
+
+| Name | Description | Required | Options | Default |
+|------|-------------|----------|---------|---------|
+| y | Column to use for the y-axis of the chart | false | column name | - |
+| size | Column to use to scale the size of the bubbles | false | column name | - |
+| name | Name to show in legend for a single series (to override column name) | false | string | - |
+| shape | Options for which shape to use for bubble points | false | ['circle', 'emptyCircle', 'rect', 'triangle', 'diamond'] | "circle" |
+| minSize | Minimum bubble size | false | number | 200 |
+| maxSize | Maximum bubble size | false | number | 400 |
+| opacity | % of the full color that should be rendered, with remainder being transparent | false | number (0 to 1) | 0.7 |
+| fillColor | Color to override default series color. Only accepts a single color. | false | CSS name \| hexademical \| RGB \| HSL | - |
+| outlineWidth | Width of line surrounding each shape | false | number | 0 |
+| outlineColor | Color to use for outline if outlineWidth > 0 | false | CSS name \| hexademical \| RGB \| HSL | - |
+| options | JavaScript object to add or override chart configuration settings (see Custom Charts page) | false | object | - |
+
+# Hist `<Hist/>`
+
+```markdown
+<Chart data="query_name">
+    <Hist/>
+</Chart>
+```
+
+## Options
+
+| Name | Description | Required | Options | Default |
+|------|-------------|----------|---------|---------|
+| x | Column which contains the data you want to summarize | false | column name | - |
+| fillColor | Color to override default series color | false | CSS name \| hexademical \| RGB \| HSL | - |
+| fillOpacity | % of the full color that should be rendered, with remainder being transparent | false | number (0 to 1) | 1 |
+| options | JavaScript object to add or override chart configuration settings (see Custom Charts page) | false | object | - |
+
+### Interactivity
+
+| Name | Description | Required | Options | Default |
+|------|-------------|----------|---------|---------|
+| connectGroup | Group name to connect this chart to other charts for synchronized tooltip hovering. Charts with the same `connectGroup` name will become connected | false | - | - |
+
+## Annotations
+
+Mixed type charts can include [annotations](/components/charts/annotations) using the `ReferenceLine` and `ReferenceArea` components. These components are used within a chart component like so:
+
+```html
+<Chart data="sales_data" x=date y=sales>
+  <Line y=sales/>
+  <ReferenceLine data="target_data" y=target label=name/>
+  <ReferenceArea xMin='2020-03-14' xMax='2020-05-01'/>
+</Chart>
+```

package/dist/docs/data_apps/components/charts/sankey-diagram.md

@@ -0,0 +1,301 @@
+---
+title: Sankey Diagram
+description: Display flows of a metric transferring between different categories.
+---
+
+Use Sankey diagrams to display flows of a metric transferring between different categories.
+
+To display a flow with multiple levels, like these examples, see [Mutli-level](#multi-level) below.
+
+
+
+## Example
+
+```svelte
+<SankeyDiagram 
+    data="query_name" 
+    sourceCol= sourceCol
+    targetCol = targetCol
+    valueCol= valueCol
+/>
+```
+
+## Vertical
+
+```svelte
+<SankeyDiagram 
+    data="query_name" 
+    sourceCol=sourceCol
+    targetCol=targetCol
+    valueCol=valueCol
+    orient=vertical
+/>
+```
+
+# Echarts Options String 
+
+```svelte
+<SankeyDiagram 
+    data="traffic_data" 
+    title="Sankey" 
+    subtitle="A simple sankey chart" 
+    sourceCol=source 
+    targetCol=target 
+    valueCol=count 
+    echartsOptions="{
+        title: {
+            text: "Custom Echarts Option",
+            textStyle: {
+              color: '#476fff'
+            "
+        }
+    }}
+/>
+```
+
+# Node Depth Override
+
+
+```svelte
+<SankeyDiagram 
+    data="apple_income_statement" 
+    title="Apple Income Statement" 
+    subtitle="USD Billions" 
+    sourceCol=source 
+    targetCol=target 
+    valueCol=amount_usd 
+    depthOverride="{'services revenue': 1"}
+    nodeAlign=left
+/>
+```
+
+# Labels
+
+## Node Labels
+
+### `nodeLabels=name` (default)
+
+```svelte
+<SankeyDiagram 
+  data="simple_sankey" 
+  sourceCol=source 
+  targetCol=target 
+  valueCol=amount 
+  percentCol=percent 
+  nodeLabels=name
+/>
+```
+
+### `nodeLabels=value`
+
+```svelte
+<SankeyDiagram 
+  data="simple_sankey" 
+  sourceCol=source 
+  targetCol=target 
+  valueCol=amount 
+  percentCol=percent 
+  nodeLabels=value
+/>
+```
+
+The value labels can be formatted using the `valueFmt` option.
+
+### `nodeLabels=full`
+
+```svelte
+<SankeyDiagram 
+  data="simple_sankey" 
+  sourceCol=source 
+  targetCol=target 
+  valueCol=amount 
+  percentCol=percent 
+  nodeLabels=full
+  valueFmt=usd
+/>
+```
+
+## Link Labels
+
+### `linkLabels=full` (default)
+Requires `percentCol` to show percentage beside value
+
+```svelte
+<SankeyDiagram 
+  data="simple_sankey" 
+  sourceCol=source 
+  targetCol=target 
+  valueCol=amount 
+  percentCol=percent 
+  valueFmt=usd
+  linkLabels=full
+/>
+```
+
+### `linkLabels=value`
+
+```svelte
+<SankeyDiagram 
+  data="simple_sankey" 
+  sourceCol=source 
+  targetCol=target 
+  valueCol=amount 
+  percentCol=percent 
+  valueFmt=usd
+  linkLabels=value
+/>
+```
+
+### `linkLabels=percent`
+
+```svelte
+<SankeyDiagram 
+  data="simple_sankey" 
+  sourceCol=source 
+  targetCol=target 
+  valueCol=amount 
+  percentCol=percent 
+  valueFmt=usd
+  linkLabels=percent
+/>
+```
+
+## Custom Color Palette
+
+```svelte
+<SankeyDiagram 
+  data="simple_sankey" 
+  sourceCol=source 
+  targetCol=target 
+  valueCol=amount 
+  percentCol=percent 
+  linkColor=base-content-muted
+  colorPalette={['#ad4940', '#3d8cc4', '#1b5218', '#ebb154']}
+/>
+```
+
+## Link Colors
+
+### `linkColor=base-content-muted` (default)
+
+```svelte
+<SankeyDiagram 
+  data="simple_sankey" 
+  sourceCol=source 
+  targetCol=target 
+  valueCol=amount 
+  percentCol=percent 
+  linkColor=base-content-muted
+  colorPalette={['#ad4940', '#3d8cc4', '#1b5218', '#ebb154']}
+/>
+```
+
+### `linkColor=source` 
+
+```svelte
+<SankeyDiagram 
+  data="simple_sankey" 
+  sourceCol=source 
+  targetCol=target 
+  valueCol=amount 
+  percentCol=percent 
+  linkColor=source
+  colorPalette={['#ad4940', '#3d8cc4', '#1b5218', '#ebb154']}
+/>
+```
+
+### `linkColor=target` 
+
+```svelte
+<SankeyDiagram 
+  data="simple_sankey" 
+  sourceCol=source 
+  targetCol=target 
+  valueCol=amount 
+  percentCol=percent 
+  linkColor=target
+  colorPalette={['#ad4940', '#3d8cc4', '#1b5218', '#ebb154']}
+/>
+```
+
+### `linkColor=gradient` 
+
+```svelte
+<SankeyDiagram 
+  data="simple_sankey" 
+  sourceCol=source 
+  targetCol=target 
+  valueCol=amount 
+  percentCol=percent 
+  linkColor=gradient
+  colorPalette={['#6e0e08', '#3d8cc4', '#1b5218', '#ebb154']}
+/>
+```
+
+## Multi-level
+
+The syntax for multi-level sankey diagrams is the same, but the 
+underlying query must represent all the levels using the same 
+`sourceCol` and `targetCol`, so it is necessary to `union`
+ each level together.  `sourceCol` nodes on the next level will be linked to `targetCol` nodes in the previous level with the same name.  
+
+For example, here is the source for the visuals above.
+
+```svelte
+<SankeyDiagram
+    data="traffic_data"
+    title="Sankey"
+    subtitle="A simple sankey chart"
+    sourceCol=source
+    targetCol=target
+    valueCol=count
+/>
+```
+
+## Options
+
+### Data
+
+| Name | Description | Required | Options | Default |
+|------|-------------|----------|---------|---------|
+| data | Query name, wrapped in curly braces | true | query name | - |
+| sourceCol | Column to use for the source of the diagram | true | column name | - |
+| targetCol | Column to use for the target of the diagram | true | column name | - |
+| valueCol | Column to use for the value of the diagram | true | column name | - |
+| percentCol | Column to use for the percent labels of the diagram | false | column name | - |
+| depthOverride | Manual adjustment to location of each node `{{'services revenue': 2}}` | false | object containing node name and depth level (0 is first level) | - |
+| emptySet | Sets behaviour for empty datasets. Can throw an error, a warning, or allow empty. When set to 'error', empty datasets will block builds in `build:strict`. Note this only applies to initial page load - empty datasets caused by input component changes (dropdowns, etc.) are allowed. | false | ['error', 'warn', 'pass'] | "error" |
+| emptyMessage | Text to display when an empty dataset is received - only applies when `emptySet` is 'warn' or 'pass', or when the empty dataset is a result of an input component change (dropdowns, etc.). | false | string | "No records" |
+| printEchartsConfig | Helper prop for custom chart development - inserts a code block with the current echarts config onto the page so you can see the options used and debug your custom options | false | ['true', 'false'] | "false" |
+
+### Formatting & Styling
+
+| Name | Description | Required | Options | Default |
+|------|-------------|----------|---------|---------|
+| valueFmt | Format to use for `valueCol` ([see available formats](/core-concepts/formatting)) | false | Excel-style format \| built-in format \| custom format | - |
+| orient | Layout direction of the nodes in the diagram. | false | ['horizontal', 'vertical'] | "horizontal" |
+| sort | Whether the nodes are sorted by size in the diagram | false | ['true', 'false'] | "false" |
+| nodeAlign | Controls the horizontal alignment of nodes in the diagram. When orient is vertical, nodeAlign controls vertical alignment. | false | ['justify', 'left', 'right'] | "justify" |
+| nodeGap | The gap between any two rectangles in each column of the the diagram. | false | number | 8 |
+| nodeWidth | The node width of rectangle in the diagram. | false | number | 20 |
+| outlineColor | Border color. Only accepts a single color. | false | CSS name \| hexademical \| RGB \| HSL | "transparent" |
+| outlineWidth | Border Width. It should be a natural number. | false | number | 1 |
+| colorPalette | Array of custom colours to use for the chart. E.g., `{['#cf0d06','#eb5752','#e88a87']}` | false | array of color strings (CSS name \| hexademical \| RGB \| HSL) | built-in color palette |
+| linkColor | Color to use for the links between nodes in the diagram | false | ['base-content-muted', 'source', 'target', 'gradient'] | "base-content-muted" |
+
+### Chart
+
+| Name | Description | Required | Options | Default |
+|------|-------------|----------|---------|---------|
+| title | Chart title. Appears at top left of chart. | false | string | - |
+| subtitle | Chart subtitle. Appears just under title. | false | string | - |
+| nodeLabels | Adds labels to the nodes of the diagram | false | ['name', 'value', 'full'] | "name" |
+| linkLabels | Adds labels to the links between nodes | false | ['full', 'value', 'percent'] | "full (requires percentCol)" |
+| chartAreaHeight | Minimum height of the chart area (excl. header and footer) in pixels. Adjusting the height affects all viewport sizes and may impact the mobile UX. | false | number | 180 |
+
+### Custom Echarts Options
+
+| Name | Description | Required | Options | Default |
+|------|-------------|----------|---------|---------|
+| echartsOptions | Custom Echarts options to override the default options. See [reference page](/components/charts/echarts-options) for available options. | false | `{{exampleOption:'exampleValue'}}` | - |
+| printEchartsConfig | Helper prop for custom chart development - inserts a code block with the current echarts config onto the page so you can see the options used and debug your custom options | false | ['true', 'false'] | "false" |

package/dist/docs/data_apps/components/charts/scatter-plot.md

@@ -0,0 +1,134 @@
+---
+title: Scatter Plot
+description: Show the correlation between two metrics for categorical values, or a set of samples.
+---
+
+Use scatter plots to show the correlation between two metrics for categorical values, or a set of samples.
+
+## Example
+
+```markdown
+<ScatterPlot 
+    data="price_vs_volume"
+    x=price
+    y=number_of_units
+    xFmt=usd0
+    series=category
+/>
+```
+
+## Examples
+
+### Default
+
+```markdown
+<ScatterPlot 
+    data="price_vs_volume"
+    x=price
+    y=number_of_units
+/>
+```
+
+### Multi-Series
+
+```markdown
+<ScatterPlot 
+    data="price_vs_volume"
+    x=price
+    y=number_of_units
+    series=category
+/>
+```
+
+## Options
+
+### Data
+
+| Name | Description | Required | Options | Default |
+|------|-------------|----------|---------|---------|
+| data | Query name, wrapped in curly braces | true | query name | - |
+| x | Column to use for the x-axis of the chart | true | column name | First column |
+| y | Column(s) to use for the y-axis of the chart | true | column name \| array of column names | Any non-assigned numeric columns |
+| series | Column to use as the series (groups) in a multi-series chart | false | column name | - |
+| sort | Whether to apply default sort to your data. Default is x ascending for number and date x-axes, and y descending for category x-axes | false | ['true', 'false'] | "true" |
+| tooltipTitle | Column to use as the title for each tooltip. Typically, this is a name to identify each point. | false | column name | - |
+| emptySet | Sets behaviour for empty datasets. Can throw an error, a warning, or allow empty. When set to 'error', empty datasets will block builds in `build:strict`. Note this only applies to initial page load - empty datasets caused by input component changes (dropdowns, etc.) are allowed. | false | ['error', 'warn', 'pass'] | "error" |
+| emptyMessage | Text to display when an empty dataset is received - only applies when `emptySet` is 'warn' or 'pass', or when the empty dataset is a result of an input component change (dropdowns, etc.). | false | string | "No records" |
+
+### Formatting & Styling
+
+| Name | Description | Required | Options | Default |
+|------|-------------|----------|---------|---------|
+| xFmt | Format to use for x column ([see available formats](/core-concepts/formatting)) | false | Excel-style format \| built-in format name \| custom format name | - |
+| yFmt | Format to use for y column ([see available formats](/core-concepts/formatting)) | false | Excel-style format \| built-in format name \| custom format name | - |
+| seriesLabelFmt | Format to use for series label ([see available formats](/core-concepts/formatting)) | false | Excel-style format \| built-in format name \| custom format name | "-" |
+| shape | Options for which shape to use for scatter points | false | circle \| emptyCircle \| rect \| triangle \| diamond | "circle" |
+| pointSize | Change size of all points on the chart | false | number | 10 |
+| opacity | % of the full color that should be rendered, with remainder being transparent | false | number (0 to 1) | 0.7 |
+| fillColor | Color to override default series color. Only accepts a single color. | false | CSS name \| hexademical \| RGB \| HSL | - |
+| outlineWidth | Width of line surrounding each shape | false | number | 0 |
+| outlineColor | Color to use for outline if outlineWidth > 0 | false | CSS name \| hexademical \| RGB \| HSL | - |
+| colorPalette | Array of custom colours to use for the chart. E.g., `{['#cf0d06','#eb5752','#e88a87']}` | false | array of color strings (CSS name \| hexademical \| RGB \| HSL) | built-in color palette |
+| seriesColors | Apply a specific color to each series in your chart. Unspecified series will receive colors from the built-in palette as normal. Note the double curly braces required in the syntax `seriesColors={{"Canada": "red", "US": "blue"}}` | false | object with series names and assigned colors | colors applied by order of series in data |
+| seriesOrder | Apply a specific order to the series in a multi-series chart. | false | Array of series names in the order they should be used in the chart seriesOrder="`{['series one', 'series two']"`} | default order implied by the data |
+| leftPadding | Number representing the padding (whitespace) on the left side of the chart. Useful to avoid labels getting cut off | false | number | - |
+| rightPadding | Number representing the padding (whitespace) on the left side of the chart. Useful to avoid labels getting cut off | false | number | - |
+| xLabelWrap | Whether to wrap x-axis labels when there is not enough space. Default behaviour is to truncate the labels. | false | ["true", "false"] | "false" |
+
+### Axes
+
+| Name | Description | Required | Options | Default |
+|------|-------------|----------|---------|---------|
+| yLog | Whether to use a log scale for the y-axis | false | ['true', 'false'] | 'false' |
+| yLogBase | Base to use when log scale is enabled | false | 'number' | '10' |
+| xAxisTitle | Name to show under x-axis. If 'true', formatted column name is used. Only works with swapXY=false | false | 'true \| string \| false' | 'true' |
+| yAxisTitle | Name to show beside y-axis. If 'true', formatted column name is used. | false | 'true \| string \| false' | 'true' |
+| xGridlines | Turns on/off gridlines extending from x-axis tick marks (vertical lines when swapXY=false) | false | ['true', 'false'] | 'false' |
+| yGridlines | Turns on/off gridlines extending from y-axis tick marks (horizontal lines when swapXY=false) | false | ['true', 'false'] | 'true' |
+| xAxisLabels | Turns on/off value labels on the x-axis | false | ['true', 'false'] | 'true' |
+| yAxisLabels | Turns on/off value labels on the y-axis | false | ['true', 'false'] | 'true' |
+| xBaseline | Turns on/off thick axis line (line appears at y=0) | false | ['true', 'false'] | 'true' |
+| yBaseline | Turns on/off thick axis line (line appears directly alongside the y-axis labels) | false | ['true', 'false'] | 'false' |
+| xTickMarks | Turns on/off tick marks for each of the x-axis labels | false | ['true', 'false'] | 'false' |
+| yTickMarks | Turns on/off tick marks for each of the y-axis labels | false | ['true', 'false'] | 'false' |
+| xMin | Starting value for the x-axis | false | 'number' | - |
+| xMax | Maximum value for the x-axis | false | 'number' | - |
+| yMin | Starting value for the y-axis | false | 'number' | - |
+| yMax | Maximum value for the y-axis | false | 'number' | - |
+
+### Chart
+
+| Name | Description | Required | Options | Default |
+|------|-------------|----------|---------|---------|
+| title | Chart title. Appears at top left of chart. | false | 'string' | - |
+| subtitle | Chart subtitle. Appears just under title. | false | 'string' | - |
+| legend | Turns legend on or off. Legend appears at top center of chart. | false | ['true', 'false'] | 'true for multiple series' |
+| chartAreaHeight | Minimum height of the chart area (excl. header and footer) in pixels. Adjusting the height affects all viewport sizes and may impact the mobile UX. | false | 'number' | '180' |
+| renderer | Which chart renderer type (canvas or SVG) to use. See ECharts' [documentation on renderers](https://echarts.apache.org/handbook/en/best-practices/canvas-vs-svg). | false | 'canvas \| svg' | 'canvas' |
+| downloadableData | Whether to show the download button to allow users to download the data | false | ["true", "false"] | "true" |
+| downloadableImage | Whether to show the button to allow users to save the chart as an image | false | ["true", "false"] | "true" |
+
+### Custom Echarts Options
+
+| Name | Description | Required | Options | Default |
+|------|-------------|----------|---------|---------|
+| echartsOptions | Custom Echarts options to override the default options. See [reference page](/components/charts/echarts-options) for available options. | false | `{{exampleOption:'exampleValue'}}` | - |
+| seriesOptions | Custom Echarts options to override the default options for all series in the chart. This loops through the series to apply the settings rather than having to specify every series manually using `echartsOptions` See [reference page](/components/charts/echarts-options) for available options. | false | `{{exampleSeriesOption:'exampleValue'}}` | - |
+| printEchartsConfig | Helper prop for custom chart development - inserts a code block with the current echarts config onto the page so you can see the options used and debug your custom options | false | ['true', 'false'] | "false" |
+
+### Interactivity
+
+| Name | Description | Required | Options | Default |
+|------|-------------|----------|---------|---------|
+| connectGroup | Group name to connect this chart to other charts for synchronized tooltip hovering. Charts with the same `connectGroup` name will become connected | false | - | - |
+
+## Annotations
+
+Scatter plots can include [annotations](/components/charts/annotations) using the `ReferenceLine` and `ReferenceArea` components. These components are used within a chart component like so:
+
+```html
+<ScatterPlot data="sales_data" x=date y=sales>
+  <ReferenceLine data="target_data" y=target label=name/>
+  <ReferenceArea xMin='2020-03-14' xMax='2020-05-01'/>
+</ScatterPlot>
+```