Free Trial Buy

Data Visualization ▸ Winloss Sparklines

This demo illustrates the sparklines of the win-loss type. In the winloss sparkline, values are represented by bars that either grow up or go down from an invisible line. This line is determined by a threshold value. If a data source value is greater than this threshold value, the bar grows up. Otherwise, it goes down.

Monthly Prices of Copper, Nickel and Palladium

Year
 Copper (USD/ton) Nickel (USD/ton) Palladium (USD/troy ounce)
2021
2022
2023 
@model IEnumerable<DevExtreme.MVC.Demos.Models.MonthlyPrice>

<div class="long-title"><h3>Monthly Prices of Copper, Nickel and Palladium</h3></div>
<div id="chart-demo">
    <table class="demo-table" border="1">
        <tr>
            <th><div class="dx-screen-reader-only">Year</div></th>
            <th>Copper (USD/ton)</th>
            <th>Nickel (USD/ton)</th>
            <th>Palladium (USD/troy ounce)</th>
        </tr>
        <tr>
            <th>2021</th>
            <td>
                @(Html.DevExtreme().Sparkline()
                    .DataSource(Model.Where(i => i.Category == "Copper"))
                    .ArgumentField("Month")
                    .ValueField("Y2021")
                    .Type(SparklineType.WinLoss)
                    .ShowMinMax(true)
                    .WinlossThreshold(8000)
                    .Tooltip(t => t.Format(f => f.Type(Format.Currency).Precision(2)))
                    .ElementAttr("class", "sparkline")
                )
            </td>
            <td>
                @(Html.DevExtreme().Sparkline()
                    .DataSource(Model.Where(i => i.Category == "Nickel"))
                    .ArgumentField("Month")
                    .ValueField("Y2021")
                    .WinColor("#6babac")
                    .LossColor("#8076bb")
                    .WinlossThreshold(19000)
                    .Type(SparklineType.WinLoss)
                    .ShowMinMax(true)
                    .ShowFirstLast(false)
                    .Tooltip(t => t.Format(f => f.Type(Format.Currency).Precision(2)))
                    .ElementAttr("class", "sparkline")
                )
            </td>
            <td>
                @(Html.DevExtreme().Sparkline()
                    .DataSource(Model.Where(i => i.Category == "Palladium"))
                    .ArgumentField("Month")
                    .ValueField("Y2021")
                    .WinlossThreshold(2000)
                    .WinColor("#7e4452")
                    .LossColor("#ebdd8f")
                    .FirstLastColor("#e55253")
                    .Type(SparklineType.WinLoss)
                    .Tooltip(t => t.Format(f => f.Type(Format.Currency).Precision(2)))
                    .ElementAttr("class", "sparkline")
                )
            </td>
        </tr>
        <tr>
            <th>2022</th>
            <td>
                @(Html.DevExtreme().Sparkline()
                    .DataSource(Model.Where(i => i.Category == "Copper"))
                    .ArgumentField("Month")
                    .ValueField("Y2022")
                    .Type(SparklineType.WinLoss)
                    .ShowMinMax(true)
                    .WinlossThreshold(8000)
                    .Tooltip(t => t.Format(f => f.Type(Format.Currency).Precision(2)))
                    .ElementAttr("class", "sparkline")
                )
            </td>
            <td>
                @(Html.DevExtreme().Sparkline()
                    .DataSource(Model.Where(i => i.Category == "Nickel"))
                    .ArgumentField("Month")
                    .ValueField("Y2022")
                    .WinColor("#6babac")
                    .LossColor("#8076bb")
                    .WinlossThreshold(19000)
                    .Type(SparklineType.WinLoss)
                    .ShowMinMax(true)
                    .ShowFirstLast(false)
                    .Tooltip(t => t.Format(f => f.Type(Format.Currency).Precision(2)))
                    .ElementAttr("class", "sparkline")
                )
            </td>
            <td>
                @(Html.DevExtreme().Sparkline()
                    .DataSource(Model.Where(i => i.Category == "Palladium"))
                    .ArgumentField("Month")
                    .ValueField("Y2022")
                    .WinlossThreshold(2000)
                    .WinColor("#7e4452")
                    .LossColor("#ebdd8f")
                    .FirstLastColor("#e55253")
                    .Type(SparklineType.WinLoss)
                    .Tooltip(t => t.Format(f => f.Type(Format.Currency).Precision(2)))
                    .ElementAttr("class", "sparkline")
                )
            </td>
        </tr>
        <tr>
            <th>2023</th>
            <td>
                @(Html.DevExtreme().Sparkline()
                    .DataSource(Model.Where(i => i.Category == "Copper"))
                    .ArgumentField("Month")
                    .ValueField("Y2023")
                    .Type(SparklineType.WinLoss)
                    .ShowMinMax(true)
                    .WinlossThreshold(8000)
                    .Tooltip(t => t.Format(f => f.Type(Format.Currency).Precision(2)))
                    .ElementAttr("class", "sparkline")
                )
            </td>
            <td>
                @(Html.DevExtreme().Sparkline()
                    .DataSource(Model.Where(i => i.Category == "Nickel"))
                    .ArgumentField("Month")
                    .ValueField("Y2023")
                    .WinColor("#6babac")
                    .LossColor("#8076bb")
                    .WinlossThreshold(19000)
                    .Type(SparklineType.WinLoss)
                    .ShowMinMax(true)
                    .ShowFirstLast(false)
                    .Tooltip(t => t.Format(f => f.Type(Format.Currency).Precision(2)))
                    .ElementAttr("class", "sparkline")
                )
            </td>
            <td>
                @(Html.DevExtreme().Sparkline()
                    .DataSource(Model.Where(i => i.Category == "Palladium"))
                    .ArgumentField("Month")
                    .ValueField("Y2023")
                    .WinlossThreshold(2000)
                    .WinColor("#7e4452")
                    .LossColor("#ebdd8f")
                    .FirstLastColor("#e55253")
                    .Type(SparklineType.WinLoss)
                    .Tooltip(t => t.Format(f => f.Type(Format.Currency).Precision(2)))
                    .ElementAttr("class", "sparkline")
                )
            </td>
        </tr>
    </table>
</div>

using DevExtreme.AspNet.Data;
using DevExtreme.AspNet.Mvc;
using DevExtreme.MVC.Demos.Models.SampleData;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text.Json;
using System.Web.Mvc;

namespace DevExtreme.MVC.Demos.Controllers {
    public class ChartsController : Controller {

        public ActionResult WinlossSparklines() {
            return View(SampleData.MonthlyPrices);
        }

    }
}
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace DevExtreme.MVC.Demos.Models {
    public class MonthlyPrice {
        public string Category { get; set; }
        public int Month { get; set; }
        public double Y2021 { get; set; }
        public double Y2022 { get; set; }
        public double Y2023 { get; set; }
    }
}

using System.Collections.Generic;

namespace DevExtreme.MVC.Demos.Models.SampleData {
    public partial class SampleData {
        public static readonly IEnumerable<MonthlyPrice> MonthlyPrices = new[] {
            new MonthlyPrice { Category = "Oil", Month = 1, Y2021 = 52.16, Y2022 = 89.16, Y2023 = 78.12 },
            new MonthlyPrice { Category = "Oil", Month = 2, Y2021 = 61.55, Y2022 = 96.13, Y2023 = 76.83 },
            new MonthlyPrice { Category = "Oil", Month = 3, Y2021 = 59.19, Y2022 = 100.53, Y2023 = 73.28 },
            new MonthlyPrice { Category = "Oil", Month = 4, Y2021 = 63.50, Y2022 = 104.59, Y2023 = 79.45 },
            new MonthlyPrice { Category = "Oil", Month = 5, Y2021 = 66.31, Y2022 = 114.38, Y2023 = 71.58 },
            new MonthlyPrice { Category = "Oil", Month = 6, Y2021 = 73.52, Y2022 = 107.76, Y2023 = 70.25 },
            new MonthlyPrice { Category = "Oil", Month = 7, Y2021 = 73.93, Y2022 = 101.31, Y2023 = 76.07 },
            new MonthlyPrice { Category = "Oil", Month = 8, Y2021 = 68.43, Y2022 = 90.09, Y2023 = 81.39 },
            new MonthlyPrice { Category = "Oil", Month = 9, Y2021 = 75.22, Y2022 = 79.91, Y2023 = 89.43 },
            new MonthlyPrice { Category = "Oil", Month = 10, Y2021 = 83.50, Y2022 = 86.54, Y2023 = 85.64 },
            new MonthlyPrice { Category = "Oil", Month = 11, Y2021 = 66.14, Y2022 = 80.48, Y2023 = 77.69 },
            new MonthlyPrice { Category = "Oil", Month = 12, Y2021 = 75.33, Y2022 = 80.16, Y2023 = 71.90 },

            new MonthlyPrice { Category = "Gold", Month = 1, Y2021 = 1866.98, Y2022 = 1816.51, Y2023 = 1894.75 },
            new MonthlyPrice { Category = "Gold", Month = 2, Y2021 = 1808.17, Y2022 = 1856.30, Y2023 = 1858.74 },
            new MonthlyPrice { Category = "Gold", Month = 3, Y2021 = 1718.23, Y2022 = 1947.83, Y2023 = 1912.12 },
            new MonthlyPrice { Category = "Gold", Month = 4, Y2021 = 1760.27, Y2022 = 1933.88, Y2023 = 2000.13 },
            new MonthlyPrice { Category = "Gold", Month = 5, Y2021 = 1850.26, Y2022 = 1848.33, Y2023 = 1992.05 },
            new MonthlyPrice { Category = "Gold", Month = 6, Y2021 = 1834.57, Y2022 = 1836.57, Y2023 = 1942.92 },
            new MonthlyPrice { Category = "Gold", Month = 7, Y2021 = 1807.84, Y2022 = 1738.41, Y2023 = 1951.01 },
            new MonthlyPrice { Category = "Gold", Month = 8, Y2021 = 1784.28, Y2022 = 1764.56, Y2023 = 1918.41 },
            new MonthlyPrice { Category = "Gold", Month = 9, Y2021 = 1777.27, Y2022 = 1680.78, Y2023 = 1915.65 },
            new MonthlyPrice { Category = "Gold", Month = 10, Y2021 = 1776.85, Y2022 = 1664.15, Y2023 = 1916.14 },
            new MonthlyPrice { Category = "Gold", Month = 11, Y2021 = 1820.23, Y2022 = 1725.06, Y2023 = 1984.45 },
            new MonthlyPrice { Category = "Gold", Month = 12, Y2021 = 1790.43, Y2022 = 1796.87, Y2023 = 2027.01 },

            new MonthlyPrice { Category = "Silver", Month = 1, Y2021 = 25.91, Y2022 = 23.13, Y2023 = 23.76 },
            new MonthlyPrice { Category = "Silver", Month = 2, Y2021 = 27.35, Y2022 = 23.51, Y2023 = 21.90 },
            new MonthlyPrice { Category = "Silver", Month = 3, Y2021 = 25.60, Y2022 = 25.17, Y2023 = 21.92 },
            new MonthlyPrice { Category = "Silver", Month = 4, Y2021 = 25.63, Y2022 = 24.51, Y2023 = 24.98 },
            new MonthlyPrice { Category = "Silver", Month = 5, Y2021 = 27.48, Y2022 = 21.90, Y2023 = 24.21 },
            new MonthlyPrice { Category = "Silver", Month = 6, Y2021 = 26.98, Y2022 = 21.46, Y2023 = 23.34 },
            new MonthlyPrice { Category = "Silver", Month = 7, Y2021 = 25.66, Y2022 = 19.07, Y2023 = 24.08 },
            new MonthlyPrice { Category = "Silver", Month = 8, Y2021 = 24.01, Y2022 = 19.74, Y2023 = 23.55 },
            new MonthlyPrice { Category = "Silver", Month = 9, Y2021 = 23.19, Y2022 = 18.91, Y2023 = 23.15 },
            new MonthlyPrice { Category = "Silver", Month = 10, Y2021 = 23.36, Y2022 = 19.34, Y2023 = 22.25 },
            new MonthlyPrice { Category = "Silver", Month = 11, Y2021 = 24.16, Y2022 = 21.03, Y2023 = 23.47 },
            new MonthlyPrice { Category = "Silver", Month = 12, Y2021 = 22.47, Y2022 = 23.29, Y2023 = 24.03 },

            new MonthlyPrice { Category = "Copper", Month = 1, Y2021 = 7970.50, Y2022 = 9775.93, Y2023 = 8999.79 },
            new MonthlyPrice { Category = "Copper", Month = 2, Y2021 = 8460.25, Y2022 = 9941.35, Y2023 = 8955.20 },
            new MonthlyPrice { Category = "Copper", Month = 3, Y2021 = 9004.98, Y2022 = 10237.59, Y2023 = 8835.72 },
            new MonthlyPrice { Category = "Copper", Month = 4, Y2021 = 9335.55, Y2022 = 10183.13, Y2023 = 8814.00 },
            new MonthlyPrice { Category = "Copper", Month = 5, Y2021 = 10183.97, Y2022 = 9362.81, Y2023 = 8234.28 },
            new MonthlyPrice { Category = "Copper", Month = 6, Y2021 = 9612.43, Y2022 = 9033.13, Y2023 = 8386.23 },
            new MonthlyPrice { Category = "Copper", Month = 7, Y2021 = 9433.59, Y2022 = 7529.79, Y2023 = 8445.26 },
            new MonthlyPrice { Category = "Copper", Month = 8, Y2021 = 9357.19, Y2022 = 7960.98, Y2023 = 8351.77 },
            new MonthlyPrice { Category = "Copper", Month = 9, Y2021 = 9324.07, Y2022 = 7734.70, Y2023 = 8270.86 },
            new MonthlyPrice { Category = "Copper", Month = 10, Y2021 = 9778.50, Y2022 = 7621.21, Y2023 = 7939.66 },
            new MonthlyPrice { Category = "Copper", Month = 11, Y2021 = 9765.48, Y2022 = 8029.95, Y2023 = 8173.95 },
            new MonthlyPrice { Category = "Copper", Month = 12, Y2021 = 9550.31, Y2022 = 8367.23, Y2023 = 8394.11 },

            new MonthlyPrice { Category = "Nickel", Month = 1, Y2021 = 17847.68, Y2022 = 22355.40, Y2023 = 28194.61 },
            new MonthlyPrice { Category = "Nickel", Month = 2, Y2021 = 18595.30, Y2022 = 24015.55, Y2023 = 26727.95 },
            new MonthlyPrice { Category = "Nickel", Month = 3, Y2021 = 16460.83, Y2022 = 33924.18, Y2023 = 23288.61 },
            new MonthlyPrice { Category = "Nickel", Month = 4, Y2021 = 16480.91, Y2022 = 33132.74, Y2023 = 23894.56 },
            new MonthlyPrice { Category = "Nickel", Month = 5, Y2021 = 17552.45, Y2022 = 28062.55, Y2023 = 21970.39 },
            new MonthlyPrice { Category = "Nickel", Month = 6, Y2021 = 17942.32, Y2022 = 25658.63, Y2023 = 21233.28 },
            new MonthlyPrice { Category = "Nickel", Month = 7, Y2021 = 18819.36, Y2022 = 21481.89, Y2023 = 21091.26 },
            new MonthlyPrice { Category = "Nickel", Month = 8, Y2021 = 19160.23, Y2022 = 22057.39, Y2023 = 20438.65 },
            new MonthlyPrice { Category = "Nickel", Month = 9, Y2021 = 19398.23, Y2022 = 22773.97, Y2023 = 19644.64 },
            new MonthlyPrice { Category = "Nickel", Month = 10, Y2021 = 19420.52, Y2022 = 22032.89, Y2023 = 18281.23 },
            new MonthlyPrice { Category = "Nickel", Month = 11, Y2021 = 19970.43, Y2022 = 25562.70, Y2023 = 17027.36 },
            new MonthlyPrice { Category = "Nickel", Month = 12, Y2021 = 20015.55, Y2022 = 28946.81, Y2023 = 16460.84 },

            new MonthlyPrice { Category = "Palladium", Month = 1, Y2021 = 2391.20, Y2022 = 2030.86, Y2023 = 1734.27 },
            new MonthlyPrice { Category = "Palladium", Month = 2, Y2021 = 2342.33, Y2022 = 2350.10, Y2023 = 1543.90 },
            new MonthlyPrice { Category = "Palladium", Month = 3, Y2021 = 2525.61, Y2022 = 2582.78, Y2023 = 1426.00 },
            new MonthlyPrice { Category = "Palladium", Month = 4, Y2021 = 2776.45, Y2022 = 2330.67, Y2023 = 1508.00 },
            new MonthlyPrice { Category = "Palladium", Month = 5, Y2021 = 2900.52, Y2022 = 2060.05, Y2023 = 1482.61 },
            new MonthlyPrice { Category = "Palladium", Month = 6, Y2021 = 2752.48, Y2022 = 1913.05, Y2023 = 1348.09 },
            new MonthlyPrice { Category = "Palladium", Month = 7, Y2021 = 2754.76, Y2022 = 1973.10, Y2023 = 1264.48 },
            new MonthlyPrice { Category = "Palladium", Month = 8, Y2021 = 2544.73, Y2022 = 2135.52, Y2023 = 1247.30 },
            new MonthlyPrice { Category = "Palladium", Month = 9, Y2021 = 2130.32, Y2022 = 2113.95, Y2023 = 1239.29 },
            new MonthlyPrice { Category = "Palladium", Month = 10, Y2021 = 2058.48, Y2022 = 2078.86, Y2023 = 1142.09 },
            new MonthlyPrice { Category = "Palladium", Month = 11, Y2021 = 2036.32, Y2022 = 1911.55, Y2023 = 1050.27 },
            new MonthlyPrice { Category = "Palladium", Month = 12, Y2021 = 1810.52, Y2022 = 1808.36, Y2023 = 1087.76 }
        };
    }
}

#chart-demo {
    height: 440px;
}

.demo-table {
    width: 100%;
    border: 1px solid #c2c2c2;
    border-collapse: collapse;
}

.demo-table th,
.demo-table td {
    text-align: center;
    font-weight: 400;
    width: 200px;
    padding: 25px 10px 5px 10px;
    border: 1px solid #c2c2c2;
}

.demo-table th {
    padding: 25px 15px 20px 15px;
    border: 1px solid #c2c2c2;
}

.demo-table tr:nth-child(2) td {
    border-top: 1px solid #c2c2c2;
}

.demo-table td:first-of-type {
    border-left: 1px solid #c2c2c2;
}

.demo-table .sparkline {
    width: 200px;
    height: 30px;
}

.long-title h3 {
    font-weight: 200;
    font-size: 28px;
    text-align: center;
    margin-bottom: 20px;
    margin-top: 0px;
}