Skip to content

Commit

Permalink
✨ Add option to toggle SVG background color
Browse files Browse the repository at this point in the history
  • Loading branch information
@joao-m-santos
joao-m-santos committed Oct 28, 2022
1 parent eb16886 commit fee8fe0
Show file tree
Hide file tree
Showing 3 changed files with 18 additions and 12 deletions.
28 changes: 16 additions & 12 deletions src/components/core/lume-chart/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -98,18 +98,22 @@ The simplest use for `lume-chart` is by providing `data` and `labels` props and

Interface: `ChartOptions`

| Name | Type | Description |
| -------------- | ------------------------- | ------------------------------------------------------------------------------------------- |
| margins | `Margins` | Space around the chart. |
| xAxisOptions | `AxisOptions` | Set of options for the X axis. |
| yAxisOptions | `AxisOptions` | Set of options for the Y axis. |
| tooltipOptions | `TooltipOptions` | Set of options for the tooltip component. |
| startOnZero | `boolean` | Controls if the Y scale should start on `0`. Always `true` for Bar charts. |
| withTooltip | `boolean` | Displays the chart tooltip. |
| withLegend | `boolean` | Displays the chart legend in the header. |
| withTransition | `boolean` | Toggles the chart transition animations. |
| noBaseScales | `boolean` | Controls if `LumeChart` should generate general-purpose scales or not. |
| classList | `string \| Array<string>` | A class or array of classes to apply to the chart group elements, such as bars, lines, etc. |
| Name | Type | Description |
| --------------------- | ------------------------- | ------------------------------------------------------------------------------------------- |
| margins | `Margins` | Space around the chart. |
| xAxisOptions | `AxisOptions` | Set of options for the X axis. |
| yAxisOptions | `AxisOptions` | Set of options for the Y axis. |
| tooltipOptions | `TooltipOptions` | Set of options for the tooltip component. |
| colorPalette | `ColorPalette` | Which color sequence to use for rendering the datasets. |
| startOnZero | `boolean` | Controls if the Y scale should start on `0`. Always `true` for Bar charts. |
| withTooltip | `boolean` | Displays the chart tooltip. |
| withLegend | `boolean` | Displays the chart legend in the header. |
| legendPosition | `'top' \| 'bottom'` | Where to display the chart legend. |
| withTransition | `boolean` | Toggles the chart transition animations. |
| noBaseScales | `boolean` | Controls if `LumeChart` should generate general-purpose scales or not. |
| noMinSize | `boolean` | If true, the chart container will not have minimum width/height. |
| transparentBackground | `boolean` | If true, the `<svg>` container will not have a solid background. |
| classList | `string \| Array<string>` | A class or array of classes to apply to the chart group elements, such as bars, lines, etc. |

### Slot props

Expand Down
1 change: 1 addition & 0 deletions src/components/core/lume-chart/lume-chart.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
:margins="allOptions.margins"
:container-size="containerSize"
:no-min-size="allOptions.noMinSize"
:transparent-background="allOptions.transparentBackground"
data-j-lume-chart
@resize="updateSize"
@mouseleave="handleMouseleave"
Expand Down
1 change: 1 addition & 0 deletions src/composables/options.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,7 @@ export interface ChartOptions extends Options {
withTransition?: boolean;
noBaseScales?: boolean;
noMinSize?: boolean;
transparentBackground?: boolean;
}

export interface BarChartOptions extends ChartOptions {
Expand Down

0 comments on commit fee8fe0

Please sign in to comment.