Help us shape the 2021 DevExtreme Roadmap. Take our 5 minute survey.
Dismiss
Free Trial Buy
    Your search did not match any results.
    Charts

    Strips

    Documentation

    The Chart can display background strips that highlight value ranges.

    To configure strips, declare an array of objects in the argumentAxis.strips[] or valueAxis.strips[] property. Each object in this array configures an individual strip. The startValue and endValue properties define the highlighted range.

    This demo shows two value axis strips. The code configures label's text and font.color properties for each strip.

    You can specify the same appearance for all strips on a specific axis or in the Chart. To do this, declare the stripStyle object in the valueAxis, argumentAxis, or commonAxisSettings object. Individual settings override common settings. In this demo, we use the stripStyle object to specify the font weight and size for all strip labels on the value axis.

    See more Hide details
    Prev Demo Next Demo

    jQuery

    Angular

    Vue

    React

    ASP.NET Core

    ASP.NET MVC

    Copy to CodePen
    Apply
    Reset
    $(function () { var highAverage = 60.8, lowAverage = 53, highAverageColor = "#ff9b52", lowAverageColor = "#6199e6"; $("#chart").dxChart({ dataSource: dataSource, series: [{ argumentField: "day", valueField: "temperature", type: "spline", color: "#a3aaaa" }], valueAxis: { label: { customizeText: customizeText }, strips: [{ label: { text: "Above average", font: { color: highAverageColor } }, startValue: highAverage, color: "rgba(255,155,85,0.15)" }, { label: { text: "Below average", font: { color: lowAverageColor } }, endValue: lowAverage, color: "rgba(97,153,230,0.1)" }], stripStyle: { label: { font: { weight: 500, size: 14 } } } }, "export": { enabled: true }, title: "Temperature in September", legend: { visible: false }, customizePoint: function () { if (this.value > highAverage) { return { color: highAverageColor }; } else if (this.value < lowAverage) { return { color: lowAverageColor }; } }, customizeLabel: function () { if (this.value > highAverage) { return getLabelsSettings(highAverageColor); } else if (this.value < lowAverage) { return getLabelsSettings(lowAverageColor); } } }); function customizeText() { return this.valueText + "&#176F"; } function getLabelsSettings(backgroundColor) { return { visible: true, backgroundColor: backgroundColor, customizeText: customizeText }; } });
    <!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/20.2.5/css/dx.common.css" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/20.2.5/css/dx.light.css" /> <script src="https://cdn3.devexpress.com/jslib/20.2.5/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"></div> </div> </body> </html>
    #chart { height: 440px; }
    var dataSource = [{ temperature: 52, day: "1" }, { temperature: 57, day: "2" }, { temperature: 58, day: "3" }, { temperature: 56, day: "4" }, { temperature: 59, day: "5" }, { temperature: 59, day: "6" }, { temperature: 56, day: "7" }, { temperature: 62, day: "8" }, { temperature: 57, day: "9" }, { temperature: 54, day: "10" }, { temperature: 52, day: "11" }, { temperature: 58, day: "12" }, { temperature: 53, day: "13" }, { temperature: 54, day: "14" }, { temperature: 57, day: "15" }, { temperature: 61, day: "16" }, { temperature: 58, day: "17" }, { temperature: 63, day: "18" }, { temperature: 64, day: "19" }, { temperature: 52, day: "20" } ];