Your search did not match any results.
Charts

Point Image

API Reference
This demo illustrates DevExtreme HTML5 Chart Widget’s ability to use custom images for point markers.
Copy to Codepen
Apply
Reset
$(function(){ $("#chart").dxChart({ dataSource: dataSource, commonSeriesSettings: { argumentField: "year", valueField: "place", type: "spline", point: { visible: false } }, "export": { enabled: true, formats: ["PNG", "PDF", "JPEG", "GIF", "SVG"] }, customizePoint: function() { if(this.value == 1) { return { image: { url: "../../../../images/icon-medal-gold.png", width: 20, height: 20 }, visible: true }; } else if(this.value == 2) { return { image: { url: "../../../../images/icon-medal-silver.png", width: 20, height: 20 }, visible: true }; } else if(this.value == 3) { return { image: { url: "../../../../images/icon-medal-bronse.png", width: 20, height: 20 }, visible: true }; } }, series: { color: "#888888" }, title: { text: "Canadian Men’s National Ice Hockey Team<br/> at the World Championships" }, legend: { visible: false }, argumentAxis: { grid: { visible: true } }, valueAxis: { grid: { visible: false }, inverted: true, label: { customizeText: function() { if(this.valueText == 1) { return this.valueText + "st place"; } else if(this.valueText == 2) { return this.valueText + "nd place"; } else if(this.valueText == 3) { return this.valueText + "rd place"; } else { return this.valueText + "th place"; } } } } }); });
<!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="js/jquery-3.1.0.min.js"></script> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/16.2.4/css/dx.spa.css" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/16.2.4/css/dx.common.css" /> <link rel="dx-theme" data-theme="generic.light" href="https://cdn3.devexpress.com/jslib/16.2.4/css/dx.light.css" /> <script src="https://cdn3.devexpress.com/jslib/16.2.4/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; width: 100%; }
var dataSource = [{ year: 1977, place: 4 }, { year: 1978, place: 3 }, { year: 1979, place: 4 }, { year: 1981, place: 4 }, { year: 1982, place: 3 }, { year: 1983, place: 3 }, { year: 1985, place: 2 }, { year: 1986, place: 3 }, { year: 1987, place: 4 }, { year: 1989, place: 2 }, { year: 1990, place: 4 }, { year: 1991, place: 2 }, { year: 1992, place: 8 }, { year: 1993, place: 4 }, { year: 1994, place: 1 }, { year: 1995, place: 3 }, { year: 1996, place: 2 }, { year: 1997, place: 1 }, { year: 1998, place: 6 }, { year: 1999, place: 4 }, { year: 2000, place: 4 }, { year: 2001, place: 5 }, { year: 2002, place: 6 }, { year: 2003, place: 1 }, { year: 2004, place: 1 }, { year: 2005, place: 2 }, { year: 2006, place: 4 }, { year: 2007, place: 1 }, { year: 2008, place: 2 }, { year: 2009, place: 2 }, { year: 2010, place: 7 }, { year: 2011, place: 5 }, { year: 2012, place: 5 }, { year: 2013, place: 5 }];