Bullet chart in javascript

[melmell]

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

[jack]

(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

[stefan_aleksik]

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});