Usage with TypeScript

Some frameworks, like React and Vue, don’t support custom HTML elements out of the box.
To allow a smooth integration in a TypeScript project, our library exports the types for the components names and props in the @nebuly-ai/reports/web package.

import type  { NebulyChartComponentName, NebulyChartProps } from '@nebuly-ai/reports/web';

React

In order to use the components as JSX elements, you need to define the types in the JSX namespace extending the IntrinsicElements interface.

Version 18+
Before Version 18

import "react";
import {
  NebulyChartComponentName,
  NebulyChartProps,
} from "@nebuly-ai/reports/web";

declare module "react" {
  namespace JSX {
    interface IntrinsicElements
      extends Record<
        NebulyChartComponentName,
        React.DetailedHTMLProps<NebulyChartProps, HTMLElement>
      > {}
  }
}

import {
  NebulyChartComponentName,
  NebulyChartProps,
} from "@nebuly-ai/reports/web";

declare global {
  namespace JSX {
    interface IntrinsicElements
      extends Record<
        NebulyChartComponentName,
        React.DetailedHTMLProps<NebulyChartProps, HTMLElement>
      > {}
  }
}

Vue

In order to use the components as Vue components, you need to define them extending the GlobalComponents interface.

import {
  NebulyChartComponentName,
  NebulyChartProps,
} from "@nebuly-ai/reports/web";

declare module 'vue' {
  interface GlobalComponents extends Record<NebulyChartComponentName, NebulyChartProps> {}
}

Angular, Svelte and other frameworks that support raw HTML templates

These frameworks don’t require any special setup to use the components since templates are raw HTML.

<nebuly-line-chart data="<CHART_DATA>" options="<CHART_OPTIONS>"></nebuly-line-chart>

Getting Started

API Reference

TypeScript

Examples

React

Vue

Angular, Svelte and other frameworks that support raw HTML templates

​React

​Vue

​Angular, Svelte and other frameworks that support raw HTML templates

React

Vue

Angular, Svelte and other frameworks that support raw HTML templates