# Bullet chart in javascript

**URL:** <https://community.plotly.com/t/bullet-chart-in-javascript/2822>\
**Category:** plotly.js\
**Created:** [December 5, 2016, 9:18am UTC](https://community.plotly.com/t/bullet-chart-in-javascript/2822 "2016-12-05T09:18:33Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![melmell](https://avatars.discourse-cdn.com/v4/letter/m/bc8723/32.png) [@melmell](https://community.plotly.com/u/melmell)\
**Post date:** [December 5, 2016, 9:18am UTC](https://community.plotly.com/t/bullet-chart-in-javascript/2822/1 "2016-12-05T09:18:33Z")

</div>

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

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

---

<div class="post-metadata">

**Author:** ![jack](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/jack/32/11_2.png) [@jack](https://community.plotly.com/u/jack)\
**Post date:** [December 7, 2016, 4:06pm UTC](https://community.plotly.com/t/bullet-chart-in-javascript/2822/2 "2016-12-07T16:06:58Z")

</div>

(1) Go to the [bullet chart URL](https://plot.ly/~riddhiman/407/) from the post you mentioned above.

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

[https://plot.ly/~riddhiman/407.js](https://plot.ly/~riddhiman/407.js)

---

<div class="post-metadata">

**Author:** ![stefan\_aleksik](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/stefan_aleksik/32/7448_2.png) [@stefan\_aleksik](https://community.plotly.com/u/stefan_aleksik)\
**Post date:** [July 30, 2019, 11:34am UTC](https://community.plotly.com/t/bullet-chart-in-javascript/2822/3 "2019-07-30T11:34:26Z")

</div>

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

```

 ![image](https://us1.discourse-cdn.com/flex024/uploads/plot/original/2X/c/cbcbf9fa8e91a494dd61645b04ba2d0e9566b05c.png)