I need a horizontal dashed line, no y-axis ticks, hidden x-axis grid lines, and centered x-axis ticks for my bar chart. Solution required in vue-chartjs.
Chartjs installed package:
“chart.js”: “^4.4.3”,
“chartjs-plugin-datalabels”: “^2.2.0”,
Here is the simplest solution of this problem.
Here is the simplest solution of this problem.
option object is here:-
options: {
responsive: true,
plugins: {
tooltip: {
enabled: false,
backgroundColor: "#227799",
yAlign: "center",
},
datalabels: {
// Position of the labels
// (start, end, center, etc.)
anchor: "end",
offset: -7, // adjust this value to move the label closer to the bar
// Alignment of the labels
// (start, end, center, etc.)
align: "end",
// Color of the labels
color: "#3c0d48",
font: {
weight: "bold",
},
formatter: function (value, context) {
// Display the actual data value
return value > 0 ? value : ""; // only display value if it's greater than 0
},
},
},
scales: {
x: {
ticks: {
minor: {
enabled: true, // show minor ticks
display: "auto", // display minor ticks automatically
color: "gray", // color of minor ticks
lineWidth: 0.5, // width of minor ticks
},
},
grid: {
drawTicks: true,
display: true,
offset: false,
tickColor: "#707070",
color: "transparent",
},
border: {
display: true,
color: "#707070",
},
ticks: { color: "#000" },
},
y: {
grid: {
color: "#707070",
tickBorderDash: [],
display: true,
drawBorder: true, // <-- this removes x-axis line
lineWidth: 0.5,
drawTicks: false,
},
border: {
display: false,
dash: [4, 4],
},
ticks: {
color: "#00000",
display: true,
padding: 8,
},
},
},
},
Please share solution if you have.
Thanks