gramex-bullet-chart
v1.0.2
Published
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.
Downloads
13
Readme
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);