Skeleton chart

Show design guidelines

Full chart-region skeleton: title, axes, axis labels, and scatter-style data dots. Set x-axis-label-count, y-axis-label-count, and data-count to mirror the final chart. Use is-random-data to either keep dot positions deterministic (default) or re-randomize on each render (for a more “live” placeholder).

Code

Framework HTML React Angular

Static dots (default)

Toggle dark mode

<certara-skeleton-chart height="250px" x-axis-label-count="4" y-axis-label-count="4" data-count="8" >
</certara-skeleton-chart>

import { CertaraSkeletonChart } from '@certara/certara-ui-react';

<CertaraSkeletonChart height="250px" xAxisLabelCount={4} yAxisLabelCount={4} data-count={8}>
</CertaraSkeletonChart>

// In your module (e.g., app.module.ts)
import { CertaraUiAngularModule } from '@certara/certara-ui-angular';

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-skeleton-chart height="250px" x-axis-label-count="4" y-axis-label-count="4" data-count="8">
</certara-skeleton-chart>

Random dot positions

Toggle dark mode

<certara-skeleton-chart height="250px" x-axis-label-count="4" y-axis-label-count="4" data-count="8" is-random-data="true" >
</certara-skeleton-chart>

import { CertaraSkeletonChart } from '@certara/certara-ui-react';

<CertaraSkeletonChart height="250px" xAxisLabelCount={4} yAxisLabelCount={4} data-count={8} isRandomData={true}>
</CertaraSkeletonChart>

// In your module (e.g., app.module.ts)
import { CertaraUiAngularModule } from '@certara/certara-ui-angular';

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-skeleton-chart height="250px" x-axis-label-count="4" y-axis-label-count="4" data-count="8" is-random-data="true">
</certara-skeleton-chart>

certara-skeleton-chart

Properties

dataCount

Attribute	data-count
Type	number
Default	10
Required	false
Description	Number of data point loaders to display in the scatter plot

height

Attribute	height
Type	string
Default	'100%'
Required	false
Description	Height can accept any valid CSS value

isRandomData

Attribute	is-random-data
Type	boolean
Default	false
Required	false
Description	Whether to use random positions / values for the loader “data”

variant

Attribute	variant
Type	"scatter"
Default	'scatter'
Required	false
Description	Choose among the set of skeleton chart types available as variants

width

Attribute	width
Type	string
Default	'100%'
Required	false
Description	Width can accept any valid CSS value

xAxisLabelCount

Attribute	x-axis-label-count
Type	number
Default	6
Required	false
Description	Number of x-axis label loaders to display

yAxisLabelCount

Attribute	y-axis-label-count
Type	number
Default	6
Required	false
Description	Number of y-axis label loaders to display

Events

There are no events available for this component

Methods

There are no public methods available for this component

Slots

There are no slots available for this component