Get Started
Invoke A Default border chart on an image element:
HTML:
<img class="borderchart" src="examples/profile.jpg" style="height:150px;width:220px">
Javascript:
$(function() {
$('.borderchart').borderchart();
});
Data Labels
This border chart has labels that appear when you hover over them. The labels can be passed into borderchart via the dataset option
Note: The content within the border chart can be any html that you'd like
Instantiation of this chart is as follows:
$('.labeledborderchart').borderchart({
dataset: [{
data: 10,
color: '#2c3969',
label: 'Dark Blue'
}, {
data: 10,
color: '#415989',
label: 'Blue'
}, {
data: 10,
color: '#a4bfd2',
label: 'Light Blue'
}, {
data: 10,
color: '#a4c892',
label: 'Olive'
}, {
data: 10,
color: '#bce0ae',
label: 'Light Green'
}, {
data: 10,
color: '#ffac29',
label: 'Orange'
}, {
data: 10,
color: '#edf0f2',
label: 'White'
}, {
data: 10,
color: '#f2e8da',
label: 'Tan'
}, {
data: 10,
color: '#c6beb4',
label: 'Gray'
}, {
data: 10,
color: '#e74e34',
label: 'Red'
}],
strokewidth:25
});