Visual Elements

Topics in this section describe Chart widget elements. Each topic gives an overview of the element's purpose, and details how to enable and tune the chart element to your needs.

The image below is the chart element map, which can be helpful to you as you begin learning about Chart capabilities. Hover over the image to learn how different chart elements are called. Click an element to navigate to a topic in which you will find more details.

ChartJS Chart Elements

Chart Title Axis Title Legend Series Point Series Point Series Point Series Point Series Point Series Point Series Point Series Point Series Point Series Point Series Point Series Point Series Point Series Point Series Point Series Point Series Point Series Point Series Point Series Point Series Point Series Point Series Point Series Point Point Label Point Label Point Label Point Label Point Label Point Label Point Label Point Label Point Label Point Label Point Label Point Label Point Label Point Label Point Label Point Label Point Label Point Label Point Label Point Label Point Label Point Label Point Label Tooltip Axis Label Axis Label Axis Label Axis Label Axis Label Axis Label Axis Label Axis Label Axis Label Axis Label Axis Label Axis Label Axis Label Axis Label Axis Label Axis Label Axis Label Axis Label Axis Label Axis Label Axis Label Argument Axis Value Axis Series Series Grid Grid Grid Grid Grid Grid Grid Grid Grid Strip Strip Pane

Series

A series represents a group of related data points. The most important characteristic of a series is its type, which determines a particular visual representation of data. You can find more details on each series type in the corresponding topics of the Chart Series Types section. Here, you will learn how to set a series type and other series options.

Series

To set a series type, use the type property of the series configuration object.

JavaScript
var chartOptions = {
    // ...
    series: {
        type: 'line'
    }
};

To set data for a series, there are several approaches. You can set a common data source for all series or specify data for each series individually. For details, refer to the Data Binding section.

There can be several series displayed in the chart. In this instance, series is an array of series objects. You can specify series settings in the following three layers.

  • Common Series Settings
    To set a particular option to a common value for each series, use the commonSeriesSettings configuration object.

    JavaScript
    var chartOptions = {
        // ...
        commonSeriesSettings: {
            type: 'line'
        }
    };
  • Common Type-Specific Series Settings
    To set a particular option to a common value for each series of a certain type, use the corresponding type-specific configuration object within the commonSeriesSettings configuration object. There are type-specific configuration objects for all series types: area, line, etc.

    JavaScript
    var chartOptions = {
        // ...
        commonSeriesSettings: {
            area: {
                color: 'LightSkyBlue'
            }
        }
    };

    Note that the series values that are set for a specific series type override common values.

  • Individual Series Settings
    To set series options to individual values, use the series array. The array items represent objects defining each series separately.

    JavaScript
    var chartOptions = {
        // ...
        series: [
            { type: 'line' },
            { type: 'bar' }
        ]
    };

    Note that values set individually override the common and type-specific values.

To identify series on the chart's legend, set a name for each series, using its name property.

JavaScript
var chartOptions = {
    // ...
    series: [
        { name: 'Men' },
        { name: 'Women' }
    ]
};

By default, all specified series are displayed on the same pane. However, you can distribute your series as required between several panes. For this purpose, define the panes and specify the pane property for each series.

JavaScript
var chartOptions = {
    // ...
    panes: [
        { name: 'topPane' },
        { name: 'bottomPane' }
    ],
    series: [
        { type: 'line', pane: 'topPane' },
        { type: 'bar', pane: 'bottomPane' }
    ]
};

View Demo

To see an example of a multi-pane chart, refer to the Create a Multi-Pane Chart tutorial.

All specified series use the same value axis by default. However, you can plot series with different value axes in one pane as well. For this purpose, define the value axes and specify the axis property for each series.

JavaScript
var chartOptions = {
    // ...
    valueAxis: [
        { name: 'mainAxis' },
        { name: 'secondaryAxis' }
    ],
    series: [
        { type: 'line', axis: 'mainAxis' },
        { type: 'bar', axis: 'secondaryAxis' }
    ]
};

To see an example of a multi-axis chart, refer to the Create a Multi-Axis Chart tutorial.

In addition to series options, the series configuration object is also used to set options of the series points and labels.

JavaScript
var chartOptions = {
    // ...
    series: {
        point: { visible: true },
        label: { visible: true }
    }
};

Series Points

A series point is a visual representation of a series' data point. Because the Chart widget supports numerous series types, which represent and organize data in different ways, the visual representation of a data point differs from one type to another.

Series Points

By default, points are drawn in a line-like series. In area series, points are not visible, but can be shown if required. There are also series where points are represented in a specific way - a bar, a range area/bar or a body with shadows. These specific presentations of series points are customized via specific series options. You can learn more on them in series types descriptions (see the Series section). Series with a typical point representation expose the point configuration object that can be used for point customization. If you need to apply similar settings to all series in the chart, use the commonSeriesSettings configuration object's point object. Note that options specified individually within series objects override the common settings specified within the commonSeriesSettings object.

JavaScript
var chartOptions = {
    // ...
    commonSeriesSettings: {
        point: {
            // Common settings for all series
        }
    },
    series: {
        point: {
            // Settings for an individual series
        }
    }
};

The following list provides an overview of the point object options.

  • Visibility
    Use the point's visible property to change point visibility.

  • Appearance
    You can change the point's shape, color and size, using the symbol, color and size properties.

  • Border
    Make a border visible by setting the visible property of the point's border object. In addition, you can change the border width and color, using the border's width and color properties.

  • Hover Options
    Set a custom color, size and border settings for the "hovered" point state. For this purpose, define the hoverStyle object within the point configuration object.

  • Selection Options
    Set a custom color, size and border settings for the "selected" point state. For this purpose, define the selectionStyle object within the point configuration object.

Series points (regardless of how they are represented) can be accompanied with textual labels. Refer to the Series Point Labels topic for details.

Error Bars

Error bars are used on charts to indicate an error or an uncertainty in a reported measurement. They give a general idea of how precise a measurement is.

Error Bars

To generate an error bar, two values, high and low, are needed. If the data source of your chart provides concrete high and low values, assign the required data source fields to the series' highValueField and lowValueField options.

Alternatively, you can calculate the high and low error bar values automatically. For this purpose, choose one of error bar types and specify the value to be used in calculation.

Error bars can be configured for all series in the chart using the commonSeriesSettings | valueErrorBar object and also for a series individually using the valueErrorBar field of the series array elements.

You can customize the error bars' appearance using their color, edgeLength, lineWidth and opacity options.

View Demo

Series Point Labels

Each series point can be accompanied by a text label representing data related to the point. These are series point labels. For series of different types, points represent different kinds of data, hence the corresponding point labels can carry a point's value, argument or both. If required, you can also make a label display custom information.

Point Labels

To change the default label appearance, use options of the label object. This object should be defined within the series whose labels must be customized. If you need to provide the same options for point labels in all series in the chart, define the label object within the commonSeriesSettings configuration object.

JavaScript
var chartOptions = {
    // ...
    commonSeriesSettings: {
        label: {
            // Common settings for all series
        }
    },
    series: {
        label: {
            // Settings for an individual series
        }
    }
};

The following list provides an overview of the label object options.

  • Visibility
    To make point labels visible, set the label object's visible property to true. If there are too many labels and they are not required to be shown all together, you can set a maximum for the count of labels that can be shown. For this purpose, use the maxLabelCount property of a particular series or of the commonSeriesSettings object.

  • Arrangement
    Labels can be positioned to the right, left or at the center of their points. To set the required position for labels, set the alignment property. In addition, you can shift labels horizontally or vertically, using the horizontalOffset or verticalOffset property. If required, you can rotate labels using the rotationAngle property. For bubble, bar- and area-like series, place labels inside the bubbles/bars/areas. For this purpose, set the position property to the inside value.

  • Text Customization and Formatting
    Labels represent point values by default. You can change the way these values are shown. For this purpose, use the format property. If required, you can set a custom text to be shown by labels. For this purpose, assign a function returning the text to the customizeText property of the label object. For details on label formatting, refer to the Data Formatting section.

  • Font Settings
    To specify the required font settings for a label text, use properties of the font object, defining it within the label object.

  • Appearance
    By default, labels are painted in the color of the series whose points they represent. You can set a custom background color for labels. For this purpose, use the backgroundColor property of the label object. In addition, you can make a label border visible and set up its properties, using the border object. To show labels connected to their points, even when the points are not visible, use connectors. The connector joins a label with its point or a place where the point should be. To make connectors visible, define the connector object within the label object and set its visible property to true. If it is required, you can change the connector's color and width using the corresponding properties of the connector object.

Tooltips

A tooltip is a small pop-up rectangle that displays information about a series point when a user hovers the cursor over it. By default, a tooltip indicates the point's value. However, it is possible to display other information. In addition, you can customize the appearance of a tooltip or its text.

Tooltip

To set tooltip options, use the tooltip configuration object of your chart. If tooltips are disabled, enable them by setting the tooltip's enabled property to true.

JavaScript
var chartOptions = {
    // ...
    tooltip: {
        enabled: true
    }
};

You can specify the tooltip appearance by changing options listed below.

  • Color
    By default, a tooltip has the color of the series that is currently hovered over. You can set a custom color for all tooltips in the chart. For this purpose, use the color property of the tooltip configuration object.

  • Size
    The tooltip's size is determined based on the text size and text padding values (see below). However, the size of the tooltip's arrow can be changed directly, using the arrowLength property of the tooltip configuration object.

  • Text Positioning
    Align text within tooltips as required using the paddingLeftRight and paddingTopBottom properties of the tooltip configuration object.

  • Text Customization and Formatting
    By default, tooltips represent point values. You can change the way these values are shown. For this purpose, use format tooltip property. If required, you can set a custom text to be displayed by tooltips. For this purpose, assign a function specifying the text to be shown to the customizeTooltip option of the tooltip object. For details on formatting, refer to the Data Formatting help section.

  • Font Settings
    Use the tooltip object's font property to specify the required font for the tooltip text.

  • Tooltip API
    You can show and hide tooltips in code using showTooltip() and hideTooltip() methods.

In multi-series charts, you can use a shared tooltip. See the shared option description for more information.

View Display a Tooltip Demo View Customize Tooltip Demo

Crosshair

Crosshair is a pointer, which is represented by two mutually-crossing lines stretched over the entire chart plot. The crosshair helps you identify the values of the series points more precisely. When the crosshair is enabled, its center snaps to hovered points.

Crosshair

To enable the crosshair, set the enabled option within the crosshair configuration object to true.

JavaScript
var chartOptions = {
    // ...
    crosshair: {
        enabled: true
    }
};

You can specify the crosshair appearance by changing options listed below.

  • Color
    You can change the crosshair's color, opacity

  • Line Style
    You can change the line's width and dashStyle options.

  • Labels
    Crosshair labels indicate the argument and the value of the series point that the crosshair pointer currently focuses on. Use the label object to configure the crosshair labels.

Each crosshair line can be configured individually by using the horizontalLine and verticalLine configuration objects, whose fields are the same as listed above, plus the visible field. Note that the values that are set for a specific line override common values.

View Demo

Axes

For charting, the rectangular coordinate system is used to determine each point uniquely on a plane through two numbers, the argument and the value of a point. To define the coordinates, two perpendicular directed lines - the axes - are specified: the axis of arguments and the axis of values.

Axes

Depending on the specified data, the axes can be discrete, continuous or logarithmic. For details, refer to the Argument Axis and Value Axis topics.

Axis ticks/grid lines are arranged automatically by default based on chart data source values. However, you can rearrange them the way you like. For details, refer to the Set a Category Order and Axis Ticks Arrangement topics.

Axis options can be set using the chart's valueAxis and argumentAxis configuration objects. If you need to set the same values for all axes, use the commonAxisSettings configuration object.

JavaScript
var chartOptions = {
    // ...
    commonAxisSettings: {
        //...
    },
    valueAxis: {
        //...
    },
    argumentAxis: {
        //...
    }
};

NOTE: If you have set an option within the valueAxis or argumentAxis configuration object, it will override the common value that is set using the commonAxisSettings object.

If you use several panes to display series or use multiple value axes on one pane, you should define several value axes. In this instance, valueAxis should be an array of objects defining value axes. In addition, you can specify different argument axes for each pane. In this instance, argumentAxis should be an array of objects defining argument axis for each pane. The following code demonstrates this.

JavaScript
var chartOptions = {
    // ...
    commonAxisSettings: {
        //...
    },
    valueAxis: [
        { pane: 'bottomPane', name: 'firstAxis' },
        { pane: 'bottomPane', name: 'secondAxis' },
        { pane: 'topPane' }
    ],
    argumentAxis:  [
        { pane: 'bottomPane' },
        { pane: 'topPane' }
    ]
};

In the code above, the commonAxisSettings object defines common settings of all axes in all panes.

The following list overviews the common axis options.

  • Visibility
    To make axes visible/invisible, use the visible property of the commonAxisSettings object.

  • Position
    It is possible to swap the axes positions. To display the argument axis vertically, and the value axis horizontally, assign true to the chart's rotated property.

  • Appearance
    You can change the color, width and opacity for the axes, using the color, width and opacity properties.

The value and argument axes can be drawn with or without titles, ticks, grid lines, strips and labels.

Axis Elements

To change the visibility of these elements and set their options, define the title, ticks, grid, strips and label objects within the commonAxisSettings, valueAxis and/or argumentAxis configuration objects. For a detailed description of each element, refer to the corresponding document.

Argument Axis

Since a point is set up by two coordinates - an argument and a value - there should be two axes: one defining arguments and one defining values. This topic describes the axis for arguments, which is called the argument axis. To learn about the axis of values, refer to the Value Axis topic. To get common information on the Chart widget's axes, refer to the Axes topic.

There are three types of argument axes.

  • Discrete
    Contains a finite number of values, each of which represents an argument of a particular series point. These values are called categories and arranged in a certain order.

  • Continuous
    Contains an infinite number of values, some of which represent series point arguments.

  • Logarithmic
    Contains an infinite number of values, each of which represents a number (logarithm base) raised to a power.

If arguments in the series' data source represent strings, a discrete axis is created. The axis' categories are ordered as they are listed in the data source. The following example demonstrates this.

JavaScript
var dataSource = [
    { month: 'January', Glendale: 58, Kirkland: 42 },
    { month: 'April', Glendale: 64, Kirkland: 51 },
    { month: 'September', Glendale: 73, Kirkland: 62 },
    ...
];

Discrete Argument Axis

You can set a specific order for categories. For this purpose, use the categories property of the argumentAxis configuration object. For details, refer to the Set a Category Order topic.

If arguments in the series' data source are numeric or date-time values, a continuous axis is created. The axis ticks/grid lines are arranged so that the axis labels do not overlap each other. The following example demonstrates this.

JavaScript
var dataSource = [
    { temperature: 14.2, sales: 215 },
    { temperature: 16.4, sales: 325 },
    { temperature: 11.9, sales: 185 }
];

Continuous Argument Axis

In addition to discrete and continuous types, you can use the logarithmic axis type. This type can be used with numeric data source values only. Each value on the logarithmic argument axis represents a number (logarithm base) raised to a power. This number is specified by the logarithmBase option. The logarithmic axis is useful when you visualize a huge range of data.

Logarithmic Argument Axis

You can change the default ticks/grid lines arrangement on a continuous or a logarithmic axis. There are two ways of arranging ticks/grid lines manually. They are described in the Axis Ticks Arrangement topic.

If you need to create a discrete axis for your numeric or date-time arguments, set the argument axis' type property to 'discrete', as shown below.

JavaScript
var chartOptions = {
    //...
    argumentAxis: {
        type: 'discrete'
    }
};

In some scenarios, you may require that the type of arguments specified in the data source is treated as another type. For instance, the data source argument field may come with string values representing dates. In this instance, specify the desired type for the arguments using the argument axis' argumentType property.

JavaScript
var chartOptions = {
    //...
    argumentAxis: {
        argumentType: 'datetime'
    }
};

As you can see in the code above, the argumentAxis object is used to set custom values for argument axis options. Note that argumentAxis can be an array, if series are displayed on several panes, and there should be a specific argument axis for each pane.

The following list is an overview of the argument axis options.

  • Visibility
    To make the argument axis visible/invisible, use the visible property of the argumentAxis configuration object.

  • Position
    To set the argument axis at the top, set its position property to 'top'.

  • Appearance
    You can change the axis color, width and opacity, using the color, width and opacity properties.

  • Discrete Axis Ticks Arrangement
    Ticks and grid lines on a discrete axis can be displayed between series points (appropriate for bar series) or across them (appropriate for line series). To choose the mode that is more appropriate for your series type, use the discreteAxisDivisionMode property of the argumentAxis configuration object. In addition, you can set whether to insert an indent from the axes cross (appropriate for bar series) or start categories at the axes cross directly (appropriate for area series). To set an appropriate variant, use the valueMarginsEnabled property.

  • Continuous Axis Ticks Arrangement
    You can set whether to display series with indents from argument axis boundaries, or start and end the series at the axis' boundaries. To set an appropriate variant, use the valueMarginsEnabled property. If you insert indents, set values for the minValueMargin and maxValueMargin properties. In addition, you can improve the tick arrangement for a date-time axis by setting them at the beginning of each unit interval (e.g., 09/01, 10/01, ... instead of 09/13, 10/13, ...). For this purpose, use the axis' setTicksAtUnitBeginning property.

  • Logarithmic Axis Ticks Arrangement
    You can specify the logarithm base to be used in tick calculation using the logarithmBase option.

  • Invert Axis
    You can invert axis coordinates by setting the inverted property to true.

Use the argumentAxis configuration object to define the following axis child elements: title, ticks, grid lines, strips and labels. Their options are detailed in the corresponding topics.

Value Axis

Since a point is set up by two coordinates - an argument and a value - there should be two axes: one defining arguments and one defining values. This topic describes the axis of values, which is called value axis. To learn about the axis of arguments, refer to the Argument Axis topic. To get common information on the Chart widget's axes, refer to the Axes topic.

Value Axis

There are three types of value axes.

  • Discrete
    Contains a finite number of values, each of which represents a value of a particular series point. These values are called categories and arranged in a certain order.

  • Continuous
    Contains an infinite number of values, some of which represent series point values.

  • Logarithmic
    Contains an infinite number of values, each of which represents a number (logarithm base) raised to a power.

If values in the series' data source represent strings, a discrete axis is created. The axis' categories are ordered as they are listed in the data source. You can set a specific order of categories. For this purpose, use the categories property of the valueAxis configuration object. For details, refer to the Set a Category Order topic.

If values in the series' data source are of numeric or date-time type, a continuous axis is created. The axis ticks/grid lines are arranged so that the axis labels do not overlap each other. The following example demonstrates this.

JavaScript
var dataSource = [
    { temperature: 14.2, sales: 215 },
    { temperature: 16.4, sales: 325 },
    { temperature: 11.9, sales: 185 }
];

Continuous Value Axis

In addition to discrete and continuous types, you can use the logarithmic axis type. This type can be used with numeric data source values only. Each value on a logarithmic axis represents a number (logarithm base) raised to a power. This number is specified by the logarithmBase option. The logarithmic axis is useful when you visualize a huge range of data.

You can change the default ticks/grid line arrangement on a continuous or a logarithmic axis. There are two ways of arranging ticks/grid lines manually. They are described in the Axis Ticks Arrangement topic.

If you need to create a discrete axis for numeric or date-time values, set the value axis' type property to 'discrete', as shown below:

JavaScript
var chartOptions = {
    //...
    valueAxis: {
        type: 'discrete'
    }
};

In some scenarios you may require that the type of the values specified in the data source is treated as another type. For instance, the data source's value field may come with string values representing dates. In this instance, specify the required type for the values using the value axis' valueType property.

JavaScript
var chartOptions = {
    //...
    valueAxis: {
        valueType: 'datetime'
    }
};

As you can see in the code above, the valueAxis object is used to set custom values for value axis options. Note that valueAxis can be an array, if series are displayed on several panes or there are several series on a pane, each of which uses a different value axis. In this instance, use the commonAxisSettings object to set options values that are common for all axes in the chart.

JavaScript
var chartOptions = {
    // ...
    commonAxisSettings: {
        //...
    },
    valueAxis: [
        { pane: 'bottomPane' },
        { pane: 'topPane' }
    ]
};

In the code above, the commonAxisSettings object defines common settings of all axes in all panes.

The following list overviews the value axis options.

  • Visibility
    To make the value axis visible/invisible, use the visible property of the valueAxis configuration object.

  • Position
    To set the value axis to the right, set its position property to 'right'.

  • Appearance
    You can change the axis color, width and opacity, using the color, width and opacity properties.

  • Discrete Axis Ticks Arrangement
    Ticks and grid lines of a discrete axis can be displayed between series points or cross them. To choose the mode that is more appropriate for your series type, use the discreteAxisDivisionMode property of the valueAxis configuration object. In addition, you can set whether to insert an indent from the axes cross or start categories at the axes cross directly. To set an appropriate variant, use the valueMarginsEnabled property.

  • Continuous Axis Ticks Arrangement
    You can set whether to display the series' minimum and maximum values with indents from the value axis boundaries or display them at the axis' boundaries. To set an appropriate variant, use the valueMarginsEnabled property. If you insert indents, set values for the minValueMargin and maxValueMargin properties. In addition, you can improve the ticks arrangement for a date-time axis by setting them at the beginning of each unit interval (e.g., 09/01, 10/01, ... instead of 09/13, 10/13, ...). For this purpose, use the axis' setTicksAtUnitBeginning property.

  • Logarithmic Axis Ticks Arrangement
    You can specify the logarithm base to use in tick calculation using the logarithmBase option.

  • Invert Axis
    You can invert axis coordinates by setting the inverted property to true.

Use the valueAxis configuration object to define the following axis child elements: title, ticks, grid lines, strips and labels. Their options are detailed in the corresponding topics.

Axis Ticks Arrangement

When you specify a data source for a chart series, argument and value axes are created automatically. Their ticks/grid lines are arranged so that their labels do not overlap each other. You can correct the default arrangements using axis options (see Argument Axis and Value Axis topics). You can also fully define how to generate them. This topic details how to do this for continuous and logarithmic value and argument axes. To learn how to do this for a discrete argument axis, refer to the Set a Category Order topic.

There are two ways of arranging ticks.

Set Ticks Explicitly

Use this approach if you know for certain the exact range of series point values. In this instance, you can set the minimum value, maximum value, a tick and minor tick intervals for the valueAxis and/or argumentAxis configuration objects. For this purpose, use the min, max, tickInterval and minorTickInterval properties respectively. The following example demonstrates this approach for a continuous argument axis.

JavaScript
var chartOptions = {
    // ...
    argumentAxis: {
        min: new Date(2015, 2, 1),
        max: new Date(2015, 2, 31),
        tickInterval: { days: 2 }
        minorTickInterval: { days: 1 }
    }
};

NOTE: As an alternative to minorTickInterval, you can use the minorTickCount option.

Set Ticks Implicitly

Use this approach when you do not know the exact values of series points. In this instance, you can specify a relative value (factor) of how closely axis labels should be placed to each other. To do so, use the axisDivisionFactor property. The following example demonstrates this approach for an argument axis.

JavaScript
var chartOptions = {
    // ...
    argumentAxis: {
        axisDivisionFactor: 10
    }
};

Set a Category Order

When specifying data for a series in a chart with a discrete axis, the order of categories on this axis is determined by the order in the series defined first. You can set a specific order of the categories. For this purpose, use the axis' categories property.

JavaScript
var chartOptions = {
    argumentAxis: {
        categories: ['January', 'February', 'March']
    },
    //...
};

The example below demonstrates the use of the categories property. Take a note of the following.

  • Categories are ordered differently in the example data source. However, you can see that the specifically set order is used in the resulting chart.
  • The "June" category is not included in the categories array, but there is a value specified for this category in the first series. However, you can see that the "June" category is added in the resulting chart. That is because the "missed" categories are added to the end of the specified categories array.

Axes Titles

Chart axes can be displayed with titles, which you can utilize to provide explanatory text for axis value units.

Axis Titles

To specify the title text, use the title property of the chart's valueAxis and argumentAxis configuration objects, as demonstrated in the code below.

JavaScript
var chartOptions = {
    valueAxis: {
        title: 'Values',
        // ...
    }
};

The title property may also be assigned an object that customizes default title options. In that case, the title text must be assigned to the text field of this object.

JavaScript
var chartOptions = {
    // ...
    valueAxis: {
        title: {
            text: 'Values',
            // ...
        }
    }
};

The following list provides an overview of title options.

  • Title Location
    You can move a title closer to or farther from the axis. For this purpose, use the margin property of the title configuration object.

  • Text Font
    If you require a change in the title's font, specify the font property of the title configuration object.

If you need to set the same options for both the value and argument axes, use the title property of the commonAxisSettings configuration object.

JavaScript
var chartOptions = {
    commonAxisSettings: {
        title: {
            text: 'Values',
            margin: 10
        },
        // ...
    }
};

Axis Labels

Axis labels represent textual values for axis ticks.

Axis Labels

Axis labels are generated automatically. However, you can change their settings if your task requires that. Label settings are set using the label object of the argumentAxis, valueAxis or commonAxisSettings configuration object.

JavaScript
var chartOptions = {
    commonAxisSettings: {
        label: {
            //...
        }
    },
    //...
};

The following list provides an overview of label options.

  • Visibility
    To mark point labels as visible/invisible, use the label object's visible property.

  • Intelligent Arrangement
    If labels overlap each other in certain scenarios (e.g., device rotations, browser resizing or long text after formatting), specify how to resolve this issue using the overlappingBehavior property.

  • Font Settings
    To specify the required font settings for label text, specify properties of the label | font object.

  • Text Customization and Formatting
    You can change the way the default text is displayed by labels. For this purpose, use the format label property. If it is required, you can set a custom text to be shown by labels. For this purpose, implement a function that returns the required text and assign it to the customizeText property of the label object. For details on data formatting, refer to the Data Formatting topic.

  • Label Position
    You can shift labels closer to or farther from the axis. For this purpose, use the label object's indentFromAxis property.

Axis Ticks

Ticks divide an axis into sections by a step that is determined automatically, or by the tickInterval and axisDivisionFactor options of an axis. Ticks improve the comprehension of chart data. However, they are not visible by default in the Chart widget. Instead, axis labels and grid lines represent axis division.

To make ticks visible, use the visible property of the tick object within the argumentAxis, valueAxis or commonAxisSettings configuration object.

JavaScript
var chartOptions = {
    commonAxisSettings: {
        tick: { visible: true }
    },
    //...
};

Axis Ticks

In addition, you can change the default tick dimensions, color and opacity, using the width, length, color and opacity properties of the tick object.

Minor Ticks

In addition to the axis ticks, the Chart widget provides the capability to draw minor ticks. Minor ticks divide an axis segment that lies between two neighboring axis ticks.

Minor Ticks

Vertical axis' minor ticks are configured using the argumentAxis | minorTick object, horizontal — the valueAxis | minorTick object and both are configured using the commonAxisSettings | minorTick object.

You can display minor ticks by setting the visible option to true. The minor ticks will be arranged automatically. You can affect the ticks arrangement using the minorTickInterval or minorTickCount options of corresponding axis.

JavaScript
var chartOptions = {
    valueAxis: {
        minorTick: {
            //...
        }
    },
    //...
};

Grid

A Grid is a set of vertical and horizontal lines that improves the readability of chart data. The grid lines are drawn from axis ticks through the entire chart. If you use grid lines on your chart, it is not necessary to make ticks visible.

Grid

Grid lines are child elements of the argument and value axes. To change their settings, define the grid object within the argumentAxis, valueAxis or commonAxisSettings configuration object.

JavaScript
var chartOptions = {
    commonAxisSettings: {
        grid: {
            //...
        }
    },
    //...
};

The following list overviews grid options.

  • Visibility
    To make a grid visible/invisible, use the grid object's visible property.

  • Appearance
    You can change the grid's default color, width and opacity using the color, width and opacity properties of the grid object.

Minor Grid

In addition to the grid lines built on axis ticks, the Chart widget provides the minor grid that is built on minor ticks. The lines of the minor grid extend from the minor ticks throughout the entire chart's plot.

Minor Grid

Vertical minor grid lines are configured using the argumentAxis | minorGrid object, horizontal — the valueAxis | minorGrid object, and both grid lines are configured using the commonAxisSettings | minorGrid object. To display minor grid lines, set their visible option to true. In addition, you can customize the appearance of minor grid lines by using the color, opacity and width options.

JavaScript
var chartOptions = {
    valueAxis: {
        minorGrid: {
            //...
        }
    },
    //...
};

Strips

Strips are highlighted areas on a chart within a defined range of values (minimum and maximum) of an axis to which they belong. In general, strips are used to visually represent a range of values behind a series to trace whether the series point values fall in or out of that range.

Strip

Strips are child elements of the argument and value axes. To define the strips, use the strips array within the argumentAxis and valueAxis configuration objects. To change common settings for all strips in the chart, define the stripStyle object within the commonAxisSettings configuration object.

JavaScript
var chartOptions = {
    commonAxisSettings: {
        stripStyle: {
            //...
        }
    },
    //...
};

To set the bounds of a strip, use the strip's startValue and endValue properties. In addition, set the color of the strip using the color property. The following code demonstrates this.

JavaScript
var chartOptions = {
    valueAxis: {
        strips: [
            { startValue: 40, endValue: 50, color: 'blue' },
            { startValue: 70, endValue: 80, color: 'red' }
        ]
    },
    //...
};

To identify a strip and provide details of its purpose, display a label on it. To set the text and other options for the label, define the label object within the strips (or stripStyle in case you use commonAxisSettings) object. The following list provides an overview of strip label options.

Panes

With the Chart widget, you have the capability to display series on separate panes. Panes are visual areas within a chart, inside which all the elements required to represent data are displayed. Visually, each pane looks like a separate chart with axes, axis labels and titles. However, panes have a common legend and chart title. A typical scenario where multiple panes are useful is when it is required to plot several chart series separately within the same chart. In this instance, these series are easily compared and provide an entire picture of the data. For more information on how to configure a multi-pane chart, refer to the Create a Multi-Pane Chart tutorial.

Series

To define chart panes, use the panes configuration object.

JavaScript
var chartOptions = {
    panes: [
        { name: 'topPane' },
        { name: 'bottonPane' }
    ],
    //...
};

As you can see in the code above, you should set a name for each pane. You can then use this name as a pane identifier. In addition to the names, you can also set the following pane options.

  • Pane Border
    You can make a border visible for a pane and specify its settings as required. For this purpose, define the border object within the pane objects.

  • Background Color
    To highlight panes, set a background color for them using the backgroundColor property.

If you need to specify similar options for all panes in a chart, use the commonPaneSettings configuration object, as demonstrated below.

JavaScript
var chartOptions = {
    commonPaneSettings: {
        border: { visible: true }
    },
    //...
};

When defining a series, specify the pane in which it should be displayed. For this purpose, use the series' pane property. If there are several series using the same pane, you can declare this pane as the default pane, rather than specify it for each series. To do this, use the chart's defaultPane property. The following code demonstrates how to do this.

JavaScript
var chartOptions = {
    panes: [
        { name: 'topPane' },
        { name: 'bottonPane' }
    ],
    defaultPane: 'topPane',
    series: [
        { ... },
        { ... },
        { pane: 'bottomPane' }
    ],
    //...
};

View Demo

Legend

The Chart widget can include a legend - an explanatory component that helps a user distinguish and identify series. Each series is represented by an item on the legend. An item marker identifies the series color. An item label displays the series title.

Legend

To change the default legend appearance, use the properties of the legend configuration object. The following code demonstrates how to access it.

JavaScript
var chartOptions = {
    legend: {
        //...
    },
    //...
};

The following list provides an overview of the legend object options.

  • Visibility
    To change the legend's visibility, use the legend | visible property.

  • Location
    You can place a legend inside or outside the chart's plot. To specify the required place, use the legend's position property. To specify the location of the legend, use its verticalAlignment and horizontalAlignment properties. In addition, you can change the interval between the legend and neighboring chart elements using the margin property.

  • Border
    Make the legend's border visible by setting the visible property of the legend's border object. In addition, you can change the border's width, corner radius and color, using the width, cornerRadius and color properties of the border configuration object.

  • Items Layout
    Items can be placed in a row or a column. To specify how to arrange legend items, use the orientation option. There can also be several rows and columns in a legend. To set the number of rows and columns to be used, use the legend's rowCount and columnCount properties. These rows and columns must be placed within a legend separated by a space between each other, and from the legend's border. To specify the spacing parameters, use the legend's rowItemSpacing, columnItemSpacing, paddingLeftRight and paddingTopBottom properties. In addition, you can specify how item labels must be located relative to item markers. For this purpose, change the legend | itemTextPosition property.

  • Items Appearance
    You can enlarge or shrink item markers. To do this, use the markerSize property. In addition, you can specify the required font for item labels. For this purpose, use the legend's font property, which represents an object that allows you to set font options such as color, opacity, family and size.

  • Hover Mode
    You can specify whether or not to highlight the corresponding series when a legend item is hovered over. To do this, use the legend's hoverMode property.

Chart Title

The Chart widget can be displayed with a title. You can use the chart title to provide either explanatory text for the displayed data or any additional textual information.

Chart Title

To specify the title text, use the title property as demonstrated in the code below.

JavaScript
var chartOptions = {
    //...
    title: 'Stock Prices'
};

The title property may also be assigned an object that customizes default title options. In that case, the title text must be assigned to the text field of this object.

JavaScript
var chartOptions = {
    title: {
        text: 'Values',
        // ...
    }
};

The following list provides an overview of title options.

  • Title Location
    You can place the title on any side of the chart. For this purpose, use the horizontalAlignment and verticalAlignment properties of the chart's title configuration object.

  • Text Font
    If you require a change in the title's font, specify the font property of the title configuration object.

You can also configure the chart subtitle using the subtitle object.

Scroll Bar

In case the chart is wide, you can make it scrollable by enabling scrolling and zooming. When these features are enabled, it is convenient to use a scroll bar to visualize the current view area on an entire chart and to scroll quickly.

Scroll Bar

Before displaying the scroll bar, make sure that scrolling and zooming features are enabled, otherwise the scroll bar will not be operational.

The scroll bar is configured using the scrollBar object.

JavaScript
var chartOptions = {
    // ...
    scrollBar: {
        //...
    }
};

The following list provides an overview of scroll bar options.

  • Visibility
    To display the scroll bar, set the visible option to true.

  • Position
    To customize the scroll bar position, use the position and offset options.

  • Appearance
    If you need to adjust the scroll bar's appearance customization, use the color, opacity and width options.

View Demo