SheetXL - v1.0.2
    Preparing search index...

    Interface ChartElementProps

    interface ChartElementProps {
        chart: IChart | Promise<IChart>;
        colorScheme?: ThemeMode;
        height?: string | number;
        onChartChange?: (chart: IChart | null) => void;
        onElementPress?: (press: ChartElementPress) => void;
        ref?: Ref<IChartElement>;
        selection?: IChartElementSelection | null;
        width?: string | number;
        zoom?: number;
    }

    Hierarchy

    • HTMLAttributes<HTMLDivElement>
      • ChartElementProps
    Index
    chart colorScheme? height? onChartChange? onElementPress? ref? selection? width? zoom?
    chart: IChart | Promise<IChart>

    The chart to draw: one in a workbook, or one made outside it with createChart, or a Promise for either. A promise draws nothing until it resolves and shows the error if it rejects; while a later promise resolves, the chart already drawn is kept.

    This can be accessed (once resolved) via the element ref.

    colorScheme?: ThemeMode

    Whether the chart is drawn light or dark. Dark, its colors are drawn as a dark grid draws its cells. A chart area with no fill of its own is the surface's background (--sxl-color-base-100) in either mode.

    the app's scheme (useAppColorScheme); a chart on a sheet is drawn in the grid's

    height?: string | number

    The element's height, as style.height; a number as the box's height.

    onChartChange?: (chart: IChart | null) => void

    Called with the chart once ChartElementProps.chart resolves, and again whenever a new input resolves to a different one. Until the first input resolves, or if an input fails, the chart is null.

    Lets an app pass a Promise here and hold the live chart in its own state, without awaiting or suspending.

    const [pending] = useState(() => sheet.getCharts().add('A1:D5', { type: 'line' }));
    const [chart, setChart] = useState<IChart | null>(null);
    return <ChartElement chart={pending} onChartChange={setChart} />;
    onElementPress?: (press: ChartElementPress) => void

    Called on a press inside the chart with what is under the pointer, before the selection (if any) changes.

    ref?: Ref<IChartElement>
    selection?: IChartElementSelection | null

    The selection a press inside the chart changes, and whose selected elements are outlined: the sheet view's (getChartElementSelection) for a chart on a sheet, or one made for the chart (new ChartElementSelection({ chart })). Without one, a press selects nothing.

    As in Excel, the first press on a series selects the series and the next one its point; on the legend, the legend and then its entry; on a series' labels, all of them and then the one. A press on the chart area empties the selection: the chart is then what is selected.

    width?: string | number

    The element's width, as style.width; by default the element fills its parent. A number is taken as the box's width without waiting to measure it.

    zoom?: number

    The scale the chart is drawn at, where 1 is unscaled: the element's box is measured at the scale and the chart laid out at the unscaled size.

    1

    Settings
    Member Visibility

    On This Page
    Properties