billboard.js - Set color based on label value, so that data for a given label is consistently colored across multiple charts

Question

I have multiple bar charts, each showing a single data value for multiple items. I would like to have the color of the bar be consistent for each item across all of the charts.

Here is an example of the data:

Items Data1 Data2 Data3 Data4 Dogs 5 50 18 27 Cats 9 33 26 30 Hamsters 5 22 8 43

Chart 1 shows the Data1 values for Dogs, Cats, and Hamsters, Chart 2 shows the Data2 values for Dogs, Cats, and Hamsters, etc.

I would like to have the bar for Dogs always be green, the bar for Cats always be blue, and the bar for Hamsters to always be yellow across all charts. Is this possible?

Looking at the billboard.js API I see I can set the color of the data, however this sets a particular data field's color to be the same across all items so that on a chart showing only Data1 every bar is the same color.

Other charting libraries I have looked at (highcharts, c3, google) seem to be similarly constrained. Is there another way of approaching this or something I am overlooking?

score 0 · Accepted Answer · answered Sep 24 '19 at 09:11

You can do by combining bb.defaults() and data.color option. Checkout the snippet example.

// set default options for whole charts.
bb.defaults({
  data: {
    x: "x",
    type: "bar",
    color: function(color, d) {
      // specify colors you need
      return ["red", "green", "blue"][d.index]
    }
  },
  axis: {
     x: {
        type: "category"
     }
  }
});


// All generated charts will be defaulted from above options.
var chart = bb.generate({
  data: {
    columns: [
  ["x", "Dogs", "Cats", "Hamsters"],
  ["data1", 5, 9, 5]
 ]
  }
});

var chart = bb.generate({
  bindto: "#chart2",
  data: {
    columns: [
  ["x", "Dogs", "Cats", "Hamsters"],
  ["data1", 50, 33, 22]
 ]
  }
});

var chart = bb.generate({
  bindto: "#chart3",
  data: {
    columns: [
  ["x", "Dogs", "Cats", "Hamsters"],
  ["data1", 18, 26, 8]
 ]
  }
});

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>billboard.js</title>
  <link rel="stylesheet" href="https://unpkg.com/billboard.js/dist/theme/insight.css">
  <script src="https://unpkg.com/billboard.js/dist/billboard.pkgd.min.js"></script>
<style>
  .bb {
    width: 300px;
    height: 220px;
  }
</style>
</head>
<body>
    <div id="chart"></div>
    <div id="chart2"></div>
    <div id="chart3"></div>
</body>
</html>

billboard.js - Set color based on label value, so that data for a given label is consistently colored across multiple charts

1 Answers1