NuCivic / react-nvd3

React component for NVD3 re-usable charting library
MIT License
136 stars 44 forks source link

Example for Bullet Chart #47

Closed UkiMiawz closed 8 years ago

UkiMiawz commented 8 years ago

Hi, I tried to render bullet chart but its not showing. My data

var data = [{
   key: "Revenue",
   value: [
    {"title":"Revenue","subtitle":"US$, in thousands","ranges":[150,225,300],"measures":[220,270],"markers":[250]},
    {"title":"Profit","subtitle":"%","ranges":[20,25,30],"measures":[21,23],"markers":[26]},
    {"title":"Order Size","subtitle":"US$, average","ranges":[350,500,600],"measures":[100,320],"markers":[550]},
    {"title":"New Customers","subtitle":"count","ranges":[1400,2000,2500],"measures":[1000,1650],"markers":[2100]},
    {"title":"Satisfaction","subtitle":"out of 5","ranges":[3.5,4.25,5],"measures":[3.2,4.7],"markers":[4.4]}
   ]
  }]; 

and my component render

<NVD3Chart type="bulletChart"
                datum={data}
                noData="This is not the bullet chart you're looking for"
                width="500" />

Did I pass the wrong dataset?

Thank you for your help

topicus commented 8 years ago

I'll take a look. Seems like a bug.

UkiMiawz commented 8 years ago

Hi, I managed to find my problem, its like what I suspect, I gave the chart the wrong dataset. I'm sorry for the trouble

My final dataset

const datum = {
            "title": "Revenue",
            "subtitle": "US$, in thousands",
            "ranges": [150, 225, 300],
            "measures": [220],
            "markers": [250]
       };
topicus commented 8 years ago

Awesome, let me know if you have any other issue.