Vue Charts - 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.

Backend API

<template> <div> <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> <tbody v-for="(year, index) in years" :key="index" > <RowTemplate :year="year"/> </tbody> </table> </div> </div> </template> <script setup lang="ts"> import RowTemplate from './RowTemplate.vue'; const years = ['2021', '2022', '2023']; </script> <style> #chart-demo { height: 440px; } .demo-table { width: 100%; border: 1px solid #c2c2c2; border-collapse: collapse; } .demo-table th { font-weight: 400; width: 200px; padding: 25px 15px 20px; border: 1px solid #c2c2c2; } .long-title h3 { font-weight: 200; font-size: 28px; text-align: center; margin-bottom: 20px; margin-top: 0; } </style>

<template> <tr class="rows-content"> <th>{{ year }}</th> <td> <DxSparkline :data-source="copperCosts" :show-min-max="true" :winloss-threshold="8000" :value-field="year" class="sparkline" argument-field="month" type="winloss" > <DxTooltip :format="{ type: 'currency', precision: 2 }"/> </DxSparkline> </td> <td> <DxSparkline :data-source="nickelCosts" :show-min-max="true" :show-first-last="false" :winloss-threshold="19000" :value-field="year" class="sparkline" argument-field="month" type="winloss" win-color="#6babac" loss-color="#8076bb" > <DxTooltip :format="{ type: 'currency', precision: 2 }"/> </DxSparkline> </td> <td> <DxSparkline :data-source="palladiumCosts" :winloss-threshold="2000" :value-field="year" class="sparkline" argument-field="month" type="winloss" first-last-color="#e55253" win-color="#7e4452" loss-color="#ebdd8f" > <DxTooltip :format="{ type: 'currency', precision: 2 }"/> </DxSparkline> </td> </tr> </template> <script setup lang="ts"> import DxSparkline, { DxTooltip, } from 'devextreme-vue/sparkline'; import { copperCosts, nickelCosts, palladiumCosts, } from './data.ts'; withDefaults(defineProps<{ year?: string }>(), { year: '', }); </script> <style> .rows-content td { font-weight: 400; width: 200px; padding: 25px 10px 5px; border: 1px solid #c2c2c2; } .rows-content tr:nth-child(2) td { border-top: 1px solid #c2c2c2; } .rows-content td:first-of-type { border-left: 1px solid #c2c2c2; } .rows-content .sparkline { width: 200px; height: 30px; } </style>

export const copperCosts = [{ month: 1, 2021: 7970.50, 2022: 9775.93, 2023: 8999.79, }, { month: 2, 2021: 8460.25, 2022: 9941.35, 2023: 8955.20, }, { month: 3, 2021: 9004.98, 2022: 10237.59, 2023: 8835.72, }, { month: 4, 2021: 9335.55, 2022: 10183.13, 2023: 8814.00, }, { month: 5, 2021: 10183.97, 2022: 9362.81, 2023: 8234.28, }, { month: 6, 2021: 9612.43, 2022: 9033.13, 2023: 8386.23, }, { month: 7, 2021: 9433.59, 2022: 7529.79, 2023: 8445.26, }, { month: 8, 2021: 9357.19, 2022: 7960.98, 2023: 8351.77, }, { month: 9, 2021: 9324.07, 2022: 7734.70, 2023: 8270.86, }, { month: 10, 2021: 9778.50, 2022: 7621.21, 2023: 7939.66, }, { month: 11, 2021: 9765.48, 2022: 8029.95, 2023: 8173.95, }, { month: 12, 2021: 9550.31, 2022: 8367.23, 2023: 8394.11, }]; export const nickelCosts = [{ month: 1, 2021: 17847.68, 2022: 22355.40, 2023: 28194.61, }, { month: 2, 2021: 18595.30, 2022: 24015.55, 2023: 26727.95, }, { month: 3, 2021: 16460.83, 2022: 33924.18, 2023: 23288.61, }, { month: 4, 2021: 16480.91, 2022: 33132.74, 2023: 23894.56, }, { month: 5, 2021: 17552.45, 2022: 28062.55, 2023: 21970.39, }, { month: 6, 2021: 17942.32, 2022: 25658.63, 2023: 21233.28, }, { month: 7, 2021: 18819.36, 2022: 21481.89, 2023: 21091.26, }, { month: 8, 2021: 19160.23, 2022: 22057.39, 2023: 20438.65, }, { month: 9, 2021: 19398.23, 2022: 22773.97, 2023: 19644.64, }, { month: 10, 2021: 19420.52, 2022: 22032.89, 2023: 18281.23, }, { month: 11, 2021: 19970.43, 2022: 25562.70, 2023: 17027.36, }, { month: 12, 2021: 20015.55, 2022: 28946.81, 2023: 16460.84, }]; export const palladiumCosts = [{ month: 1, 2021: 2391.20, 2022: 2030.86, 2023: 1734.27, }, { month: 2, 2021: 2342.33, 2022: 2350.10, 2023: 1543.90, }, { month: 3, 2021: 2525.61, 2022: 2582.78, 2023: 1426.00, }, { month: 4, 2021: 2776.45, 2022: 2330.67, 2023: 1508.00, }, { month: 5, 2021: 2900.52, 2022: 2060.05, 2023: 1482.61, }, { month: 6, 2021: 2752.48, 2022: 1913.05, 2023: 1348.09, }, { month: 7, 2021: 2754.76, 2022: 1973.10, 2023: 1264.48, }, { month: 8, 2021: 2544.73, 2022: 2135.52, 2023: 1247.30, }, { month: 9, 2021: 2130.32, 2022: 2113.95, 2023: 1239.29, }, { month: 10, 2021: 2058.48, 2022: 2078.86, 2023: 1142.09, }, { month: 11, 2021: 2036.32, 2022: 1911.55, 2023: 1050.27, }, { month: 12, 2021: 1810.52, 2022: 1808.36, 2023: 1087.76, }];

import { createApp } from 'vue'; import App from './App.vue'; createApp(App).mount('#app');

<!DOCTYPE html> <html lang="en"> <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=5.0" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/26.1.5/css/dx.light.css" /> <link rel="stylesheet" type="text/css" href="./bundle.css" /> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="app"> </div> </div> <script src="bundles/vendor/vue.vendor.js"></script> <script src="./bundle.js"></script> </body> </html>