Currently, labels often overlap making them illegible and an eyesore. We should try to implement a method to render labels without collisions. This is especially an issue when "zoomed in" on the chart.

Review the method outlined here which may provide a solution: https://www.ncbi.nlm.nih.gov/pmc/articles/PMC4802654/

Current designs call for a pop-up or overlay card, that can inspect contents of a data point on hGraph.

It would be ideal to be able to feed in an external React component via a prop. Possible API might look like the following:

          <HGraph
            data={ data.currentData }
            width={ graphSize }
            height={ graphSize }
            healthyRangeFillColor={themePrimaryColor}
            showScore={ false }
            margin={{ top: 140, right: 72, bottom: 140, left: 72 }}      
            popUpPosition={['bottom', 'right']} // auto?
            popUpComponent={<SimplePopUp theme="dark" />}
          /> 

Request from the design team to decrease the font weight of the hScore in the center. We currently have scoreFontSize and scoreFontColor, but no ability to control for font weight.

          <HGraph
            data={ data.currentData }
            width={ graphSize }
            height={ graphSize }
            score={ 42 }
            scoreFontSize={ graphSize < 300 ? 48 : 96 }
            scoreFontWeight={ 200 }
          /> 

Hello,
We're trying to adjust the metrics of hGraph to do a categorical view of FHIR resource collections, in which case most all values will be 0 to N. So, we're trying to feed a dataset into hGraph that looks roughly like this:

let collectionBuckets = [
  {
    "id": "allergyIntoleranceCount",
    "label": "Allergy Intolerances",
    "healthMin": 0,
    "healthMax": 10,
    "absoluteMin": 0,
    "absoluteMax": 100,
    "value": 5,
    "weight": 10,
    "unitLabel": "records"
  },
  {
    "id": "conditionCount",
    "label": "Conditions",
    "healthMin": 0,
    "healthMax": 20,
    "absoluteMin": 0,
    "absoluteMax": 200,
    "value": 14,
    "weight": 10,
    "unitLabel": "records"
  },
  {
    "id": "diagnosticReportCount",
    "label": "Diagnostic Reports",
    "healthMin": 0,
    "healthMax": 20,
    "absoluteMin": 0,
    "absoluteMax": 200,
    "value": 6,
    "weight": 10,
    "unitLabel": "records"
  },
  {
    "id": "encounterCount",
    "label": "Encounters",
    "healthMin": 0,
    "healthMax": 100,
    "absoluteMin": 0,
    "absoluteMax": 1000,
    "value": 22,
    "weight": 10,
    "unitLabel": "records"
  }
];

When it renders, all the points are at the center origin, and aren't picking up the values.

Digging into the console, we're getting a Received NaN for the 'cx' attribute. error message.

Hi,
Next issue... hGraph is loading with the collection counts now, but it's react library is colliding with other libraries. Since React ~16.12, there has been a move towards pure components and the 'Rule of Hooks'. Could we move the react dependency to a peerDependency, and bump it up to @^16.13.0?