Search code examples
javascriptgraphbar-chartbillboard.js

Billboardjs - Hatched bar graph

Bar graph design:

I am using billboardjs(for Angular) bar graph to display some analytics. Now my requirement is to show the bars for comparision. One bar should be in dark color and another should be with hatched coloring. Attaching the image of the required graph I want to achieve. enter image description here

Now I am able to achieve the hatched graph but both the bars are hatched. But what I need is one graph should be dark blue and other should be hatched(alternate bar to be hatched) Following is the image of graph what i have achieved now enter image description here

Following is the code block I have used.

I only need alternate bar to be hatched. How to achieve. Any suggestions/solutions are of greater help.

// base css
import 'billboard.js/dist/theme/insight.css';
import bb from 'billboard.js';
import * as d3 from 'd3';

// for ESM environment, need to import modules as:
// import bb, {areaSpline, bar, bubble} from "billboard.js";
var chart = bb.generate({
  data: {
    json: {
      data1: [15, 23],
    },
    types: {
      data1: 'bar',
    },
  },
  bar: {
    padding: 50,
  },
  color: {
    pattern: ['#002781'],
    tiles: function () {
      var pattern = d3
        .select(document.createElementNS(d3.namespaces.svg, 'pattern'))
        .attr('patternUnits', 'userSpaceOnUse')
        .attr('width', '10')
        .attr('height', '10');

      var g = pattern
        .append('g')
        .attr('fill-rule', 'evenodd')
        .attr('stroke-width', 100)
        .append('g')
        .attr('fill', 'rgb(155, 169, 206)');

      g.append('polygon').attr('points', '6 0 10 0 0 10 0 6');
      g.append('polygon').attr('points', '10 6 10 10 6 10');
      return [pattern.node()];
    },
  },
  bindto: '#colorTiles2',
});
<div id='colorTiles2'></div>

Solution

  • Specify which index will be applying or not the pattern by data.color option.

    bb.generate({
  data: {
     ...
      color: function (color, d) {
           return d.index === 0 ? "#002781" : color;
      }

    checkout the working demo:

    bb.generate({
  data: {
    json: {
      data1: [15, 23],
    },
    type: 'bar',
      color: function (color, d) {
           return d.index === 0 ? "#002781" : color;
      }
  },
  bar: {
    padding: 50
  },
  color: {
    pattern: ['#002781'],
    tiles: function () {
        var pattern = d3
            .select(document.createElementNS(d3.namespaces.svg, 'pattern'))
            .attr('patternUnits', 'userSpaceOnUse')
            .attr('width', '10')
            .attr('height', '10');

        var g = pattern
            .append('g')
            .attr('fill-rule', 'evenodd')
            .attr('stroke-width', 100)
            .append('g')
            .attr('fill', 'rgb(155, 169, 206)');

            g.append('polygon').attr('points', '6 0 10 0 0 10 0 6');
            g.append('polygon').attr('points', '10 6 10 10 6 10');
      
        return [
            pattern.node()
        ];
    }
  }
});
    <!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/billboard.js/dist/theme/datalab.min.css">
    <script src="https://d3js.org/d3.v7.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/billboard.js/dist/billboard.min.js"></script>
  </head>
<body>
  <div id="chart"></div>
</body>
</html>