@covalent/echarts/wordcloud/README.md

Teradata UI Platform Echarts Module

# td-chart-series[td-wordCloud]

`td-chart-series[td-wordCloud]` element generates a graph series echarts visualization inside a `td-chart`. Its the equivalent of creating a JS series object `type="wordCloud"` in echarts.

## API Summary

#### Inputs

- config?: any
  - Sets the JS config object if you choose to not use the property inputs.
  - Note: [config] input properties will override input values

There are also lots of property inputs like:

- id?: string
  - It can be used to refer the component in option or API.
- name: string
  - Series name used for displaying in tooltip and filtering with legend.
- value: number
  - Series value used for varying the size of the labels.
- color?: string | () => string
  - Global color for the series. It can be generated by a function
- gridSize?: number
  - Size of the grid in pixels for marking the availability of the canvas the larger the grid size, the bigger the gap between words.

And so many more.. for more info [click here](https://github.com/ecomfe/echarts-wordcloud)

## Setup

Import the [CovalentWordcloudEchartsModule] in your NgModule:

```typescript
import { CovalentBaseEchartsModule } from '@covalent/echarts/base';
import { CovalentWordcloudEchartsModule } from '@covalent/echarts/wordcloud';
@NgModule({
  imports: [
    CovalentBaseEchartsModule,
    CovalentWordcloudEchartsModule,
    ...
  ],
  ...
})
export class MyModule {}
```

## Usage

Basic Example:

```html
<td-chart [style.height.px]="500">
  <td-chart-series
    td-wordCloud
    [shape]="circle"
    [sizeRange]="[12, 60]"
    [rotationRange]="[-90, 90]"
    [rotationStep]="45"
    [gridSize]="8"
    [drawOutOfBound]="false"
    [textStyle]="{
                    normal: {
                      fontFamily: 'sans-serif',
                      fontWeight: 'bold',
                      color: '#ccc'
                    },
                    emphasis: {
                      shadowBlur: 10,
                      shadowColor: '#333'
                    }
                  }"
    [data]="[{
                    name: 'Benjamin Abraham',
                    value: 366,
                    normal: {
                      fontFamily: 'arial',
                      fontWeight: '100',
                      color: 'red'
                    },
                  }, {
                    name: 'Mary Stuart',
                    value: 366
                  }, {
                    name: 'John Doe',
                    value: 350
                  }]"
  >
  </td-chart-series>
</td-chart>
```