MaintainRatio and Mobile

[nseb]

I use maintainRatio to have a fairly consistent HMI, in some cases this is not enough, and setter the heigth pixel a little annoying depending on the size of the viewport. It's would be possible to have in addition to the property maintainRatio, a ratioFactor to determine the height according to the width, today by default, it's 1/2

[stockiNail]

uhm... it sounds an enhancement for CHART.JS. Otherwise you should set height pixel, depending on width at runtime by a plugin...

[stockiNail]

@nseb just being sure, you set a specific Fontsize on the ticks, doesn't it?

[nseb]

Yes , 8px

[stockiNail]

@nseb sorry for delay of reply. Reading again the issue, if I've understood well you would like to have ratioFactor between the width and height of the canvas, where height must calculated by ratioFactor. Correct?

[nseb]

@stockiNail , Yes ! For example , I have another problem with long label , in this case I must increase height ?

[stockiNail]

@nseb to set the ratio, we should act before drawing the chart. At the moment I haven't add the teh ratioFactor as propety of chart options but you can set it by a plugin (in the meanwhile).

the following is the code:

chart.getOptions().setMaintainAspectRatio(false);

Set to false the maintainAspectRatio

chart.getPlugins().add(new AbstractPlugin() {

    @Override
    public String getId() {
        return "size";
    }

    @Override
    public void onBeforeInit(AbstractChart<?, ?> chart, JavaScriptObject options) {
        int w = chart.getCanvas().getParentElement().getOffsetWidth(); //get width of parent
        chart.getCanvas().setWidth(w); // set width of parent
        chart.getCanvas().setHeight(w/3); // apply ratio
    }
});

This is simplest way. Of course we can:

• add ratioFactor as property of chart options
• apply the logic if maintainAspectRatio equals to false and ratioFactorgreater than 0 to all charts

Above logic will be applied before drawing the chart, inside the AbstractChart class. What do you think?

[stockiNail]

@nseb About the above picture that you uploaded, 2 thoughts, from my side, if I may:

1. if you have only 1 dataset, don't show legend (to have more space) and use title
2. the tick label is too long. Maybe you can reduce it (leaving only the label) and the dates are in another widget (maybe a table) with details.

[nseb]

@stockiNail , thanks for your reply For Ratio, I will try the option with the plugin

[stockiNail]

@nseb Under the review we are doingfor jsinterop, I see that CHART.JS added new property aspectRatio:

Name	Type	Default	Description
aspectRatio	Number	2	Canvas aspect ratio (i.e. width / height, a value of 1 representing a square canvas). Note that this option is ignored if the height is explicitly defined either as attribute or via the style.

This is new and it's missing in Charba. We will implement soon.

[stockiNail]

@nseb added new property.

Here is part of the code:

chart.getOptions().setResponsive(true);
chart.getOptions().setMaintainAspectRatio(true);
chart.getOptions().setAspectRatio(3);

Here is the picture (w: 1539, h:513):

The aspect ratio is also maintained during the resize. We are preparing the new version 1.7.

[stockiNail]

Charba 1.7 released