'Chart.js v2 - Partial Y -grid lines with bar chart

ChartJSBarChart

I want tiny "ticks" on the x-axis as seen in the image in between the green bars, that go into the chart, but not all the way to the top of the chart. I have been able to turn them on or off, but have not been able to have them only going partially up the chart.



Solution 1:[1]

Was able to accomplish this in a bit of a "hacky" way, but ended up doing this:

 options= {
        scales: {
                // The following will affect the vertical lines (xAxe) of your dataset
                xAxes: {                 
                    grid: {
                        tickWidth:0, 
                        borderDashOffset:-210,
                        drawBorder:true,
                        borderDash: [20,230],    
                    },
                },
                
        }
    }

The tickWdith: 0 is to stop the ticks from going below the x-axis line. The borderDash was fine-tuned to what I needed, 230 was the sweetspot to get to the bottom of my chart since the dashes start at the top of the grid-lines. The borderDashOffset was -210, the length of the border dash + the negative of the spacing(230). Here is also a posted pic of my finished result:

enter image description here

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Jacob Shaffer