Title in sparkline style takes too much space

[randallt]

I want to add a simple title to a sparkline style chart. It works, but it looks like it is adding an extra blank line under the title that I would like to be able to shrink. I cannot find the option that will shrink it. I tried legend options, thinking that the legend was maybe just invisible but still taking up space, but they seemed to do nothing:

https://quickchart.io/chart?w=300.0&h=50.0&c={options:{title:{display:true,fontSize:8,padding:0,lineHeight:0.9,text:%20%27Custom%20Chart%20Title%27}},type:%27sparkline%27,data:{datasets:[{fill:false,borderColor:%27%232600B3%27,data:[879.11,825.94,379.39,126.72,544.82,733.4,718.33,660.73,709.85,721.42,617.17,861.83,772.04,707.63,721.03,834.32,1160.28,1158.58,1375.07,1317.01,1205.02,1283.56,1314.6,1310.92,1284.54,1387.67,1341.67,1372,1936.74,2004.12,2192.87,2104.62,2372.13,2785.5,2962.51,1875.21,1396.24,1339.36,1328.07,1482.32,1782.14,1802.6,1721.93,1549.49,1591.41,1741.08,1860.23,1945.79,1777.81,2293.56,1014.22,527.88,461.3,2899.83,3537.15,2898.9,2786.21,1754.3,1549.68,1528.1,1632.58]}]}}

[randallt]

Actually, strangely this doesn't seem to be a problem for all charts (without changing options), so I'm wondering if it is somehow based on the values in the dataset.

[randallt]

Some examples where it looks fine:
https://quickchart.io/chart?w=300.0&h=50.0&c=%7Boptions:%7Btitle:%7Bdisplay:true,fontSize:6,fontStyle:%27normal%27,padding:0,lineHeight:0.8,text:%20%27Hits+2-Month+Trend%27%7D%7D,type:%27sparkline%27,data:%7Bdatasets:%5B%7Bfill:false,borderColor:%27%232600B3%27,data:%5B626166,619362,276292,108867,467096,691632,661713,563225,716527,655337,476897,723850,727557,712822,792693,816914,989916,1007506,1022045,1036208,1062704,1097894,1119117,1107538,1124199,1153713,1148594,1168500,1505007,1532396,1634322,1567617,1624504,1896959,2576655,1311711,1133909,1172865,1149605,1122109,1226734,1244413,1287481,1295857,1349571,1424159,1430339,1467077,1434341,3461580,817719,388949,389091,8978476,2535756,9287639,7362889,1647212,1632569,1657884,1671801%5D%7D%5D%7D%7D

https://quickchart.io/chart?w=300.0&h=50.0&c=%7Boptions:%7Btitle:%7Bdisplay:true,fontSize:6,fontStyle:%27normal%27,padding:0,lineHeight:0.8,text:%20%27Average+Response+Time+in+ms+2-Month+Trend%27%7D%7D,type:%27sparkline%27,data:%7Bdatasets:%5B%7Bfill:false,borderColor:%27%232600B3%27,data:%5B84,80,82,70,70,64,65,70,59,66,78,71,64,60,55,61,70,69,81,76,68,70,70,71,69,72,70,70,77,78,81,81,88,88,69,86,74,69,69,79,87,87,80,72,71,73,78,80,74,40,74,81,71,19,84,19,23,64,57,55,59%5D%7D%5D%7D%7D

Another example where there is too much empty space (could have scaled the line graph up more):
https://quickchart.io/chart?w=150.0&h=50.0&c=%7Boptions:%7Btitle:%7Bdisplay:true,fontSize:6,fontStyle:%27normal%27,padding:0,lineHeight:0.8,text:%20%27Hourly+Compute+Time+in+minutes+on+03%2F25%27%7D%7D,type:%27sparkline%27,data:%7Bdatasets:%5B%7Bfill:false,borderColor:%27%232600B3%27,data:%5B70.57,77.24,76.38,67.47,67.27,72.61,66.94,67.5,64.11,67.47,66.51,67.72,71.81,69.58,69.55,81.17,74.78,71.31,73.1,74.63,75.92,72.61,66.31,70.07%5D%7D%5D%7D%7D

[typpo]

You're right that it depends on the values of the dataset. The Y axis is fitted based on the range of data. Chart.js automatically does this fit so that the chart fits nicely within the allotted space.

The correction for this is to explicitly set the y axis range on options.scales.yAxes.ticks (min and max values, see documentation here).

I've made a change so that for sparklines, the y axis is fit exactly to the minimum and maximum range of the data. This means that sparklines will fill the allotted chart space and you can use title padding etc to position the title as desired.

You may have to hard-refresh your browser to see the new graphs because they are cached.

Taking your example of https://quickchart.io/chart?w=150.0&h=50.0&c=%7Boptions:%7Btitle:%7Bdisplay:true,fontSize:6,fontStyle:%27normal%27,padding:0,lineHeight:0.8,text:%20%27Hourly+Compute+Time+in+minutes+on+03%2F25%27%7D%7D,type:%27sparkline%27,data:%7Bdatasets:%5B%7Bfill:false,borderColor:%27%232600B3%27,data:%5B70.57,77.24,76.38,67.47,67.27,72.61,66.94,67.5,64.11,67.47,66.51,67.72,71.81,69.58,69.55,81.17,74.78,71.31,73.1,74.63,75.92,72.61,66.31,70.07%5D%7D%5D%7D%7D

Before

After