Блог

 labels = ['JAN', 'FEB', 'MAR', 'APR', 'MAY', 'JUN', 'JUL', 'AUG', 'SEP', 'OCT', 'NOV', 'DEC'];
  chartData = [
    {
      label: 'Doctors',
      data: [10, 20, 30, 40, 50, 40, 30, 20, 10, 20, 30, 40],
      backgroundColor: 'rgb(81, 193, 190)',
    },
    {
      label: 'Clinics',
      data: [20, 30, 40, 50, 40, 30, 20, 10, 20, 30, 40, 50],
      backgroundColor: 'rgb(46, 135, 203)',
    },
    {
      label: 'Hospitals',
      data: [30, 40, 50, 40, 30, 20, 10, 20, 30, 40, 50, 40],
      backgroundColor: 'rgb(209, 174, 200)',
    },
    {
      label: 'Pathology/Diagnosis',
      data: [40, 50, 40, 30, 20, 10, 20, 30, 40, 50, 40, 30],
      backgroundColor: 'rgb(103, 48, 121)',
    }
  ];

ngOnInit() {
    this.showChart();
}

showChart() {
    //var ctx = document.getElementById('barCanvas');
    const canvas = <HTMLCanvasElement> document.getElementById('barCanvas');
    const ctx = canvas.getContext('2d');
    this.barChart = new Chart(ctx, {

      type: 'bar',
      data: {
        labels: this.labels,
        datasets: this.chartData
      },
      options: {
        responsive: true,
        //maintainAspectRatio: false
      }
    });

    this.barChart.reDraw();
  }  

 .flex-container {
  display: flex;
  flex-direction: column;
  background-color: #ff80bf;
  flex-wrap: wrap;
}

.child-div {
  background-color: #6600cc;
  width: 100px;
  margin: 10px;
  text-align: center;
  padding-top: 20px;
  padding-bottom: 20px;
  font-size: 30px;
}

.chart-container {
  position: relative !important;
  width: 100%;
  height: 100%;
  // display: block !important;

  canvas {
    width: 100% !important;
    max-width: 800px;
    height: auto !important;
  }
}


.row {
  display: block;
  // border: 1px solid red;
}
.col-12{
  display: inline-block;
  width: 100%;
}
.col-9{
  display: inline-block;
  width: 75%;
}
.col-3{
  display: inline-block;
  width: 25%;
}
.p1{
  padding: 1em 1em;
}  

 <div class='row'>
  <div class='col-9'>
     <div class="chart-container">
      <canvas id="barCanvas"></canvas>
     </div>   
  </div>
  <div class='col-3 p1'>
    <div>
      <div class="flex-container">
        <div class="title">Dummy Heading</div>
        <div class="child-div">1</div>
        <div class="child-div">2</div>
        <div class="child-div">3</div>  
      </div>
    </div>
  </div>
</div>