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.
-
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.
-
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);