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;
}