'Chart.js v2 - Partial Y -grid lines with bar 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:
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 |


