How to make chart bigger by removing chart label

Hi,

I am using the chart as the only item in the dashboard group so there is no need for a second title so I decide to leave the label blank. If I leave it blank, the space for the label takes up half of the space that is allocated to the chart item.

Is there a way to remove the space that is normally used for the label (not needed) and allow the chart to take up the given space?

Thanks.
image

image

Well you can turn off the group label instead:-)

You can shift things upwards a bit with CSS too.
Give the dashboard group a CSS class "compact" and add a template node for the CSS

<style>
   .compact p.nr-dashboard-cardtitle {
    margin-top: 0;
    margin-bottom: 0;
    }
    .compact p.label.nr-dashboard-chart-title.nr-dashboard-chart-titlel {
    display: none;
    }
</style>

The first rule isn't needed if you turn off hte group label.

Thanks for the display tip, It helps remove the white space, but doesn't make the problem go away of resizing the chart to take up that white space. (aka make the chart taller).
image

try this template - set to head section

[{"id":"6dc7c5b5.7182dc","type":"ui_template","z":"ccaa93c6.20c32","group":"9364173a.ae55b","name":"bigger chart with no label","order":5,"width":0,"height":0,"format":"<style>\np.nr-dashboard-chart-title {\n  padding: unset;\n}\ncanvas.chart.chart-line {\n    height:calc(100%) !important;\n    width: calc(100%) !important;\n}\n.nr-dashboard-chart-nolabel {\n    height:calc(100% - 22px)\n}\n</style>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"global","className":"","x":730,"y":480,"wires":[[]]},{"id":"9364173a.ae55b","type":"ui_group","name":"CSS Style","tab":"dc50fb1.77df988","order":1,"disp":true,"width":"6","collapse":false,"className":""},{"id":"dc50fb1.77df988","type":"ui_tab","name":"Home Page","icon":"","order":1,"disabled":false,"hidden":false}]

The bar Chart resized better but not the line chart with the legend. Any advice?

Pre

Post

Add a class to the chart (add it to every chart you need to be adjusted)

image

And a bit CSS (only one of those needed)

Result

1 Like

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.