Chart title

[Shaelex]

I'm submitting a ...

• [ ] bug report - search github for a similar issue or PR before submitting
• [x] feature request
• [ ] support request - use StackOverflow (add the ngx-charts tag) or the gitter chat for support questions

Feature In my opinion there should be an option to specify a title of a chart and the position of this title. For example in my case I would like to have some kind of text inside the doughnut chart, e.g total number of values or something like that.

Current behavior

As far as I know currently you can't create a chart's title and specify a place where it belongs.

Expected behavior

As said in Feature section, imo there should be an option to specify a title and titlePosition in the same way as labels or something.

What is the motivation / use case for changing the behavior?

For example: in league of legends you get a grade after every game, grade is connected with champion. And imagine a case, when you want to make a chart with S and A grades. So on the chart there are champion names and the count of grades, you have two almost same charts, and ofc you can just make a header just above te chart, but in this case in my option big S inside the doughnut would be the best pick. Moreover for example you can show the percent of total in the center of doughnut while there is a value in tooltip.

[kathomas921]

I would absolutely love this feature. I just started using ngx-charts this past week and am baffled that it doesn't have a title option - that's a crucial part of any respectable graph. Please implement this.

[juarezpaf]

@Shaelex It looks like the PR #262 is addressing this issue.

[sarora2073]

+1 on putting this feature into ngx-charts. Titles ought be centered based on the width of the chart to prevent it from looking off.

For now, i'm hard-coding the width of the chart into the header (as shown below). using angular/flex-layout for convenience.

<!-- CHART HEADER -->
      <div fxFlex="0 0 **700px**" fxLayoutAlign="center start">
        <span>{{myChart.title}}</span>
      </div>
<!-- / CHART HEADER -->

<!-- CHART -->
      <div fxFlex="1 0 100%" fxLayout="row">
        <ngx-charts-bar-horizontal-stacked [view]=[**700**,250]>
		..
        </ngx-charts-bar-horizontal-stacked>
      </div>
<!-- / CHART -->

[chriszrc]

@juarezpaf I don't see how #262 addresses this? @sarora2073 That's a reasonable approach for when the chart width is known, but I generally have all my charts setup for auto widths, so we really need a solution that allows you to center the title directly over the chart (excluding the axes info).

Here's an example, where a client would like the title directly over the chart:

[sarora2073]

@chriszrc As another workaround, you want try creating a header container that has left / middle / right elements. The left and right would be fixed widths that match the left and right sides of the chart, and then center the title in The middle element which fills the remaining space. Just a thought..not sure if the chart resizes left and right sides of the chart though.

[chriszrc]

@sarora2073 Right that's the thing though, if the data changes, and the numbers are smaller, then the padding on the left changes :(

[sarora2073]

ugh. sounds like you'd might want to hack the styles for now or else do a PR.

p.s. this is one the reasons I just decided to use fixed width.

[KaranTrivedi]

lmao how does a charting library not have a title for charts?