# How to make chart bigger by removing chart label

**URL:** <https://discourse.nodered.org/t/how-to-make-chart-bigger-by-removing-chart-label/72008>\
**Category:** Dashboard\
**Tags:** chart\
**Created:** [10 December 2022 21:58 UTC](https://discourse.nodered.org/t/how-to-make-chart-bigger-by-removing-chart-label/72008 "2022-12-10T21:58:13Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![kd9lsv](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/kd9lsv/32/72365_2.png) [@kd9lsv](https://discourse.nodered.org/u/kd9lsv)\
**Post date:** [10 December 2022 21:58 UTC](https://discourse.nodered.org/t/how-to-make-chart-bigger-by-removing-chart-label/72008/1 "2022-12-10T21:58:13Z")

</div>

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](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/5/5/5506332eabfb23a77c550c5f1b1d36cc911e63ff.png)

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/5/4/54385af67396a184474de552ef86b7c2d0eb68e1.png)

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [10 December 2022 22:27 UTC](https://discourse.nodered.org/t/how-to-make-chart-bigger-by-removing-chart-label/72008/2 "2022-12-10T22:27:58Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)\
**Post date:** [10 December 2022 22:50 UTC](https://discourse.nodered.org/t/how-to-make-chart-bigger-by-removing-chart-label/72008/3 "2022-12-10T22:50:32Z")

</div>

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

```auto
<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.

---

<div class="post-metadata">

**Author:** ![kd9lsv](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/kd9lsv/32/72365_2.png) [@kd9lsv](https://discourse.nodered.org/u/kd9lsv)\
**Post date:** [10 December 2022 23:28 UTC](https://discourse.nodered.org/t/how-to-make-chart-bigger-by-removing-chart-label/72008/4 "2022-12-10T23:28:35Z")

</div>

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](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/6/1/616142dc7ac37aef0a49187ebad58e51358bc50e.png)

---

<div class="post-metadata">

**Author:** ![Sean-McG](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/sean-mcg/32/54677_2.png) [@Sean-McG](https://discourse.nodered.org/u/Sean-McG)\
**Post date:** [10 December 2022 23:50 UTC](https://discourse.nodered.org/t/how-to-make-chart-bigger-by-removing-chart-label/72008/5 "2022-12-10T23:50:08Z")

</div>

try this template - set to head section

```auto
[{"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}]

```

---

<div class="post-metadata">

**Author:** ![kd9lsv](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/kd9lsv/32/72365_2.png) [@kd9lsv](https://discourse.nodered.org/u/kd9lsv)\
**Post date:** [11 December 2022 00:17 UTC](https://discourse.nodered.org/t/how-to-make-chart-bigger-by-removing-chart-label/72008/6 "2022-12-11T00:17:42Z")

</div>

> [@Sean-McG](#):
>
> `":"`

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

Pre

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/2/7/271b07026857161000ae9ba9762fe9db446d473f.png)

Post

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/e/c/ec6c546143ea91e9cf5d38e9b773612877841db6.png)

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [11 December 2022 08:56 UTC](https://discourse.nodered.org/t/how-to-make-chart-bigger-by-removing-chart-label/72008/7 "2022-12-11T08:56:37Z")

</div>

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

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/3/c/3c8c9f086845825fe7fbb33bf6216c617e86ad0a.png)

And a bit CSS (only one of those needed)

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/8/d/8d32a4972592849c01ca621891114dc525e085ca.png)

Result

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/1/2/12c4c1532da8afd929aa80d5b7a1b172ce0f8bc8.png)

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [10 January 2023 08:57 UTC](https://discourse.nodered.org/t/how-to-make-chart-bigger-by-removing-chart-label/72008/8 "2023-01-10T08:57:23Z")

</div>

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