tyatech-chart
TypeScript icon, indicating that this package has built-in type declarations

1.0.3 • Public • Published

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: truonganh710@gmail.com

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

Package Sidebar

Install

npm i tyatech-chart

Weekly Downloads

0

Version

1.0.3

License

MIT

Unpacked Size

299 kB

Total Files

36

Last publish

Collaborators

  • truonganhdev
  • tya-tech