Add title property to Bar-Chart

CHANGELOG.md

@@ -5,10 +5,11 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
-## [0.2.2] - 2019-10-04
+## [0.2.2] - 2019-10-06
 
 ### Added
 
+- Add property title to Bar-Chart
 - Add properties xlabel and ylabel to Bar-Chart
 
 ## [0.2.0] - 2019-10-02

projects/ng-charts/src/lib/components/barChart.ts

@@ -11,18 +11,20 @@ export class NgBarChartComponent implements OnInit {
   d3: any
   $: any
   @Input() data: any
+  @Input() title: any
   @Input() xlabel: any
   @Input() ylabel: any
 
   constructor() { }
 
   ngOnInit() {
     const data = this.data
+    const title = this.title
     const xlabel = this.xlabel
     const ylabel = this.ylabel
     const svg = d3.select('svg')
 
-    const margin = {top: 20, right: 20, bottom: 40, left: 50}
+    const margin = {top: 40, right: 20, bottom: 50, left: 50}
     const width = +document.querySelector('svg').clientWidth - margin.left - margin.right
     const height = +document.querySelector('svg').clientHeight - margin.top - margin.bottom
 
@@ -44,7 +46,7 @@ export class NgBarChartComponent implements OnInit {
       g.append('text')
         .attr('transform',
               'translate(' + (width / 2) + ' ,' +
-                              (height + margin.top + 15) + ')')
+                              (height + margin.top) + ')')
         .style('text-anchor', 'middle')
         .text(xlabel)
     }
@@ -82,6 +84,14 @@ export class NgBarChartComponent implements OnInit {
           $(this).css('opacity', '0.8')
         })
 
+    if (title) {
+      g.append('text')
+        .attr('x', (width / 2))
+        .attr('y', 0 - (margin.top / 2))
+        .attr('text-anchor', 'middle')
+        .text(title)
+    }
+
     return svg.node()
   }
 }

src/app/app.module.ts

@@ -84,6 +84,7 @@ const appRoutes: Routes = [
         { key: 'B', value: 50 }
       ],
       properties: [
+        {name: 'title', type: 'String', desc: 'Title of the plot'},
         {name: 'xlabel', type: 'String', desc: 'Label which should be shown along the x-achses'},
         {name: 'ylabel', type: 'String', desc: 'Label which should be shown along the y-achses'}
       ]

src/app/components/component/component.component.html

@@ -6,6 +6,7 @@ <h1>{{ name }}</h1>
         <lib-bar-chart
           *ngSwitchCase="'/components/barchart'"
           [data]="data"
+          title="Title"
           ylabel="Values"
           xlabel="Keys"
         ></lib-bar-chart>