JavaScript Image Chart (Pictorial Chart)Single Image for Data

VIEW MORE IMAGE CHARTS
SAVE
VIEW HTML
EDIT ON CODEPEN
An image chart (pictorial chart) represents a chart with relative sizes or repetitions of the same icon, picture, or symbol to show data relation. To create an image chart using KoolChart's JavaScript charting library, the <ImageChart> and <ImageSeries> elements must be set in Layout.

In this JavaScript chart example, seven <ImageSeries> elements are set in order to display seven different images for seven values. The layout code below is for the first series (subway) defined in this sample chart.
<ImageSeries yField="metro" labelPosition="inside" imageDisplayType="single" styleName="seriesStyle" displayName="Subway" formatter="{numFmt}" singleColumnRatio="0.9" halfWidthOffset="7" fill="#41b2e6">
<imgSource>
<ImageSourceItem maintainAspectRatio="true" url="../KoolChart/Assets/Images/metro2.png"/>
</imgSource>
</ImageSeries>

var chartData = [
{"vehicle":"Transportation Methods","metro":30.2,"bus":32.2,"car":26.7,"taxi":17.3,"bicycle":28.8,"walk":23.7, "airplane":14}
];