ChartDesigner

Provides a settings panel to configure a Chart, with a live preview.

Chart designer

//<code-header>
fiddle.title = 'Chart designer';
//</code-header>
class QuarterlySales extends Model {
    static fields = [{
        name : 'quarter'
    }, {
        name : 'month',
        type : 'number'
    }, {
        name : 'sku1',
        type : 'number'
    }, {
        name : 'sku2',
        type : 'number'
    }];
}

const data = [
    { quarter : 'Q1', month : 1, sku1 : 3, sku2 : 5 },
    { quarter : 'Q2', month : 4, sku1 : 6, sku2 : 4 },
    { quarter : 'Q3', month : 7, sku1 : 4, sku2 : 7 },
    { quarter : 'Q4', month : 10, sku1 : 8, sku2 : 9 }
].map(data => new QuarterlySales(data));

new ChartDesigner({
    appendTo      : targetElement,
    width         : '100%',
    height        : '400px',
    chartTitle    : 'Sales',
    chartSubtitle : 'By SKU, All Regions',
    showSubtitle  : true,
    style         : 'font-size: 14px',
    data,
    series        : [
        {
            field : 'sku1',
            label : 'Product 1'
        },
        {
            field : 'sku2',
            label : 'Product 2'
        }
    ],
    labelsSeriesOptions : [{
        field : 'quarter',
        label : 'Quarter'
    }, {
        field : 'month',
        label : 'Month'
    }]
});

Requires one or more data series to be configured, as well as one or more data objects to provide data for the preview. See Chart for details on chart setup.

The designer is organized into three tabs:

Layout: Choose the major chart type (line, bar, etc.) and chart components (title, legend).
Data: Specify which data series will be used in the chart, and how.
Appearance: Customize the look and feel of various chart components, including colors, fonts, and spacing.

Configs

136

Common

chartSubtitle: StringAlso a property

Get/set the subtitle.

chartTitle: StringAlso a property

Get/set the title.

Get/set which predefined chart type is selected in the designer. Options include all types in chartType and additional pre-configured subtypes such as lineWithPoints and barHorizontal.

listenersEvents

Data

data: Model[] | Object[]= []Also a property

The sample data to use as data in the chart preview.

labelsSeriesOptions: DataSeries[]= []Also a property

The available series (drawn from series) that can be chosen as the labels series.

selectedLabelsSeriesId: StringAlso a property

The series ID (field name) of the series currently selected for use as the labels series.

selectedSeriesIds: String[]= []Also a property

The currently selected series IDs (field names) for inclusion in the chart. See series.

series: DataSeries[]= []Also a property

The available series that can be chosen as the data series for the chart.

Layout

minimal: Boolean= falseAlso a property

Whether to display in minimal mode, where chart preview occupies full area and settings panel is minimized.

alignSelfWidget

chartPaddingDesignableChartConfig

collapsedPanel

collapsiblePanel

dockWidget

flexWidget

heightWidget

hiddenWidget

hideWhenEmptyContainer

layoutContainer

layoutStyleContainer

marginWidget

maxHeightWidget

maxWidthWidget

minHeightWidget

minWidthWidget

subtitlePaddingDesignableChartConfig

textAlignWidget

titlePaddingDesignableChartConfig

weightWidget

widthWidget

Styling

fontFamilies: ArrayAlso a property

Set the font families available for selection.

backgroundDesignableChartConfig

gridColorDesignableChartConfig

subtitleFontDesignableChartConfig

titleFontDesignableChartConfig

Accessibility

ariaDescriptionWidget

ariaLabelWidget

keyMapKeyMap

Axis styling

axisColorDesignableChartConfig

axisLabelColorDesignableChartConfig

maxTickLabelRotationDesignableChartConfig

minTickLabelRotationDesignableChartConfig

Chart elements

showLegendDesignableChartConfig

showSubtitleDesignableChartConfig

showTitleDesignableChartConfig

Content

bbarPanel

defaultsContainer

footerPanel

headerPanel

itemsContainer

lazyItemsContainer

namedItemsContainer

stripsPanel

tbarPanel

textContentContainer

toolsPanel

trapFocusPanel

CSS

bodyClsPanel

borderContainer

clsWidget

colorWidget

contentElementClsWidget

htmlClsWidget

itemClsContainer

styleWidget

uiPanel

DOM

adoptWidget

appendToWidget

contentWidget

datasetWidget

htmlWidget

idWidget

insertBeforeWidget

insertFirstWidget

tagWidget

Float & align

alignWidget

anchorWidget

centeredWidget

constrainToWidget

draggableWidget

floatingWidget

hideAnimationWidget

maximizeOnMobileWidget

positionedWidget

scrollActionWidget

showAnimationWidget

xWidget

yWidget

misc

tabBarItemsContainer

Misc

bubbleEventsEvents

dataFieldWidget

defaultBindPropertyWidget

disabledWidget

elementAttributesWidget

iconPanel

ignoreParentReadOnlyWidget

localeClassLocalizable

localizableLocalizable

localizablePropertiesLocalizable

maskDefaultsWidget

maskedWidget

monitorResizeWidget

ownerWidget

preventTooltipOnTouchWidget

readOnlyWidget

refWidget

rippleWidget

rootElementWidget

showTooltipWhenDisabledWidget

tabWidget

titlePanel

tooltipWidget

Other

callOnFunctionsWidget

catchEventHandlerExceptionsEvents

columnWidget

defaultFocusContainer

detectCSSCompatibilityIssuesWidget

drawerPanel

inputFieldAlignContainer

labelPositionContainer

renditionContainer

rtlRTL

spanWidget

Record

autoUpdateRecordContainer

recordContainer

strictRecordMappingContainer

Scrolling

scrollableWidget

Series styling

dataPointShapeDesignableChartConfig

seriesLineDashDesignableChartConfig

seriesLineOpacityDesignableChartConfig

seriesLineThicknessDesignableChartConfig

State

statefulState

statefulEventsState

stateIdState

stateProviderState

Properties

123

Common

chartSubtitle: StringAlso a config

Get/set the subtitle.

chartTitle: StringAlso a config

Get/set the title.

Get/set which predefined chart type is selected in the designer. Options include all types in chartType and additional pre-configured subtypes such as lineWithPoints and barHorizontal.