Your search did not match any results.
Line Charts

Point Image

Documentation
This demo shows that the Chart can display custom images instead of standard point symbols.
Copy to CodePen
Apply
Reset
window.onload = function() { var viewModel = { chartOptions: { 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"; } } } } } }; ko.applyBindings(viewModel, document.getElementById("chart-demo")); };
<!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> <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min.js"></script> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/17.1.7/css/dx.spa.css" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/17.1.7/css/dx.common.css" /> <link rel="dx-theme" data-theme="generic.light" href="https://cdn3.devexpress.com/jslib/17.1.7/css/dx.light.css" /> <script src="https://cdn3.devexpress.com/jslib/17.1.7/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" data-bind="dxChart: chartOptions"></div> </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 }];