tyatech-chart

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: [e-mail]

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

• Pie & Donut
• • Donut Chart
  • Pie Chart
  • Variable Radius Pie Chart
  • Exploding Pie Chart
• Column & Bar
• • Column with Rotated Labels
  • Multi Column Chart

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']