GWT: height of charts legend and title are inside graph?

[MartinSchwarzbauer]

Hi *!

I am a bit confused about positioning legend and title!
I set the height of chart to e.g. 300px! When i position the legend and/or title on top or bottom i sometime see the next 'scale' line?
How can i avoid this?

The whole chart has e.g. 300px (including legend, title, etc.) But i think there is maybe a problem drawing this on canvas?

[stockiNail]

It is weird... Charba doesn't do anything to change layout which is automatically calculated by Chart.js.
IT could be related to responsive approach of Chart.js.
Let me try to reproduce the same situation and then I'm gonna give a feedback.

[stockiNail]

@MartinSchwarzbauer I tested with my charts.

Here is the code:

BarChartWidget chart = new BarChartWidget();
chart.setHeight("300px");
chart.getOptions().setResponsive(true);
chart.getOptions().setMaintainAspectRatio(false);  // <---  DISABLES maintain aspect ratio
chart.getOptions().getTitle().setDisplay(true);  // <-- ENABLES title
chart.getOptions().getTitle().setText("My first chart");

BarDataset dataset = chart.newDataset();
dataset.setLabel("dataset 1");

dataset.setBackgroundColor(HtmlColor.CORNFLOWER_BLUE.alpha(0.2));
dataset.setBorderColor(HtmlColor.CORNFLOWER_BLUE);
dataset.setBorderWidth(1);
dataset.setData(20, 5, 40, 35, 50, 70, 80);

chart.getData().setLabels("January", "February", "March", "April", "May", "June", "July");
chart.getData().setDatasets(dataset);
		
CartesianCategoryAxis axis1 = new CartesianCategoryAxis(chart);
axis1.setDisplay(true);
axis1.getTitle().setDisplay(true);
axis1.getTitle().setText("Month");

CartesianLinearAxis axis2 = new CartesianLinearAxis(chart);
axis2.setDisplay(true);
axis2.getTitle().setDisplay(true);
axis2.getTitle().setText("Value");
axis2.getTicks().setDisplay(true);

chart.getOptions().getScales().setAxes(axis1, axis2);
RootPanel.get().add(chart);

When you you set the dimension (mainly height) you should disable the maintainAspectRatio otherwise it will ignore the dimension.
Furthermore you should enable the title display.

Here the result of above sample:

[MartinSchwarzbauer]

Here is my source:

ui-binder:

<g:DisclosurePanel ui:field="disclosure_graphs" width="100%">
  <g:VerticalPanel ui:field="vp_graphs" width="100%">
    <g:cell width="100%" height="300px" verticalAlignment="middle" horizontalAlignment="center">
      <c:TimeSeriesLineChartWidget ui:field="chartCpu"/>
    </g:cell>

    <g:cell width="100%" height="300px" verticalAlignment="middle" horizontalAlignment="center">
      <c:TimeSeriesLineChartWidget ui:field="chartMemory"/>
    </g:cell>
  </g:VerticalPanel>
</g:DisclosurePanel>

Source:

private void initChart(TimeSeriesLineChartWidget chart, String title, String xAxis, String yAxis, boolean stacked) {
    // general stuff
    chart.setDrawOnAttach(true);
    chart.setDestroyOnDetach(false);
    chart.getOptions().setResponsive(true);
    chart.getOptions().setMaintainAspectRatio(false);
    
    // tooltips
    chart.getOptions().getTooltips().setTitleMarginBottom(5);
    chart.getOptions().getTooltips().setMode(InteractionMode.NEAREST);
    chart.getOptions().getTooltips().setIntersect(false);
    
    // legend
    chart.getOptions().getLegend().setDisplay(true);
    chart.getOptions().getLegend().setPosition(Position.TOP);
    
    // title
    //chart.getOptions().getTitle().setFullSize(true);
    chart.getOptions().getTitle().setDisplay(!title.isEmpty());
    chart.getOptions().getTitle().setText(title);
    chart.getOptions().getTitle().setPosition(Position.TOP);
    
    // size    
//    chart.getElement().getStyle().setMarginBottom(10, Unit.PX);
    //chart.getChartElement().getStyle().setHeight("300px");
    //    chart.setHeight("30vh");
   // chart.setWidth("100%");
    
    // X axis
    CartesianTimeSeriesAxis x_axis = chart.getOptions().getScales().getTimeAxis();
    x_axis.getTicks().setSource(TickSource.DATA);
    x_axis.setBounds(Bounds.DATA);
    x_axis.getTime().setUnit(TimeUnit.MINUTE);
    x_axis.getTitle().setText(xAxis);
    x_axis.getTime().getDisplayFormats().setDisplayFormat(TimeUnit.MINUTE, DateTimeFormat.getFormat(PredefinedFormat.TIME_SHORT).getPattern());
    
    // Y axis
    CartesianLinearAxis y_axis = chart.getOptions().getScales().getLinearAxis();
    y_axis.setDisplay(true);
    y_axis.setBeginAtZero(true);
    y_axis.setStacked(stacked);
    y_axis.setMin(0.0);
    y_axis.setBounds(Bounds.DATA);
    y_axis.getTitle().setText(yAxis);
    y_axis.getTitle().setDisplay(true);
  }

When i fill chart with data ... I get this:

[stockiNail]

@MartinSchwarzbauer I was able to reproduce the issue.
Let me take time to check how to solve.

This is with DisclosurePanel:

Here with HTML Panel:

It sounds better with Html panel but I see something weird anyway.

[stockiNail]

@MartinSchwarzbauer I have checked more in details you axis configuration and there is a property which is the root cause of the rendering.

Remove the bounds setting in the linear axis or set to Bound.TICKS (instead of Bound.DATA), and it works.

 y_axis.setBounds(Bounds.TICKS);

Anyway the Chart.js community is having a look because there is a weird behavior:

chartjs/Chart.js#9178

[stockiNail]

The issue has been solved by chartjs/Chart.js#9181.
Chart.js version 3.3.1 is needed!

[stockiNail]

Chart.js version 3.3.2 has been added to the master branch. With that, the issue about the usage of Bounds.DATA has been solved.

[MartinSchwarzbauer]

Sorry for my late replay! Thank you very much - everything is working as expected!