gramex-histogram-bullet-chart v1.0.3

D3 Histogram Bullet Chart

This JavaScript function utilizes the D3 library to draw a histogram bullet chart. The chart visualizes a current value in comparison to a target value across different color-coded ranges. Additionally, it includes interactive features such as tooltips.

Function: drawHistBullet

Parameters:

• selector: A string representing the CSS selector of the HTML element where the chart will be rendered.

• config: An object containing configuration parameters for the chart, including width, height, scalesData, and scales.

• data: An object with current and target properties, each having value and text attributes.

Example Usage:

// Sample data
const data = {
  current: { value: 3, text: "Current" },
  target: { value: 7, text: "Target" },
};

// Sample configuration
const config = {
  width: 400,
  height: 50,
  scalesData: [
    { start: 0, end: 2, color: "green" },
    { start: 2, end: 4, color: "yellow" },
    { start: 4, end: 6, color: "orange" },
    { start: 6, end: 8, color: "red" },
  ],
  scales: [2, 4, 6, 8],
};

// Call the drawHistBullet function
drawHistBullet("#chart-container", config, data);

### Chart Features:
- Color-Coded Ranges: Different color ranges represent distinct scales in the chart.
- Target Line: A vertical line indicates the target value.
- Current Value: Displayed as a filled rectangle within the chart.
- Tooltips: Interactive tooltips show additional information on hover.

### Customization:
- Adjust the values in the config and data objects to customize the appearance and data displayed by the chart.
- Modify the scalesData array to define color-coded ranges.
- Customize tooltips and other visual elements as needed.