gramex-bullet-chart

1.0.2 • Public • Published

Bullet Chart Generator

Overview

This JavaScript function, drawBulletChart, generates a bullet chart using D3.js. The bullet chart is a compact and efficient way to display performance data, comparing a primary measure to one or more other measures. It is particularly useful for visualizing key performance indicators (KPIs) and their targets.

Usage

Parameters

  • selector (string): The CSS selector for the container where the bullet chart will be rendered.
  • config (object): Configuration settings for the chart.
    • width (number): The width of the chart.
    • height (number): The height of the chart.
    • rectColors (object): Object containing color settings for different chart elements.
      • frontColor (string): Color of the front rectangle representing the current value.
      • backColor (string): Color of the back rectangle representing the previous value.
      • targetColor (string): Color of the target line.
    • font (object): Font settings for chart text.
      • title (object): Title text settings.
        • size (number): Font size.
        • color (string): Font color.
      • subtitle (object): Subtitle text settings.
        • size (number): Font size.
        • color (string): Font color.
      • comparison (object): Comparison text settings.
        • size (number): Font size.
        • color (string): Font color.
      • currentPeriod (object): Current period text settings.
        • size (number): Font size.
        • color (string): Font color.
  • data (array): An array of objects, each containing data for a single bullet chart.
    • max (number): The maximum value for scaling.
    • previous (number): The previous value.
    • current (number): The current value.
    • target (number): The target value.
    • previousTitle (string): Tooltip text for the previous value.
    • currentTitle (string): Tooltip text for the current value.
    • targetTitle (string): Tooltip text for the target value.
    • titleText (string): Title text for the chart.
    • subtitleText (string): Subtitle text for the chart.
    • comparisonText (string): Comparison text for the chart.
    • currentPeriodText (string): Text for the current period.

Example

const selector = "#chart-container";
const config = {
  width: 300,
  height: 80,
  rectColors: {
    frontColor: "#3498db",
    backColor: "#ecf0f1",
    targetColor: "#e74c3c",
  },
  font: {
    title: { size: 14, color: "#333" },
    subtitle: { size: 12, color: "#555" },
    comparison: { size: 10, color: "#777" },
    currentPeriod: { size: 10, color: "#888" },
  },
};

const data = [
  {
    max: 100,
    previous: 70,
    current: 85,
    target: 90,
    previousTitle: "Previous Value: 70",
    currentTitle: "Current Value: 85",
    targetTitle: "Target Value: 90",
    titleText: "Sales Performance",
    subtitleText: "This Month",
    comparisonText: "vs Last Month",
    currentPeriodText: "Current Period: Jan 2023",
  },
  // Add more data objects as needed
];

drawBulletChart(selector, config, data);

Readme

Keywords

Package Sidebar

Install

npm i gramex-bullet-chart

Weekly Downloads

1

Version

1.0.2

License

ISC

Unpacked Size

11.8 kB

Total Files

6

Last publish

Collaborators

  • kmnannamalai