Tiny graphs - Maximizing space

[hamster]

I'm creating a series of small graphs to fit within a column. I have them working as intended but am trying to squeeze every extra pixel I can. I've attached a picture...is there a way to remove any/all of the green circled sections? The Y axis label isn't a huge deal since I sometimes will need it for other graphs, but there are blank sections on either end I'd like to use to stretch the graph a bit more on the X axis.

edit: second question: i know how to reduce the ticks on the X axis, but how do I make them horizontal instead of diagonal? Even when I reduce the amount and theres space in between, they stay diagonal.

[nfuse]

did you found a solution for this and if so can you share the code for this tiny graph? thanks in advance

[Lokonli]

You can use the undocumented 'options' parameter for a few things.

To remove the y-axis label, and to keep the x-axis tick marks horizontal, add the following:

Code: Select all

blocks['graph_2'] = {
    options : {
        scales: {
            yAxes: [{
                scaleLabel: {
                    display: false
                }
              }
            ],
            xAxes: [{
                ticks: {
                    maxRotation: 0
                }
              }
            ]

        }
    }
}

[Lokonli]

In addition, to maximize the space, you can also slightly scale the graph.

In custom.css add the following

Code: Select all

.dt_block[data-id='graph_2'] .graphcontent {
   transform: scale(1.05,1.05)
}

[hamster]

thanks for the reply!

did you found a solution for this and if so can you share the code for this tiny graph? thanks in advance

here's my final (just the relevant block)-
config.js:

Code: Select all

blocks['energygraph'] = {
   devices: [370],
   height: '125px',
   width: 12,
   datasetColors: ['white'],
   maxTicksLimit: 12,
   custom: {
       "today": {
            range: 'today',
            data: {
                Usage: 'd.v_370'            
                  }
                }
           },
		   options : {
        scales: {
            yAxes: [{
                scaleLabel: {
                    display: false
                }
              }
            ],
            xAxes: [{
                ticks: {
                    maxRotation: 0,
                }
              }
            ]

        }
    }
}

and custom.css:

Code: Select all

[data-id='energygraph'].graph .graphheader {
  display: none;
}
.dt_block[data-id='energygraph'] .graphcontent {
   transform: scale(1.06,1.20);
   margin-left:15px
}