npm package: @lguntuku02/bar-chart
Description: ``` <app-barChart #chart1    [chartOptions]="chartOptions"   [divId]="divId"    [chartData]="chartData"  [colorPalette]="colorPalette"    [yAxisOptions]="yAxisOptions"  [xAxisOptions]="xAxisOptions"   [titleOptions]="titleOptions"  [legendOptions]="legend
Latest version: 1.2.4

## Bar chart

```
<app-barChart #chart1 
  [chartOptions]="chartOptions"   [divId]="divId" 
  [chartData]="chartData"  [colorPalette]="colorPalette"
   [yAxisOptions]="yAxisOptions"  [xAxisOptions]="xAxisOptions"
  [titleOptions]="titleOptions"  [legendOptions]="legendOptions"
  [gridLines]="gridLines"
  [tooltip]=true  (toolttipValues)="tooltipValues($event, 'chart1')">
</app-barChart>

```

### to dispaly tooltip data on hover

```
<div *ngIf="tooltipData && tooltipSource === 'chart1'"  id="tooltip">
    <label style="color: #7F8592;">{{ tooltipData?.xAxisLabel }} : </label>
    <label style="color: #21242F">{{ tooltipData?.yAxisLabel }} :</label>
    <label style="color: #21242F;">{{ tooltipData?.value }}</label>
</div>
```

### variabe decalaration
 ```
  divId = "barchart"
  chartData = []
  chartOptions: any;
  titleOptions: any;
  xAxisOptions: any;
  yAxisOptions: any;
  legendOptions: any;
  colorPalette = ["cadetblue", "coral", 'darkkhaki']
  tooltipData: any;
  tooltipSource: any;
  gridLines: any;
  chartBorder :any;
```
### Here divId is the unique Id for bar

### colorPalette is used to add colors to the bar

### To add chart details such as backgroundcolor , axisType or scale type ,width , height & margin 

```
    this.chartOptions = {   
      backgroundColor: '#f1a891',
      axisType: 'linear',
      width: 800,
      height: 500,
      margin: {
        top: 81, bottom: 146, left: 114, right: 55
      },
      displayChart: true,
    } 

```

#### If displayChart is  true, then only chart will be displayed

#### To add vertical & horizontal lines in the chart area then we can use gridLines  
  
```
    this.gridLines = {
      verticalGridLines: {
        majorGridLines: true,
        fill: 'red',
        width: 1
      },
      horizontalGridLines: {
        majorGridLines: true,
        fill: 'red',
        width: 1
      },
    }
```
#### If we need to customize Y-axis options  then we use yAxisOptions property  to style the axis elements and for yaxistitle also we can customize the stylings. To provide yaxis values & also enabling of ticks marks can be done using this property

 ```
    this.yAxisOptions = {
      fontWeight: '400',
      fontSize: 13,
      fontStyle: 'normal',
      lineHeight: '24',
      fill: 'Brown',
      fontFamily: 'Roboto',
      yAxisTitleOptions: {
        fontWeight: '500',
        fontSize: 18,
        fontStyle: 'normal',
        lineHeight: '24',
        fill: 'Brown',
        title: "Quantity",
        fontFamily: 'Roboto',
        rotate: -90,
        X: 40,
        Y: 150,
      },
      yValues: ['HTC', 'Registry', 'Price'],
    }
```
#### If we need to customize X-axis options then we use xAxisOptions property to style the axis elements and for xaxistitle also we can customize the stylings & also enabling of ticks marks can be done using this property

```
    this.xAxisOptions = {
      fontWeight: '400',
      fontSize: 13,
      fontStyle: 'normal',
      lineHeight: '24',
      fill: 'Brown',
      fontFamily: 'Roboto',
      // rotate: -45,     // to rotate the x-axis label  & it position
      // X: -20,
      // Y: 10,
      xAxisTitleOptions: {
        fontWeight: '500',
        fontSize: 18,
        fontStyle: 'normal',
        lineHeight: '24',
        fill: 'Brown',
        title: "Product",
        fontFamily: 'Roboto',
        X: 150,
        Y: 70,
      }
    }
```

#### If we need to customize title options then we use titleOptions property to style the heading & its position

 ```
   this.titleOptions = {
      fontWeight: '600',
      fontSize: 24,
      fontStyle: 'normal',
      lineHeight: '24',
      fill: 'chocolate',
      title: "Reusable Bar Chart",
      fontFamily: 'Roboto',
      X: 400,
      Y: 20
    }
```
#### If we need to customize legend options then we use legendOptions property to style the legends & its position

  ```  
  this.legendOptions = {
      display: true,
      fontWeight: '600',
      fontSize: 12,
      fontStyle: 'normal',
      lineHeight: '24',
      fill: 'brown',
      fontFamily: 'Roboto',
      X: 25,
      Y: 7,
      legendWidth: 20,
      legendHeight: 7,
      spacing: 60,
      legendPosition: "bottom",
      legendLabels: ['HTC', 'Registry', 'Price'],
    }
```

#### To get tooltip data we use this method

 ```
  tooltipValues(data: any, id: any) {
    this.tooltipData = data.myData;
    this.tooltipSource = id;
  }
```

#### here we can provide the chart data in this format

```
   this.chartData = [
    { "label": "R1", "HTC": 270, "Registry": 449, "Price": 250, "Quantity": 150 },
    { "label": "R2", "HTC": 202, "Registry": 327, "Price": 540, "Quantity": 250 },
    { "label": "R3", "HTC": 120, "Registry": 214, "Price": 155, "Quantity": 350 },
    { "label": "R4", "HTC": 114, "Registry": 193, "Price": 170, "Quantity": 188 },
    { "label": "R5", "HTC": 894, "Registry": 155, "Price": 480, "Quantity": 550 },
    { "label": "R6", "HTC": 737, "Registry": 134, "Price": 199, "Quantity": 505 },
   ]
```

#### Sample styling for tooltip
```
#tooltip {
    visibility: hidden;
    position: absolute;
    z-index: 1111;
    width: 20% !important;
    height: auto;
    background-color: rgb(247, 245, 245);
    padding: 5px;
}
```