gramex-sparkline-chart v1.0.3

drawSparkline Function

The drawSparkline function is a utility function designed to create a simple sparkline chart using the D3.js library. This function generates a sparkline within the specified HTML element, displaying a line chart with tooltips for each data point.

Usage

// Example usage
drawSparkline({
  selector: "#sparkline-container",
  lineColor: "blue",
  circleColor: "red",
  circleStroke: "white",
  circleRadius: 4,
  width: 300,
  height: 100,
  data: yourDataArray,
  xVariable: "date", // Replace with your actual x-variable property
  yVariable: "value", // Replace with your actual y-variable property
});

Parameters

• selector (String): The CSS selector of the HTML element where the sparkline chart will be rendered.
• lineColor (String): The color of the sparkline.
• circleColor (String): The color of the circles representing data points.
• circleStroke (String): The color of the circle strokes.
• circleRadius (Number): The radius of the circles representing data points.
• width (Number): The width of the sparkline chart.
• height (Number): The height of the sparkline chart.
• data (Array): An array of objects containing the data points for the sparkline chart.
• xVariable (String): The property name in each data point object representing the x-axis variable.
• yVariable (String): The property name in each data point object representing the y-axis variable.

Example Data Format

// Data Format

const yourDataArray = [
  { date: new Date("2023-01-01"), value: 10 },
  { date: new Date("2023-01-02"), value: 15 },
  // ... additional data points
];

Tooltip

The function includes a tooltip that displays information about each data point when hovering over the corresponding circle.