@graphenedata/cli 0.0.1

package/dist/docs/data_apps/components/charts/heatmap.md

@@ -0,0 +1,180 @@
+---
+title: Heatmap
+description: Show patterns in a single metric across two categorical dimensions, using colour to indicate size.
+---
+
+Use heatmaps to show patterns in a single metric across two categorical dimensions, using colour to indicate size.
+
+
+**Example:**
+
+```markdown
+<Heatmap 
+    data="orders" 
+    x=day 
+    y=category 
+    value=order_count 
+    valueFmt=usd 
+/>
+```
+
+## Data Structure
+
+Heatmap requires your data to contain 2 categorical columns (1 for the x-axis and 1 for the y-axis) and 1 numeric column.
+
+#### Example
+
+
+| region | product | sales |
+|--------|---------|-------|
+| {example.region} | {example.product} | {example.sales} |
+
+### Unpivoting your Data
+If you have data spread across columns, you can use the `UNPIVOT` feature in your SQL query to prepare the data for the heatmap.
+
+#### Example
+If you have a query result called `region_sales`:
+
+
+| region | A | B | C |
+|--------|---|---|---|
+| {region_sales.region} | {region_sales.A} | {region_sales.B} | {region_sales.C} |
+
+You can use `UNPIVOT` like so:
+
+
+Which will return this table, which can be passed into the Heatmap:
+
+
+| region | product | sales |
+|--------|---------|-------|
+| {region_sales_unpivoted.region} | {region_sales_unpivoted.product} | {region_sales_unpivoted.sales} |
+
+> **Note on Date Columns**
+> 
+> Heatmap currently only works with string columns. If you would like to use a date column, cast it to a string in your SQL query before passing it into the Heatmap
+
+## Examples
+
+### Basic Heatmap
+
+**Example:**
+
+```markdown
+<Heatmap 
+    data="orders" 
+    x=day 
+    y=category 
+    value=order_count 
+    valueFmt=usd 
+/>
+```
+
+### Custom Color Scale
+
+**Example:**
+
+```svelte
+<Heatmap 
+    data="orders" 
+    x=day 
+    y=category 
+    value=order_count 
+    valueFmt=usd 
+    colorScale="[
+        ['rgb(254,234,159)', 'rgb(254,234,159)'],
+        ['rgb(218,66,41)', 'rgb(218,66,41)']
+    ]"
+/>
+```
+
+### Rotated Labels
+
+
+**Example:**
+
+```svelte
+<Heatmap 
+    data="item_state" 
+    x=item 
+    y=state 
+    value=orders 
+    xLabelRotation=-45
+    colorScale={['white', 'maroon']} 
+    title="Item Sales"
+    subtitle="By State"
+    rightPadding=40
+    cellHeight=25
+    nullsZero=false
+/>
+```
+
+## Options
+
+### Data
+
+| Property | Required | Type | Default | Description |
+|----------|----------|------|---------|-------------|
+| data | ✓ | query name | | Query name, wrapped in curly braces |
+| x | ✓ | column name | | Categorical column to use for the x-axis. If you want to use dates, cast them to strings in your query first |
+| y | ✓ | column name | | Categorical column to use for the y-axis. If you want to use dates, cast them to strings in your query first |
+| value | ✓ | column name | | Numeric column to use for the y-axis |
+| min | | number | min of value column | Minimum number for the heatmap's color scale |
+| max | | number | max of value column | Maximum number for the heatmap's color scale |
+| emptySet | | error/warn/pass | error | 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. |
+| emptyMessage | | string | "No records" | 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.). |
+
+### Formatting & Styling
+
+| Property | Type | Default | Description |
+|----------|------|---------|-------------|
+| nullsZero | true/false | true | Whether to treats nulls or missing values as zero |
+| zeroDisplay | string | | String to display in place of zeros |
+| colorScale | array of color codes - e.g., `{['navy', 'white', '#c9c9c9']}` | | Array of colors to form the gradient for the heatmap. |
+| valueFmt | Excel-style format \| built-in format name \| custom format name | | Format to use for value column ([see available formats](/core-concepts/formatting)) |
+| cellHeight | number | 30 | Number representing the height of cells in the heatmap |
+| leftPadding | number | 0 | Number representing the padding (whitespace) on the left side of the chart. Useful to avoid labels getting cut off |
+| rightPadding | number | 2 | Number representing the padding (whitespace) on the left side of the chart. Useful to avoid labels getting cut off |
+| valueLabels | true/false | true | Turn on or off value labels in the heatmap cells |
+| mobileValueLabels | true/false | false | Turn on or off value labels in the heatmap cells when app is viewed on a mobile device screen size |
+| borders | true/false | true | Turn on or off borders around cells. Default is to show light grey border around each cell. To customize border appearance, use `echartsOptions` |
+
+### Axes
+
+| Property | Type | Default | Description |
+|----------|------|---------|-------------|
+| xTickMarks | true/false | false | Turns on/off tick marks for the x-axis labels |
+| yTickMarks | true/false | false | Turns on/off tick marks for the y-axis labels |
+| xLabelRotation | number | 0 | Degrees to rotate the labels on the x-axis. Can be negative number to reverse direction. `45` and `-45` are common options |
+| xAxisPosition | top/bottom | top | Position of x-axis and labels. Can be top or bottom. top recommended for longer charts |
+| xSort | column name | | Column to sort x values by |
+| xSortOrder | asc/desc | asc | Sets direction of sort |
+| ySort | column name | | Column to sort y values by |
+| ySortOrder | asc/desc | asc | Sets direction of sort |
+
+### Chart
+
+| Property | Type | Default | Description |
+|----------|------|---------|-------------|
+| title | string | | Chart title. Appears at top left of chart. |
+| subtitle | string | | Chart subtitle. Appears just under title. |
+| chartAreaHeight | number | auto set based on y-axis values | 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. |
+| legend | true/false | true | Turn on or off the legend |
+| filter | true/false | false | Allow draggable filtering on the legend. Must be used with `legend=true` |
+| renderer | canvas/svg | canvas | 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/). |
+| downloadableData | true/false | true | Whether to show the download button to allow users to download the data |
+| downloadableImage | true/false | true | Whether to show the button to allow users to save the chart as an image |
+
+### Custom Echarts Options
+
+| Property | Type | Default | Description |
+|----------|------|---------|-------------|
+| echartsOptions | `{{exampleOption:'exampleValue'}}` | | Custom Echarts options to override the default options. See [reference page](/components/charts/echarts-options) for available options. |
+| seriesOptions | `{{exampleSeriesOption:'exampleValue'}}` | | 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. |
+| printEchartsConfig | true/false | false | 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 |
+
+### Interactivity
+
+| Property | Type | Description |
+|----------|------|-------------|
+| connectGroup | | Group name to connect this chart to other charts for synchronized tooltip hovering. Charts with the same `connectGroup` name will become connected |

package/dist/docs/data_apps/components/charts/histogram.md

@@ -0,0 +1,107 @@
+---
+title: Histogram
+description: Display the distribution of a metric along a continuous range, aggregated into buckets.
+---
+
+Use histograms to display the distribution of a metric along a continuous range, aggregated into buckets.
+
+
+**Example:**
+
+```markdown
+<Histogram
+    data="orders"
+    x=sales
+/>
+```
+
+## Examples
+
+### Histogram
+
+**Example:**
+
+```markdown
+<Histogram
+    data="orders_week"
+    x=sales
+    xAxisTitle="Weekly Sales"
+/>
+```
+
+## Options
+
+### Data
+
+| Property | Required | Type | Default | Description |
+|----------|----------|------|---------|-------------|
+| data | ✓ | query name | | Query name, wrapped in curly braces |
+| x | ✓ | column name | | Column which contains the data you want to summarize |
+| emptySet | | error/warn/pass | error | 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. |
+| emptyMessage | | string | "No records" | 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.). |
+
+### Formatting & Styling
+
+| Property | Type | Default | Description |
+|----------|------|---------|-------------|
+| xFmt | Excel-style format \| built-in format name \| custom format name | | Format to use for x column ([see available formats](/core-concepts/formatting)) |
+| fillColor | CSS name \| hexademical \| RGB \| HSL | | Color to override default series color |
+| fillOpacity | number (0 to 1) | 1 | % of the full color that should be rendered, with remainder being transparent |
+| colorPalette | array of color strings (CSS name \| hexademical \| RGB \| HSL) | built-in color palette | Array of custom colours to use for the chart. E.g., `{['#cf0d06','#eb5752','#e88a87']}` |
+| leftPadding | number | | Number representing the padding (whitespace) on the left side of the chart. Useful to avoid labels getting cut off |
+| rightPadding | number | | Number representing the padding (whitespace) on the left side of the chart. Useful to avoid labels getting cut off |
+| xLabelWrap | true/false | false | Whether to wrap x-axis labels when there is not enough space. Default behaviour is to truncate the labels. |
+
+### Axes
+
+| Property | Type | Default | Description |
+|----------|------|---------|-------------|
+| xAxisTitle | true/string/false | false | Name to show under x-axis. If 'true', formatted column name is used. Only works with swapXY=false |
+| yAxisTitle | true/string/false | false | Name to show beside y-axis. If 'true', formatted column name is used. |
+| xGridlines | true/false | false | Turns on/off gridlines extending from x-axis tick marks (vertical lines when swapXY=false) |
+| yGridlines | true/false | true | Turns on/off gridlines extending from y-axis tick marks (horizontal lines when swapXY=false) |
+| xAxisLabels | true/false | true | Turns on/off value labels on the x-axis |
+| yAxisLabels | true/false | true | Turns on/off value labels on the y-axis |
+| xBaseline | true/false | true | Turns on/off thick axis line (line appears at y=0) |
+| yBaseline | true/false | false | Turns on/off thick axis line (line appears directly alongside the y-axis labels) |
+| xTickMarks | true/false | false | Turns on/off tick marks for each of the x-axis labels |
+| yTickMarks | true/false | false | Turns on/off tick marks for each of the y-axis labels |
+| yMin | number | | Starting value for the y-axis |
+| yMax | number | | Maximum value for the y-axis |
+
+### Chart
+
+| Property | Type | Default | Description |
+|----------|------|---------|-------------|
+| title | string | | Chart title. Appears at top left of chart. |
+| subtitle | string | | Chart subtitle. Appears just under title. |
+| legend | true/false | true for multiple series | Turns legend on or off. Legend appears at top center of chart. |
+| chartAreaHeight | number | 180 | 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. |
+| renderer | canvas/svg | canvas | 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/). |
+| downloadableData | true/false | true | Whether to show the download button to allow users to download the data |
+| downloadableImage | true/false | true | Whether to show the button to allow users to save the chart as an image |
+
+### Custom Echarts Options
+
+| Property | Type | Default | Description |
+|----------|------|---------|-------------|
+| echartsOptions | `{{exampleOption:'exampleValue'}}` | | Custom Echarts options to override the default options. See [reference page](/components/charts/echarts-options) for available options. |
+| seriesOptions | `{{exampleSeriesOption:'exampleValue'}}` | | 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. |
+| printEchartsConfig | true/false | false | 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 |
+
+### Interactivity
+
+| Property | Type | Description |
+|----------|------|-------------|
+| connectGroup | | Group name to connect this chart to other charts for synchronized tooltip hovering. Charts with the same `connectGroup` name will become connected |
+
+## Annotations
+
+Histograms can include [annotations](/components/charts/annotations) using the `ReferenceLine` and `ReferenceArea` components. These components are used within a chart component like so:
+
+```html
+<Histogram data="sales_data" x=category>
+  <ReferenceLine y=20/>
+  <ReferenceArea xMin=3 xMax=8/>
+</Histogram>
+```

package/dist/docs/data_apps/components/charts/line-chart.md

@@ -0,0 +1,265 @@
+---
+title: Line Chart
+description: Display how one or more metrics vary over time. Line charts are suitable for plotting a large number of data points on the same chart.
+---
+
+Use line charts to display how one or more metrics vary over time. Line charts are suitable for plotting a large number of data points on the same chart.
+
+
+## Example
+
+```svelte
+<LineChart 
+    data="orders_by_month"
+    x=month
+    y=sales_usd0k 
+    yAxisTitle="Sales per Month"
+/>
+```
+
+## Examples
+
+### Line
+
+```svelte
+<LineChart 
+    data="orders_by_month"
+    x=month
+    y=sales_usd0k 
+    yAxisTitle="Sales per Month"
+    title="Monthly Sales"
+    subtitle="Includes all categories"
+/>
+```
+
+### Multi-Series Line
+
+```markdown
+<LineChart 
+    data="orders_by_category"
+    x=month
+    y=sales_usd0k 
+    yAxisTitle="Sales per Month"
+    series=category
+/>
+```
+
+### Multi-Series Line with Steps
+
+```svelte
+<LineChart 
+    data="orders_by_category"
+    x=month
+    y=sales_usd0k 
+    yAxisTitle="Sales per Month"
+    series=category
+    step=true
+/>
+```
+
+### Multiple y Columns
+
+```svelte
+<LineChart 
+    data="orders_by_month"
+    x=month
+    y={['sales_usd0k','orders']} 
+    yAxisTitle="Sales per Month"
+/>
+```
+
+### Secondary y Axis
+
+```markdown
+<LineChart 
+    data="orders_by_month"
+    x=month
+    y=sales_usd0k
+    y2=orders
+    yAxisTitle="Sales per Month"
+/>
+```
+
+### Secondary Axis with Bar
+
+```markdown
+<LineChart 
+    data="orders_by_month"
+    x=month
+    y=sales_usd0k
+    y2=orders
+    y2SeriesType=bar
+    yAxisTitle="Sales per Month"
+/>
+```
+
+### Value Labels
+
+```markdown
+<LineChart 
+    data="orders_by_month"
+    x=month
+    y=sales_usd0k 
+    yAxisTitle="Sales per Month"
+    labels=true
+/>
+```
+
+### Custom Color Palette
+
+```markdown
+<LineChart 
+    data="orders_by_category"
+    x=month
+    y=sales_usd0k 
+    yAxisTitle="Sales per Month"
+    series=category
+    colorPalette="
+        [
+        '#cf0d06',
+        '#eb5752',
+        '#e88a87',
+        '#fcdad9',
+        ]
+    "
+/>
+```
+
+### Markers
+
+#### Default
+
+```svelte
+<LineChart 
+    data="orders_by_month"
+    x=month
+    y=sales_usd0k
+    markers=true 
+/>
+```
+
+#### `markerShape=emptyCircle`
+
+```svelte
+<LineChart 
+    data="orders_by_month"
+    x=month
+    y=sales_usd0k 
+    markers=true
+    markerShape=emptyCircle
+/>
+```
+
+## 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 | - |
+| y | Column(s) to use for the y-axis of the chart | true | column name \| array of column names | - |
+| y2 | Column(s) to include on a secondary y-axis | false | column name \| array of column names | - |
+| y2SeriesType | Chart type to apply to the series on the y2 axis | false | ["line", "bar", "scatter"] | "line" |
+| 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" |
+| handleMissing | Treatment of missing values in the dataset | false | ["gap", "connect", "zero"] | "gap" |
+| 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 | - |
+
+### Formatting & Styling
+
+| Name | Description | Required | Options | Default |
+|------|-------------|----------|---------|---------|
+| xFmt | Format to use for x column | false | Excel-style format \| built-in format name \| custom format name | - |
+| yFmt | Format to use for y column(s) | false | Excel-style format \| built-in format name \| custom format name | - |
+| y2Fmt | Format to use for y2 column(s) | 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 | "-" |
+| step | Specifies whether the chart is displayed as a step line | false | ["true", "false"] | "false" |
+| stepPosition | Configures the position of turn points for a step line chart | false | ["start", "middle", "end"] | "end" |
+| 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 |
+| 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) | - |
+| 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 | - |
+| 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 |
+| labels | Show value labels | false | ["true", "false"] | "false" |
+| labelSize | Font size of value labels | false | number | 11 |
+| labelPosition | Where label will appear on your series | false | ["above", "middle", "below"] | "above" |
+| labelColor | Font color of value labels | false | CSS name \| hexademical \| RGB \| HSL | - |
+| labelFmt | Format to use for value labels | false | Excel-style format \| built-in format name \| custom format name | - |
+| yLabelFmt | Format to use for value labels for series on the y axis. Overrides any other formats | false | Excel-style format \| built-in format name \| custom format name | - |
+| y2LabelFmt | Format to use for value labels for series on the y2 axis. Overrides any other formats | false | Excel-style format \| built-in format name \| custom format name | - |
+| showAllLabels | Allow all labels to appear on chart, including overlapping labels | false | ["true", "false"] | "false" |
+| 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"] | "false" |
+| yAxisTitle | Name to show beside y-axis. If 'true', formatted column name is used. | false | ["true", "string", "false"] | "false" |
+| y2AxisTitle | Name to show beside y2 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" |
+| y2Gridlines | Turns on/off gridlines extending from y2-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" |
+| y2AxisLabels | Turns on/off value labels on the y2-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" |
+| y2Baseline | Turns on/off thick axis line (line appears directly alongside the y2-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" |
+| y2TickMarks | Turns on/off tick marks for each of the y2-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" |
+| y2Min | Starting value for the y2-axis | false | number | - |
+| y2Max | Maximum value for the y2-axis | false | number | - |
+| y2Scale | Whether to scale the y-axis to fit your data. `y2Min` and `y2Max` take precedence over `y2Scale` | false | ["true", "false"] | "false" |
+
+### 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 | Turn 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
+
+Line charts can include [annotations](/components/charts/annotations) using the `ReferenceLine` and `ReferenceArea` components. These components are used within a chart component like so:
+
+```html
+<LineChart data="sales_data" x="date" y="sales">
+	<ReferenceLine data="target_data" y="target" label="name" />
+	<ReferenceArea xMin="2020-03-14" xMax="2020-05-01" />
+</LineChart>
+```