Vue Data GridBar / Column Sparkline Options

Enterprise
import { AgBarSparklineOptions, ... } from 'ag-charts-community'; // or ag-charts-enterprise

Options

type AgBarSparklineOptions = {
    type: "bar";
    
    /** Direction of the bars, defaults to "vertical" */
    direction?: "horizontal" | "vertical";

    /** Axis configuration, defaults to "category" */
    axis?: "category" | "number" | "time";

    /** Chart min and max values, otherwise inferred from data */
    min?: number;
    max?: number;

    /** For object data, the key to use for the x and y values */
    xKey?: string;
    yKey?: string;

    /** Display names for x and y tooltip values, not displayed if undefined */
    xName?: string;
    yName?: string;
    normalizedTo?: number;

    /** Tooltip configuration */
    tooltip?: AgSeriesTooltip;
  
    /** Style individual bars */
    itemStyler?: (params: AgBarSeriesItemStylerParams) => AgBarSeriesStyle;
  
    /** Overall chart theming */
    fill?: string;
    fillOpacity?: number;
    stroke?: string;
    strokeWidth?: number;
    strokeOpacity?: number;
    lineDash?: number[];
    lineDashOffset?: number;
    padding?: { top?: number, right?: number, bottom?: number, left?: number };
    theme?: AgChartTheme | AgChartThemeName;
}

Item Styler Params

export interface AgBarSeriesItemStylerParams<TDatum> {
    /** The x value of the datum. */
    xValue: any;
    /** The y value of the datum. */
    yValue: any;
    /** Whether the item's x value is the first in the data domain. */
    first: boolean;
    /** Whether the item's x value is the last in the data domain. */
    last: boolean;
    /** Whether the item's y value is the lowest in the data. */
    min: boolean;
    /** Whether the item's y value is the highest in the data. */
    max: boolean;
    /** The stack group key, if relevant */
    stackGroup?: string;

    /** The data point associated with the label. */
    datum: TDatum;
    /** The unique identifier of the series. */
    seriesId: string;
    /** Indicates whether the element is highlighted. */
    highlighted: boolean;
}

Series Style

export interface AgBarSeriesStyle<TDatum> {
    /** The colour for filling shapes. */
    fill?: string;
    /** The opacity of the fill colour. */
    fillOpacity?: number;
    /** The colour for the stroke. */
    stroke?: string;
    /** The width of the stroke in pixels. */
    strokeWidth?: number;
    /** The opacity of the stroke colour. */
    strokeOpacity?: number;
    /** An array specifying the length in pixels of alternating dashes and gaps. */
    lineDash?: number[];
    /** The initial offset of the dashed line in pixels. */
    lineDashOffset?: number;
    /** Apply rounded corners to each bar. */
    cornerRadius?: number;
}