Skip to main content

    HistogramChart

    A HistogramChart is a type of graph that represents the distribution of numerical data. It’s constructed by dividing the entire range of values into a series of intervals—known as bins and then counting how many values fall into each interval. The bins are typically of equal size and are adjacent to each other, with no gaps. Each bin is represented by a bar, where the height of the bar reflects the frequency or count of data points within that interval

    HistogramChartProps

    extends, , <>
    NameTypeDefaultDescription
    data
    []
    -

    Data object for the histogram chart

    height?
    |
    300px

    Chart height. When a number is specified, it's treated as pixels, otherwise a valid height string is expected.

    width?
    100%

    Chart width. A number in pixels is expected. Otherwise, it will take the full width of the container

    seriesActions?
    (series: , bin: ) =>
    -

    Actions to be shown in the legend and tooltip actions

    truncationMode?
    'middle'

    Truncation mode to use (start, middle, end) Applied to all the parts that truncate text.

    colorPalette?
    |
    "categorical"

    Color palette to be used for the bar category.

    loading?
    false

    Show the loading indicator when truthy.

    valueRepresentation?
    "absolute"

    The way values are represented. "absolute" will display the value as it is, and "relative" displays a percentage value considering the other dimensions values within a categories.

    infiniteZoom?
    false

    Enables infinite zooming

    HistogramChart.Legend

    To configure the legend, add HistogramChart.Legend to the histogram chart.

    HistogramChartLegendProps

    Signature:

    export declare type HistogramChart = ;

    HistogramChart.Tooltip

    To configure the tooltip, add HistogramChart.Tooltip to the histogram chart.

    HistogramChartTooltipProps

    NameTypeDefaultDescription
    variant?
    -

    Whether the tooltip should contain bins from all series or just the closest one.

    HistogramChart.XAxis

    To configure the x-axis, add HistogramChart.XAxis to the histogram chart.

    HistogramChartXAxisProps

    NameTypeDefaultDescription
    max?
    | |
    'auto'

    The max value configuration to display in the axis

    min?
    | |
    'auto'

    The min value configuration to display in the axis

    label?
    -

    The title used for the axis

    scale?
    -

    The scale to be used

    formatter?
    | <, >
    -

    Formatter to be applied for each tick of the axis

    unit?
    -

    The unit for the axis

    HistogramChart.YAxis

    To configure the y-axis, add HistogramChart.YAxis to the histogram chart.

    HistogramChartYAxisProps

    NameTypeDefaultDescription
    max?
    | |
    'auto'

    The max value configuration to display in the axis

    min?
    | |
    'auto'

    The min value configuration to display in the axis

    label?
    -

    The title used for the axis

    scale?
    -

    The scale to be used

    formatter?
    | <, >
    -

    Formatter to be applied for each tick of the axis

    position?
    |
    'left'

    The position of the y axis relative to the histogram chart

    HistogramChart.Threshold

    TimeseriesChart.Threshold provides a slot for defining thresholds in the chart.

    HistogramThresholdProps

    Signature:

    export declare type HistogramThresholdProps = ;

    HistogramChart.EmptyState

    HistogramChart.EmptyState provides a slot where the Empty state wrapper can be set.

    EmptyStateProp

    NameTypeDefaultDescription
    children
    .
    -

    HistogramChart.ErrorState

    HistogramChart.ErrorState provides a slot where the Error state wrapper can be set.

    ErrorStateProps

    NameTypeDefaultDescription
    children
    . | ((errorMessage: ) => .)
    -

    HistogramChart.Annotations

    HistogramChart.Annotations provides a slot for configuring annotations in the histogram.

    HistogramAnnotationsProps

    extends
    NameTypeDefaultDescription
    visibleTracksLimit?
    3

    How many tracks to show by default, if there are more tracks than the specified here a scrollbar will be added.

    HistogramAnnotations.Track

    HistogramAnnotations.Track provides a slot for configuring the track in the HistogramChart.Annotations.

    HistogramAnnotationsTrackProps

    extends
    NameTypeDefaultDescription
    indicatorsDisplay?
    'auto'

    Defines how to show the annotations indicators: always, never, or on hover (auto) at Track level

    HistogramAnnotations.Marker

    HistogramAnnotations.Marker provides a slot for configuring the marker in the HistogramChart.Annotations.

    HistogramAnnotationsMarkerProps

    extends,
    NameTypeDefaultDescription
    indicatorsDisplay?
    'auto'

    Defines how to show the marker indicator on top of the chart: always, never, or on hover (auto)

    ChartInteractions

    Use the ChartInteractions component for configuring the chart zoom interactions of the chart.

    Prop Table did not receive data

    ChartInteractions.Zoom

    Define the ChartInteractions.Zoom component within the ChartInteractions for enabling the zoom in/out of the chart.

    ChartInteractions.ZoomX

    Define the ChartInteractions.ZoomX component the ChartInteractions for enabling the zoom in the x axis of the chart.

    ChartInteractions.Pan

    Define the ChartInteractions.Pan component the ChartInteractions for enabling the pan of the chart.

    Still have questions?
    Find answers in the Dynatrace Community