billboard.js 3.9 release: arc.needle, dark theme 🌘 & more!

[donut | gauge]: {
   // when 'arc.needle.show=true' is set, will able to use template to reflect needle value
   title: "{=NEEDLE_VALUE}"
},
arc: {
   needle: {
       show: true,
       color: "red", // any valid CSS color

       // for customized needle
       path: function(length) {
         const len = length - 20;

         // will return upper arrow shape path
         // Note: The path should begun from '0,0' coordinate to top center.
         const path = `M 0 -${len + 20}
           L -12 -${len}
           L -5 -${len}
           L -5 0
           A 1 1 0 0 0 5 0
           L 5 -${len}
           L 12 -${len} Z`;

         return path;
       },

       value: 40,  // will make needle to point value 40.
       length: 80, // needle length in percentages relative to radius.

       top: {
         // rx and ry are the two radii of the ellipse;
         // https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/d#elliptical_arc_curve
         rx: 1,
         ry: 1,
         width: 5
       },

       bottom: {
         // rx and ry are the two radii of the ellipse;
         // https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/d#elliptical_arc_curve
         rx: 1,
         ry: 1,
         width: 10
         len: 10
       }
     }
 }

// Update arc needle position
const chart = bb.generate({
  data: {
    type: "donut"
  },
  arc: {
    needle: {
      show: true,
      ...
    }
  }
});

chart.$.needle.updateHelper(70);  // update needle position to point value 70.

// update needle position to point value 70 and the config value.
// NOTE: updating config value, will update needle pointer initial value too.
chart.$.needle.updateHelper(70, true);

// update needle point position every 1 second
let i = 0;
setInterval(() => {
  chart.$.needle.updateHelper(i += 10);
}, 1000)

point: {
     // having lower value, means how closer to be for interaction
     sensitivity: 3,

     // sensitivity based on point's radius
     sensitivity: "radius",

     // callback for each point to determine the sensitivity
     sensitivity: function(d) {
       // ex. of argument d:
       // ==> {x: 2, value: 55, id: 'data3', index: 2, r: 19.820624179302296}

       // returning d.r, will make sensitivity same as point's radius value.
       return d.r;
     }
}

data: {
  ...
  labels: {
     show: true,
     /**
      * The arguments are:<br>
      * - `type` coordinate type string, which will be 'x' or 'y'.
      * - `v` is the value of the data point where the label is shown.
      * - `id` is the id of the data where the label is shown.
      * - `i` is the index of the data series point where the label is shown.
      * - `texts` is the array of whole corresponding data series' text labels.
      */
     position: function(type, v, id, i, texts) {
       let pos = 0;
       const len = texts.size() / 2 - 1;

       if (type === "x" && (i === 0 || i === len)) {
         pos = i === 0 ? 20 : -20;
       }

       return pos;
    }
  }
}

bar: {
    front: true
}

legend: {
   item: {
      // will disable default interaction (mouse hover effect and click to hide clicked dataseries)
      interaction: false | {
        /**
        * Set legend item to interact on double click.
        *  - **NOTE:**
        *    - Double clicking will make focused clicked dataseries only, hiding all others.
        *      - for single click case, `click + altKey(Win)/optionKey(Mac OS)` to have same effect.
        *    - To return initial state(which all dataseries are showing), double click current focused legend item again.
        *      - for single click case, `click + altKey(Win)/optionKey(Mac OS)` to have same effect.
        *    - In this case, default `click` interaction will be disabled.
        */
        dblclick: true
      },

      // when set below callback option value, will work regardless of 'interaction=false' is set
      onclick: function(id) { ... },
      onover: function(id) { ... },
      onout: function(id) { ... }
   }
}