Force billboard.js spline chart to render all lines

Question

When creating a spline chart using billboard.js, if the data series has some "steep enough" values, the created chart will cut off some of the lines. It will always show all the points, in the chart, but not all the connecting splines.

Setting a top/bottom padding will give the lines some extra space, but this is not reliable enough.

I'd like to know if there is a way to ensure that all the lines will be in the visible area of the spline chart.

options = {
  data: {
    columns: [
      ["data1", -30, 255, 255, -50, -30, 255, 255, -50, -30, 255, 255, -50, 150, 250, 240, 20, 150, 250],
      ["data2", 130, 100, 140, 35, 110, 50, 130, 100, 140, 35, 110, 50, 130, 100, 140, 35, 110, 50]
    ],
    type: "spline",
  },
  size: {
    height: 240,
    width: 480,
  },
};

withpadding= {
  y: {
    padding: {
      top:50,
    },
  },
};

options.bindto = "#chart";
bb.generate(options);
options.bindto = "#chart2";
options.axis = withpadding;
bb.generate(options);

<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/billboard.js/dist/billboard.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/billboard.js/dist/billboard.min.css">
<div id="chart"></div>
<div id="chart2"></div>

score 2 · Accepted Answer · answered Mar 23 '18 at 04:05

You can use clipPath option for that. Just set clipPath=false.

bb.generate({
    data: {
  columns: [
   ["data1", -30, 255, 255, -50, -30, 255, 255, -50, -30, 255, 255, -50, 150, 250, 240, 20, 150, 250],
   ["data2", 130, 100, 140, 35, 110, 50, 130, 100, 140, 35, 110, 50, 130, 100, 140, 35, 110, 50]
  ],
  type: "spline",
 },
 size: {
  height: 240,
  width: 480,
 },
 clipPath: false
});

<!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>

Does the usage of `clipPath: false` has any other side effects? — knee pain, Mar 23 '18 at 08:13
No, in terms of the functionality. Basically the chart area is clipped to not overly pass the actual chart area. The 'clipPath' option is to get rid the clipping only. — Jae Sung Park, Mar 23 '18 at 14:05

Force billboard.js spline chart to render all lines

1 Answers1