Changing default chart axis thickness in Billboard

2019-07-11 06:21发布

问题:

I've created a chart with Billboard.js (an interface chart library based on D3 v4+). The problem I have is with the thickness of the axis which are made by default pretty thick, I couldn't find any method to make them slimmer.

This is how my chart looks like:

I managed to change their thickness when I right-clicked on them and opened in inspect, the element for the vertical axis is:

<path class="domain" d="M-6,1H0V446H-6"></path>

and for the horizontal axis it is:

<path class="domain" d="M0,6V0H898V6"></path>

I discovered that if I change the 6s with 2s in inspect mode to be like:

<path class="domain" d="M-2,1H0V446H-2"></path> and

<path class="domain" d="M0,2V0H898V2"></path>, it will look much slimmer as it should be. Is there a way to make this change in the css/less file?

回答1:

Is quite easy. Just set css rule for axis. set rule for .bb-axis and set stroke-width property value you want.

Check out the example below.

bb.generate({
	"data": {
		"columns": [
			["data1", 30, 200, 100, 400, 150]
		],
	}
});

/* set for y axis */
.bb-axis.bb-axis-y path {
	stroke-width: 3px;
}

/* set for all the axes.
.bb-axis {
  stroke-width: 3px;
}
*/

<!doctype html>
<html>
<head>
    <script src="//cdn.jsdelivr.net/npm/billboard.js@1.1.1/dist/billboard.pkgd.min.js"></script>
    <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/billboard.js@1.1.1/dist/billboard.css">
</head>
<body>
  <div id="chart"></div>
</body>
</html>