Tyatech Chart

Contributions

Contributions are very welcome! It helps me know what features are desired or what bugs are causing the most pain.

I have just one request; If you submit a pull request for a bugfix, please add a unit-test or integration-test (in the spec folder) that catches the problem. Even a PR that just has a failing test is fine - I can analyse what the test is doing and fix the code from that.

Contact Info: [email protected]

Note: Please try to avoid modifying the package version in a PR. Versions are updated on release and any change will most likely result in merge collisions.

To be clear, all contributions added to this library will be included in the library's MIT licence.

Contents

Donut Chart⬆

Demo

Module

import { TyaDonutChartModule } from 'tyatech-chart';

...

@NgModule({
  imports: [
    ...
    TyaDonutChartModule,
  ],
})

Component

import { DonutChartTextType } from 'tyatech-chart';

...

export class AppComponent {
  textType = DonutChartTextType;

  data = [
    { value: 10, data: 'One' },
    { value: 9, data: 'Two' },
    { value: 6, data: 'Three' },
    { value: 5, data: 'Four' },
    { value: 4, data: 'Five' },
    { value: 3, data: 'Six' },
    { value: 1, data: 'Seven' },
  ]
}

HTML:

<tya-donut-chart
  width="100%"
  height="500px"
  [data]="data"
  [alignLabels]="true"
  [isLegend]="true"
  valueField="value"
  dataField="data"
  [textType]="textType.circular"
></tya-donut-chart>

Value | Type | Nullable | Defaut --- | --- | --- | --- width | string |false |
height | string |false |
data | Array |false |
alignLabels | boolea |true | false isLegend | boolea |true | true valueField | string |true | 'value' dataField | string | true | 'data' textType | DonutChartTextType | true | DonutChartTextType.circular

Pie Chart⬆

Demo

Module

import { TyaPieChartModule } from 'tyatech-chart';

...

@NgModule({
  imports: [
    ...
    TyaPieChartModule,
  ],
})

Component

...

export class AppComponent {
  data = [
    { value: 10, data: 'One' },
    { value: 9, data: 'Two' },
    { value: 6, data: 'Three' },
    { value: 5, data: 'Four' },
    { value: 4, data: 'Five' },
    { value: 3, data: 'Six' },
    { value: 1, data: 'Seven' },
  ]
}

HTML:

<tya-pie-chart
  width="100%"
  height="500px"
  [data]="data"
  [endAngle]="270"
  [alignLabels]="true"
  [isLegend]="true"
  valueField="value"
  dataField="data"
>
</tya-pie-chart>

Value | Type | Nullable | Defaut --- | --- | --- | --- width | string |false |
height | string |false |
data | Array |false |
endAngle | number |true | 270 alignLabels | boolea |true | false isLegend | boolea |true | true valueField | string |true | 'value' dataField | string | true | 'data'

Variable Radius Pie Chart⬆

Demo

Module

import { TyaVariableRadiusPieChartModule } from 'tyatech-chart';

...

@NgModule({
  imports: [
    ...
    TyaVariableRadiusPieChartModule,
  ],
})

Component

...

export class AppComponent {
  data = [
    { value: 10, data: 'One' },
    { value: 9, data: 'Two' },
    { value: 6, data: 'Three' },
    { value: 5, data: 'Four' },
    { value: 4, data: 'Five' },
    { value: 3, data: 'Six' },
  ]
}

HTML:

<tya-variable-radius-pie-chart
  width="100%"
  height="500px"
  [data]="data"
  [alignLabels]="true"
  [isLegend]="true"
  valueField="value"
  dataField="data"
></tya-variable-radius-pie-chart>

Value | Type | Nullable | Defaut --- | --- | --- | --- width | string |false |
height | string |false |
data | Array |false |
alignLabels | boolea |true | false isLegend | boolea |true | true valueField | string |true | 'value' dataField | string | true | 'data'

Exploding Pie Chart⬆

Demo

Module

import { TyaExplodingPieChartModule } from 'tyatech-chart';

...

@NgModule({
  imports: [
    ...
    TyaExplodingPieChartModule,
  ],
})

Component

...

export class AppComponent {
  data = [
    {
      data: 'Lithuania',
      value: 500,
      subData: [
        { data: 'A', value: 200 },
        { data: 'B', value: 150 },
        { data: 'C', value: 100 },
        { data: 'D', value: 100 },
      ],
    },
    {
      data: 'Czechia',
      value: 300,
      subData: [{ data: 'A', value: 150 }],
    },
    {
      data: 'Ireland',
      value: 200,
      subData: [
        { data: 'A', value: 110 },
        { data: 'B', value: 60 },
        { data: 'C', value: 30 },
      ],
    },
    {
      data: 'Germany',
      value: 150,
      subData: [
        { data: 'A', value: 80 },
        { data: 'B', value: 40 },
        { data: 'C', value: 30 },
      ],
    },
    {
      data: 'Australia',
      value: 140,
      subData: [
        { data: 'A', value: 90 },
        { data: 'B', value: 40 },
        { data: 'C', value: 10 },
      ],
    },
    {
      data: 'Austria',
      value: 120,
      subData: [
        { data: 'A', value: 60 },
        { data: 'B', value: 30 },
        { data: 'C', value: 30 },
      ],
    },
  ]
}

HTML:

<tya-exploding-pie-chart
  width="100%"
  height="500px"
  [data]="data"
  valueField="value"
  dataField="data"
></tya-exploding-pie-chart>

Value | Type | Nullable | Defaut --- | --- | --- | --- width | string |false |
height | string |false |
data | Array |false |
valueField | string |true | 'value' dataField | string | true | 'data'

Column with Rotated Labels⬆

Demo

Module

import { TyaColumnRotatedLabelsModule } from 'tyatech-chart';

...

@NgModule({
  imports: [
    ...
    TyaColumnRotatedLabelsModule,
  ],
})

Component

...

export class AppComponent {
  data = [
    { data: 'USA', value: 2025 },
    { data: 'China', value: 1882 },
    { data: 'Japan', value: 1809 },
    { data: 'Germany', value: 1322 },
    { data: 'UK', value: 1122 },
    { data: 'France', value: 1114 },
    { data: 'India', value: 984 },
    { data: 'Spain', value: 711 },
    { data: 'Netherlands', value: 665 },
    { data: 'South Korea', value: 443 },
    { data: 'Canada', value: 441 },
  ]
}

HTML:

 <tya-column-rotated-labels
  width="100%"
  height="500px"
  [data]="data"
  valueField="value"
  dataField="data"
 ></tya-column-rotated-labels>

Value | Type | Nullable | Defaut --- | --- | --- | --- width | string |false |
height | string |false |
data | Array |false |
valueField | string |true | 'value' dataField | string | true | 'data'

Multi Column Chart⬆

Demo

Module

import { TyaMultiColumnChartModule } from 'tyatech-chart';

...

@NgModule({
  imports: [
    ...
    TyaMultiColumnChartModule,
  ],
})

Component

...

export class AppComponent {
  data = [
    { value: 'Research', data1: 1000, data2: 588, },
    { value: 'Marketing', data1: 1200, data2: 1800, },
    { value: 'Sales', data1: 850, data2: 1230, },
    { value: 'Sales 1', data1: 950, data2: 1430, },
    { value: 'Sales 2', data1: 890, data2: 1130, },
    { value: 'Sales 4', data1: 820, data2: 1030, },
  ];
}

HTML:

<tya-multi-column-chart
  width="100%"
  height="500px"
  [data]="data"
  valueField="value"
  [dataField]="['data1', 'data2']"
  [dataFieldView]="['Data 1', 'Data 2']"
></tya-multi-column-chart>

Value | Type | Nullable | Defaut --- | --- | --- | --- width | string |false |
height | string |false |
data | Array |false |
valueField | string |true | 'value' dataField | string[] | true | ['data1', 'data2'] dataFieldView | string[] | true | ['Data 1', 'Data 2']