Skip to main content

Data

data​

Provide chart data directly to render without making an API call.

<prompt-chart
  data='{
    "chartSpec": {"type": "bar", "title": "Quarterly Sales"},
    "data": {
      "labels": ["Q1", "Q2", "Q3", "Q4"],
      "datasets": [{"label": "Revenue ($K)", "data": [120, 150, 180, 220]}]
    }
  }'
></prompt-chart>

demo​

  • Type: boolean

Enables demo mode which generates mock chart data client-side without making API calls.

<prompt-chart prompt="Show sales distribution" demo autoFetch></prompt-chart>

Types​

ChartResponse​

The complete response object containing chart configuration, data, and optional metadata.
chartSpec is the chart configuration including type, title, and axis settings.
data contains the actual data to be rendered in the chart.
metadata is an optional object with information about the data source:
  generatedAt is the timestamp when the data was generated.
  dataset is the name or identifier of the source dataset.
  recordCount is the number of records used to generate the chart data.

interface ChartResponse {
  chartSpec: ChartSpec;
  data: ChartData;
  metadata?: {
    generatedAt: string;
    dataset: string;
    recordCount: number;
  };
}

ChartSpec​

Defines the chart type and visual configuration.
type is the chart type. Supported values: 'bar', 'line', 'pie', 'doughnut', 'scatter', 'area'.
title is the title displayed at the top of the chart.
xAxis is an optional x-axis configuration object:
  label is the label for the x-axis.
  type is the axis type (e.g., 'category', 'time', 'linear').
yAxis is an optional y-axis configuration object:
  label is the label for the y-axis.
  type is the axis type (e.g., 'linear', 'logarithmic').
legend is an optional legend configuration object:
  position is the legend position. Values: 'top', 'bottom', 'left', 'right'.
  display controls whether to show the legend. Defaults to true.

interface ChartSpec {
  type: 'bar' | 'line' | 'pie' | 'doughnut' | 'scatter' | 'area';
  title: string;
  xAxis?: {label?: string; type?: string};
  yAxis?: {label?: string; type?: string};
  legend?: {position?: 'top' | 'bottom' | 'left' | 'right'; display?: boolean};
}

ChartData​

Contains the labels and datasets to be rendered in the chart.
labels is an array of labels for the x-axis or pie/doughnut segments.
datasets is an array of dataset objects, each representing a data series:
  label is the name of the dataset, displayed in the legend.
  data is an array of numeric values corresponding to each label.
  backgroundColor is the fill color(s) for the chart elements. Can be a single color or an array of colors for each data point.
  borderColor is the border color(s) for the chart elements. Can be a single color or an array of colors.
  borderWidth is the width of the border in pixels.

interface ChartData {
  labels: string[];
  datasets: Array<{
    label: string;
    data: number[];
    backgroundColor?: string | string[];
    borderColor?: string | string[];
    borderWidth?: number;
  }>;
}