Point Image
Documentation
This demo shows that the Chart can display custom images instead of standard point symbols.
Feel free to share demo-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you!
We appreciate your feedback.
We appreciate your feedback.
var DemoApp = angular.module('DemoApp', ['dx']);
DemoApp.controller('DemoController', function DemoController($scope) {
$scope.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/Charts/PointImage/icon-medal-gold.png", width: 20, height: 20 }, visible: true };
} else if(this.value == 2) {
return { image: { url: "../../../../images/Charts/PointImage/icon-medal-silver.png", width: 20, height: 20 }, visible: true };
} else if(this.value == 3) {
return { image: { url: "../../../../images/Charts/PointImage/icon-medal-bronse.png", width: 20, height: 20 }, visible: true };
}
},
series: {
color: "#888888"
},
title: {
text: "Canadian Men’s National Ice Hockey Team\n at the World Championships"
},
legend: {
visible: false
},
argumentAxis: {
grid: {
visible: true
},
label: {
format: {
type: "decimal"
}
},
allowDecimals: false,
axisDivisionFactor: 60
},
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="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.6/css/dx.common.css" />
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/20.2.6/css/dx.light.css" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js"></script>
<script>window.angular || document.write(decodeURIComponent('%3Cscript src="js/angular.min.js"%3E%3C/script%3E'))</script>
<script src="https://cdn3.devexpress.com/jslib/20.2.6/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" ng-app="DemoApp" ng-controller="DemoController">
<div id="chart" dx-chart="chartOptions"></div>
</div>
</body>
</html>
#chart {
height: 440px;
}
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
}];