Free Trial Buy
    Your search did not match any results.
    Area Charts

    Spline Area

    Spline area series display smooth lines that connect data points. This demo shows different spline area series types. Use the drop-down editor below the Chart to select the type.

    • splinearea
      The spline area series draws a line between neighboring data points and fills the area under the line. If the Chart contains multiple area series, they overlap.

    • stackedsplinearea
      The Chart displays areas stacked on top of each other without overlapping. This type of Chart is useful if you need to compare the contribution of each series to the overall value.

    • fullstackedsplinearea
      The Chart stacks the areas. Values are displayed as percentages of the total for each argument, as opposed to absolute values. The topmost series points are always plotted at 100%, and the graph completely fills the Chart's pane.

    To create multiple spline area series, use the series array to declare each series and the commonSeriesSettings object to specify the common series type.

    See more Hide details
    Prev Demo Next Demo

    jQuery

    Angular

    Vue

    React

    AngularJS

    ASP.NET Core

    ASP.NET MVC

    Backend API
    Copy to CodePen
    Apply
    Reset
    $(() => { const chart = $('#chart').dxChart({ palette: 'Harmony Light', title: 'Corporations with Highest Market Value', dataSource, commonSeriesSettings: { type: types[0], argumentField: 'company', }, argumentAxis: { valueMarginsEnabled: false, }, margin: { bottom: 20, }, series: [ { valueField: 'y2005', name: '2005' }, { valueField: 'y2004', name: '2004' }, ], export: { enabled: true, }, legend: { verticalAlignment: 'bottom', horizontalAlignment: 'center', }, }).dxChart('instance'); $('#types').dxSelectBox({ dataSource: types, value: types[0], onValueChanged(e) { chart.option('commonSeriesSettings.type', e.value); }, }); });
    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>DevExtreme Demo</title> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script>window.jQuery || document.write(decodeURIComponent('%3Cscript src="js/jquery.min.js"%3E%3C/script%3E'))</script> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/22.2.3/css/dx.light.css" /> <script src="https://cdn3.devexpress.com/jslib/22.2.3/js/dx.all.js"></script> <script src="data.js"></script> <link rel="stylesheet" type="text/css" href="styles.css" /> <script src="index.js"></script> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="chart-demo"> <div id="chart"></div> <div class="options"> <div class="caption">Options</div> <div class="option"> <span>Series Type</span> <div id="types"></div> </div> </div> </div> </div> </body> </html>
    .options { padding: 20px; background-color: rgba(191, 191, 191, 0.15); margin-top: 20px; } .option { margin-top: 10px; } .caption { font-size: 18px; font-weight: 500; } .option > span { margin-right: 10px; } .option > .dx-widget { display: inline-block; vertical-align: middle; }
    const dataSource = [{ company: 'ExxonMobil', y2005: 377.28, y2004: 270.25, }, { company: 'GeneralElectric', y2005: 353.49, y2004: 311.43, }, { company: 'Microsoft', y2005: 269.86, y2004: 273.32, }, { company: 'Citigroup', y2005: 252.95, y2004: 280.50, }, { company: 'Royal Dutch Shell plc', y2005: 197.67, y2004: 165.89, }, { company: 'Procted & Gamble', y2005: 184.72, y2004: 130.52, }]; const types = ['splinearea', 'stackedsplinearea', 'fullstackedsplinearea'];