Cartesian Axes

    A cartesian axis is composed of visual components that can be individually configured. These components are:

    The axis border is drawn at the edge of the axis, beside the chart area. In the image below, it is drawn in red.

    config setup

    2. const data = {
    3.   labels: labels,
    4.   datasets: [{
    5.     label: 'My First dataset',
    6.     backgroundColor: 'rgba(54, 162, 235, 0.5)',
    7.     borderColor: 'rgb(54, 162, 235)',
    8.     borderWidth: 1,
    9.     data: [10, 20, 30, 40, 50, 0, 5],
    10.   }]
    11. };

    Grid lines

    The grid lines for an axis are drawn on the chart area. In the image below, they are red.

    Cartesian Axes - 图2

    config setup

    1. const config = {
    2.   type: 'line',
    3.   data,
    4.   options: {
    5.     scales: {
    6.       x: {
    7.         grid: {
    8.           color: 'red',
    9.           borderColor: 'grey',
    10.           tickColor: 'grey'
    11.         }
    12.       }
    13.     }
    14.   }
    15. };
    1. const labels = Utils.months({count: 7});
    2. const data = {
    3.   labels: labels,
    4.     label: 'My First dataset',
    5.     backgroundColor: 'rgba(54, 162, 235, 0.5)',
    6.     borderColor: 'rgb(54, 162, 235)',
    7.     borderWidth: 1,
    8.     data: [10, 20, 30, 40, 50, 0, 5],
    9.   }]
    10. };

    Ticks and Tick Marks

    Ticks represent data values on the axis that appear as labels. The tick mark is the extension of the grid line from the axis border to the label. In this example, the tick mark is drawn in red while the tick label is drawn in blue.

    config setup

    1. const labels = Utils.months({count: 7});
    2. const data = {
    3.   labels: labels,
    4.   datasets: [{
    5.     label: 'My First dataset',
    6.     backgroundColor: 'rgba(54, 162, 235, 0.5)',
    7.     borderColor: 'rgb(54, 162, 235)',
    8.     borderWidth: 1,
    9.     data: [10, 20, 30, 40, 50, 0, 5],
    10.   }]
    11. };

    Title

    Cartesian Axes - 图4

    config setup

    1. const config = {
    2.   type: 'line',
    3.   data,
    4.   options: {
    5.     scales: {
    6.       x: {
    7.         title: {
    8.           color: 'red',
    9.           display: true,
    10.           text: 'Month'
    11.         }
    12.       }
    13.     }
    14.   }
    15. };
    1. const labels = Utils.months({count: 7});
    2. const data = {
    3.   labels: labels,
    4.   datasets: [{
    5.     label: 'My First dataset',
    6.     backgroundColor: 'rgba(54, 162, 235, 0.5)',
    7.     borderColor: 'rgb(54, 162, 235)',
    8.     borderWidth: 1,
    9.     data: [10, 20, 30, 40, 50, 0, 5],
    10.   }]
    11. };

    Note

    These are only the common options supported by all cartesian axes. Please see the specific axis documentation for all the available options for that axis.

    Namespace: options.scales[scaleId]

    Common options to all axes

    Namespace: options.scales[scaleId]

    Axis Position

    An axis can either be positioned at the edge of the chart, at the center of the chart area, or dynamically with respect to a data value.

    To position the axis at the edge of the chart, set the position option to one of: 'top', 'left', 'bottom', 'right'. To position the axis at the center of the chart area, set the position option to 'center'. In this mode, either the axis option must be specified or the axis ID has to start with the letter ‘x’ or ‘y’. This is so chart.js knows what kind of axis (horizontal or vertical) it is. To position the axis with respect to a data value, set the position option to an object such as:

    This will position the axis at a value of -20 on the axis with ID “x”. For cartesian axes, only 1 axis may be specified.

    Scale Bounds

    The bounds property controls the scale boundary strategy (bypassed by min/max options).

    • 'data': makes sure data are fully visible, labels outside are removed
    • 'ticks': makes sure ticks are fully visible, data outside are truncated

    These are only the common tick options supported by all cartesian axes. Please see specific axis documentation for all of the available options for that axis.

    Common tick options to all cartesian axes

    Namespace: options.scales[scaleId].ticks

    Common tick options to all axes

    Namespace: options.scales[scaleId].ticks

    Tick Alignment

    The alignment of ticks is primarily controlled using two settings on the tick configuration object: align and crossAlign. The align setting configures how labels align with the tick mark along the axis direction (i.e. horizontal for a horizontal axis and vertical for a vertical axis). The crossAlign setting configures how labels align with the tick mark in the perpendicular direction (i.e. vertical for a horizontal axis and horizontal for a vertical axis). In the example below, the crossAlign setting is used to left align the labels on the Y axis.

    config setup

    1. const config = {
    2.   type: 'bar',
    3.   data,
    4.   options: {
    5.     indexAxis: 'y',
    6.     scales: {
    7.       y: {
    8.         ticks: {
    9.           crossAlign: 'far',
    10.       }
    11.     }
    12.   }
    13. };
    1. const labels = Utils.months({count: 7});
    2. const data = {
    3.   labels: labels,
    4.   datasets: [{
    5.     label: 'My First dataset',
    6.     backgroundColor: [
    7.       'rgba(255, 99, 132, 0.2)',
    8.       'rgba(255, 159, 64, 0.2)',
    9.       'rgba(255, 205, 86, 0.2)',
    10.       'rgba(75, 192, 192, 0.2)',
    11.       'rgba(54, 162, 235, 0.2)',
    12.       'rgba(153, 102, 255, 0.2)',
    13.       'rgba(201, 203, 207, 0.2)'
    14.     ],
    15.     borderColor: [
    16.       'rgb(255, 99, 132)',
    17.       'rgb(255, 159, 64)',
    18.       'rgb(255, 205, 86)',
    19.       'rgb(75, 192, 192)',
    20.       'rgb(54, 162, 235)',
    21.       'rgb(153, 102, 255)',
    22.       'rgb(201, 203, 207)'
    23.     ],
    24.     borderWidth: 1,
    25.     data: [65, 59, 80, 81, 56, 55, 40],
    26.   }]
    27. };

    Note

    The crossAlign setting is only effective when these preconditions are met:

    • tick rotation is 0
    • axis position is 'top', ‘left', 'bottom' or 'right'

    The properties dataset.xAxisID or dataset.yAxisID have to match to scales property. This is especially needed if multi-axes charts are used.

    1. const myChart = new Chart(ctx, {
    2.     type: 'line',
    3.     data: {
    4.         datasets: [{
    5.             // This dataset appears on the first axis
    6.             yAxisID: 'first-y-axis'
    7.         }, {
    8.             // This dataset appears on the second axis
    9.             yAxisID: 'second-y-axis'
    10.         }]
    11.     },
    12.     options: {
    13.         scales: {
    14.             'first-y-axis': {
    15.                 type: 'linear'
    16.             },
    17.             'second-y-axis': {
    18.                 type: 'linear'
    19.             }
    20.         }
    21.     }
    22. });

    With cartesian axes, it is possible to create multiple X and Y axes. To do so, you can add multiple configuration objects to the xAxes and yAxes properties. When adding new axes, it is important to ensure that you specify the type of the new axes as default types are not used in this case.