1

How do i set the chart background? I can set the backgroud of the parent, but i only want to set the background to the data space and not axis.

My current solution is to use bb-event-rects class

#myChart .bb-event-rects {
  fill-opacity: 1 !important;
  fill: red;
}

But it doesn't feel right

Porfírio
  • 175
  • 1
  • 3
  • 11

1 Answers1

2

Well, that's the easy approach one. If fulfill your needs, that's okay just styling with the css.

But, probably you'll find that <rect> elements has blank spaces between. So, to cover up all the area just add a new <rect> element to functioning as styling the background.

Check out the example below:

EDIT(03/12/19): Implemented new background option since v1.11.0. Checkout the Demo.

EDIT: The simple way:

1) Just fill the color for event <rect> elements, but in this case you will have blank spaced area in left & right.

.bb-event-rects .bb-event-rect {
   fill: cyan;
}

2) Or simply use 'regions' option

bb.generate({
   ...
   regions: [{ axis: "x" }],

.bb-region {fill: cyan; }


var chart = bb.generate({
 data: {
  columns: [
   ["data1", 30, 20, -5, 40, 15, 25],
   ["data2", 3, 10, 20, 10, 25, 15]
  ]
 },
 oninit: function() {
  this.svg.select("g.bb-event-rects").insert("rect")
    .attr("width", "100%")
    .attr("height", "100%")
    .attr("class", "myBgColor");
 }
});
.myBgColor {
    fill: cyan;
    fill-opacity: 1;
}
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/billboard.js/dist/billboard.min.css" />
    <script src="https://cdn.jsdelivr.net/npm/billboard.js/dist/billboard.pkgd.min.js"></script>
    <title>billboard.js</title>
</head>
<body>
  <div id="chart"></div>
</body>
</html>
Jae Sung Park
  • 900
  • 6
  • 9
  • Thank's! The CSS is solving the issue for now, if i get any troubles with it i will have your solution as a backup plan! – Porfírio Feb 22 '18 at 09:03