Lib: Title and legend alignment

[louismaximepiton]

Prerequisites

• I have searched for duplicate or closed feature requests
• I have read the contributing guidelines

Proposal

According to the DSM right now, the title and the legend should be left aligned with the left axis of the graph (it needs to be determined for graphs that don't have axis). It's not the case right now in the library.

The main goal of the study is to determine if this feature is too complex to be added:

• If the answer is no, the issue can be transformed into a feature request and it can be implemented right away.
• If the answer is yes, it needs to be reported to the design team so they will be able to modify the kit accordingly and propagate it to the DSM and think about the new good practices.

Motivation and context

Update either the DSM or the lib to have the same rendering and rules.

[vogloblinsky]

From my point of view, this DSM rule is stupid. I have a legend with only two items, and i want them to be align in horizontal center. Not possible just by changing the echarts config because it is hardcoded in css...

[louismaximepiton]

Hello @vogloblinsky,

FYI, it seems like the legend can be horizontally centered from a design point of view if the legend look more related to the chart this way.

Technically speaking, it means that you can achieve this by using themeManager.externalizeLegends() just like the second example that we provide and arrange it the way you want .
For instance it would look like:

themeManager.externalizeLegends(
  myChart,
  [{ legendHolderSelector: '#results_stack_legend', seriesRef: ['result'], orientation: 'horizontal' }]
);

<div class="border border-light position-relative">
  <div class="chart_title">
    <h4 class="display-4 mx-3 mb-1 mt-3">Title</h4>
    <h5 class="display-5 mx-3 mb-1 mt-0">Sub-Title</h5>
  </div>
  <div id="barLine_holder">
    <div id="barLine_chart" style="width: 100%; height: 50vh" class="position-relative"></div>
  </div>
  <div id="results_stack_legend" class="d-flex justify-content-center"></div>
</div>

In the meantime, I'll try to work on a version that will work with your issue.