Is there any function to reduce the height of visavail status bar.

[affan00]

I want to reduce the height of the visavail chart.

Can we change the fonts on it so that it is easier to read. (e.g. Bold for Days, smaller for hours) ?

[flrs]

Hi @affan00!

1. There are several elements you can adjust to reduce the height of the chart:

   • Top margin
   • Bottom margin
   • Height of horizontal data bars
   • Spacing between horizontal data bars
   • Vertical space for heading

2. In the existing code, there is a way to modify year ticks to be bold. Have a look at the this code:

     var xTicks = xScale.ticks();
     var isYearTick = xTicks.map(isYear);
     var isMonthTick = xTicks.map(isMonth);
     // year emphasis
     // ensure year emphasis is only active if years are the biggest clustering unit
     if (emphasizeYearTicks
         && !(isYearTick.every(function (d) { return d === true; }))
         && isMonthTick.every(function (d) { return d === true; })) {
       d3.selectAll('g.tick').each(function (d, i) {
         if (isYearTick[i]) {
           d3.select(this)
               .attr({
                 'class': 'x_tick_emph',
               });
         }
       });
       d3.selectAll('.vert_grid').each(function (d, i) {
         if (isYearTick[i]) {
           d3.select(this)
               .attr({
                 'class': 'vert_grid_emph',
               });
         }
       });
     }

   You would have to modify that to emphasize whatever interval you want to highlight.

I hope this helps you to reach your goal!