Bullet chart in javascript

I came across an example implementing a bullet chart using R.
http://moderndata.plot.ly/bullet-charts-in-r-using-plotly/

I was wondering if anyone implemented this chart using java script?
Thanks

(1) Go to the bullet chart URL from the post you mentioned above.

(2) Add “.js” to get the JavaScript code:

https://plot.ly/~riddhiman/407.js

2 Likes

Hey I am not sure if this is still relevant. I am brand new to plotly.js . I just made this bullet chart, hope it can help. If you have any suggestions feel free to share.

 let trace1 = {
  x: [33],
  y: ['Machine 1'],
  name: 'Bad',
  orientation: 'h',
  width: 3,
  type: 'bar'
  };

  let trace2 = {
    x: [66],
    y: ['Machine 1'],
    name: 'Medium',
    orientation: 'h',
    width: 3,
    type: 'bar'
    };

  let trace3 = {
    x: [100],
    y: ['Machine 1'],
    name: 'Good',
    orientation: 'h',
    width: 3,
    type: 'bar'
    };

    let trace4 = {
      x: [55],
      y: ['Machine 1'],
      name: 'Current',
      orientation: 'h',
      width: 1,
      type: 'bar'
      };


let layout: any = {
  barmode: 'overlay',
  shapes: [
    // 1st highlight during Feb 4 - Feb 6
    {
        type: 'rect',
        // x-reference is assigned to the x-values
        xref: 'x',
        // y-reference is assigned to the plot paper [0,1]
        yref: 'paper',
        x0: '77',
        y0: 0,
        x1: '78',
        y1: 1,
        fillcolor: '#000000',
        opacity: 1,
        line: {
            width: 0
        },
        name: 'Target'
    }]
};
let data1 = [trace3, trace2, trace1, trace4];



Plotly.newPlot(divArray[1], data1, layout, {responsive: true});

three reasons why you should buy plotly pro: support open source, get great support, host your plots and dashboards online