How to remove all gridlines, border and show only ticks on a chartjs horizontal bar chart

Question

Following on from the answer in this post

I have the following chart which can also be found here

    const d0 = new Date("2023-02-15T00:00:00.721Z").getTime()
    const d1 = new Date("2023-02-15T01:00:00.721Z").getTime()
    const d2 = new Date("2023-02-15T02:30:00.721Z").getTime()
    const d3 = new Date("2023-02-15T03:20:00.721Z").getTime()
    const d4 = new Date("2023-02-15T05:05:00.721Z").getTime()
    let values = [d0, d1, d2, d3, d4];

    let data = {
        labels: [''],
        datasets: [{
          label: 'up',
          axis: 'y',
          data: [d1],
          backgroundColor: 'red',
        },{
          label: 'down',
          axis: 'y',
          data: [d2],
          backgroundColor: 'yellow',
        },{
          label: 'out',
          axis: 'y',
          data: [d3],
          backgroundColor: 'green',
        },{
          label: 'up',
          axis: 'y',
          data: [d4],
          backgroundColor: 'red',
        }
      ]
      };

    const config = {
    data,
    type: 'bar',
        options:{
          elements: {
            bar: {
              borderWidth: 0
            }
          },
          ticks: {
              display: true
            },

          interaction: {
                mode: 'dataset'
            },
          tooltip: {
             mode: 'dataset'  
          },
          hover: {
               mode: 'dataset'            
            },
           onClick: function (e) {
                           // debugger;
                            var activePointLabel = 
                              this.getElementsAtEventForMode(e, 'dataset', { intersect: true }, false)
                            alert(activePointLabel[0].datasetIndex);
                        }
                    ,      
        plugins: {
          legend: {
            display: false,
          },
          title: {
            display: false,
          },
        },
        indexAxis: 'y',
        responsive: true,
        maintainAspectRatio: false,
        scales: {
          x: {
            grid: {
              display: true
            },
            min: d0,
            ticks: {
                callback: function(value, index, ticks) {
                    return moment(value).format('HH:mm');
                }
            },
          //  afterBuildTicks: axis => axis.ticks = values.map(v => ({ value: v }))
          },
          y: {
             grid: {
              display: false
            },
            
            stacked: true
          },
        }    
      }};
      
      new Chart(document.getElementById("chart"), config);

This produces this...

]1

I would like to get rid of all the grids lines , except the ticks, but if I set the gird displays false the tick also disappear, and it also leave a border around the chart, etg something like

Is there a way to do this?

Answer 1

Just add border: {display: false}, to the scales configuration. (here is the link to the documentation)

...
scales: {
  x: {
    border: {
      display: false,
    },
    ...
  },
  ...
}
...

Update added full running example:

const d0 = moment.duration('07:00:00').asMinutes();
const d1 = moment.duration('09:00:00').asMinutes();
const d2 = moment.duration('10:45:00').asMinutes();
const d3 = moment.duration('17:35:00').asMinutes();
const d4 = moment.duration('19:00:00').asMinutes();
let values = [d0, d1, d2, d3, d4];

let data = {
    labels: [''],
    datasets: [{
      label: 'up',
      axis: 'y',
      data: [d1],
      backgroundColor: 'red',
    },{
      label: 'down',
      axis: 'y',
      data: [d2],
      backgroundColor: 'yellow',
    },{
      label: 'out',
      axis: 'y',
      data: [d3],
      backgroundColor: 'green',
    },{
      label: 'up',
      axis: 'y',
      data: [d4],
      backgroundColor: 'red',
    }
  ]
  };

const config = {
data,
type: 'bar',
    options:{
       plugins: {
        tooltip: {
           mode: 'dataset',
           callbacks: {
            label: function(item){
               return moment().startOf('day').add({ minute: item.raw}).format('HH:mm');
            }
          }
        },
        legend: {
          display: false,
        },
        title: {
          display: false,
        },
    },
    indexAxis: 'y',
    responsive: true,
    maintainAspectRatio: false,
    scales: {
      x: {
        min: d0,
        border: { display: false },
        ticks: {
            callback: function(value, index, ticks) {
                return moment().startOf('day').add({ minute: value}).format('HH:mm');
            }
        },
        afterBuildTicks: axis => axis.ticks = values.map(v => ({ value: v }))
      },
      y: {
        stacked: true,
        grid: { display: false },
      },
    }
  }};
  
  new Chart(document.getElementById("chart"), config);

<script src="//cdn.jsdelivr.net/npm/chart.js"></script>    
<script src="//cdn.jsdelivr.net/npm/moment@^2"></script>
<script src="//cdn.jsdelivr.net/npm/chartjs-adapter-moment@^1"></script>   
<div class="chart" style="height:84px; width:350px;">
    <canvas  id="chart" ></canvas>
</div>

Answer 2

use tickColor (see below config) for v 3.8.2

 scales: {
          x: {
            ...
            grid: {
              display: true,
              drawTicks: true,  //show ticks
              borderColor: "transparent", //horizontal line color above ticks (x-axis)
              color: "transparent",   //grid lines color
              tickColor: "#868e96"  //ticks color (little line above points)
            },
          },
    
          ...
     }