Оффлайн
- Регистрация
- 9 Май 2015
- Сообщения
- 1,480
- Баллы
- 155
This 3.17.0 release brings powerful new features that give developers fine-grained control over chart visualization.
From inner axis ticks and dynamic label background functions to label borders and image-based labels — all the core features requested by our community are now available.
A groundbreaking feature that allows using images as labels. Create more intuitive data representations with icons, logos, and custom images.
Press enter or click to view image in full size
Press enter or click to view image in full size
Press enter or click to view image in full size
The new data label image option also added to donut, gauge, pie and polar types as well.
Newly added options are:
data: {
labels: {
image: {
url: "./assets/data1.svg",
// or use placeholder to dynamically set image URL based on data ID
url: "./images/{=ID}.svg", // will be replaced to "./images/data1.svg", "./images/data2.svg", etc.
width: 30,
height: 30,
pos: {
y: -5
}
},
// or use function to return image configuration dynamically
image: function(v, id, i) {
// v is the value of the data point where the label is shown.
// id is the id of the data where the label is shown.
// i is the index of the data series point where the label is shown.
// Return different images based on value
if (v > 500) {
return {
url: "./high-value.svg",
width: 40,
height: 40,
pos: { x: 0, y: 0 }
};
} else if (v > 100) {
return {
url: "./medium-value.svg",
width: 30,
height: 30,
pos: { x: 0, y: 0 }
};
} else if(v < 5) {
// Return falsy value in case of don't want to show image
return null;
} else {
return {
url: "./low-value.svg",
width: 20,
height: 20,
pos: { x: 0, y: 0 }
};
}
}
},
[donut | gauge | pie | polar]: {
label: {
image: ...
}
}
Label Border Styling
Add borders to labels for improved readability and visual emphasis effects.
data: {
labels: {
border: true,
border: {
padding: { ... },
radius: 10
}
}
}
Inner Axis Ticks
Introducing the tick.inner option that allows you to display axis ticks inside the chart area for a cleaner, more modern chart design.
axis: {
x: {
tick: {
inner: true
}
},
y: {
tick: {
inner: true
}
},
y2: {
show: true,
tick: {
inner: true
}
}
}
Dynamic Label Background Colors
Set label background colors using functions to dynamically change colors based on data values, significantly enhancing data visualization expressiveness.
Within the function, the last returned color for dataset will be used.
Only can control set or unset background color for each values.
data: {
labels: {
// call back for label text background color
backgroundColors: function(color, d) {
// color: the default data label color string
// data: ex) {x: 0, value: 200, id: "data3", index: 0}
....
return d.value > 200 ? "cyan" : "red";
}
}
}
Enhanced Developer Experience
This release significantly increases chart customization flexibility based on developer feedback:
From inner axis ticks and dynamic label background functions to label borders and image-based labels — all the core features requested by our community are now available.
Image Label Support
A groundbreaking feature that allows using images as labels. Create more intuitive data representations with icons, logos, and custom images.
Press enter or click to view image in full size
Press enter or click to view image in full size
Press enter or click to view image in full size
The new data label image option also added to donut, gauge, pie and polar types as well.
Newly added options are:
- data.labels.image
- donut.label.image
- gauge.label.image
- pie.label.image
- polar.label.image
Simply specify image url and the dimension(dimension values are required, since it used to calculate correct position).
data: {
labels: {
image: {
url: "./assets/data1.svg",
// or use placeholder to dynamically set image URL based on data ID
url: "./images/{=ID}.svg", // will be replaced to "./images/data1.svg", "./images/data2.svg", etc.
width: 30,
height: 30,
pos: {
y: -5
}
},
// or use function to return image configuration dynamically
image: function(v, id, i) {
// v is the value of the data point where the label is shown.
// id is the id of the data where the label is shown.
// i is the index of the data series point where the label is shown.
// Return different images based on value
if (v > 500) {
return {
url: "./high-value.svg",
width: 40,
height: 40,
pos: { x: 0, y: 0 }
};
} else if (v > 100) {
return {
url: "./medium-value.svg",
width: 30,
height: 30,
pos: { x: 0, y: 0 }
};
} else if(v < 5) {
// Return falsy value in case of don't want to show image
return null;
} else {
return {
url: "./low-value.svg",
width: 20,
height: 20,
pos: { x: 0, y: 0 }
};
}
}
},
[donut | gauge | pie | polar]: {
label: {
image: ...
}
}
Label Border Styling
Add borders to labels for improved readability and visual emphasis effects.
Can control border radius and the padding, which will let customize styles as your needs.
data: {
labels: {
border: true,
border: {
padding: { ... },
radius: 10
}
}
}
Inner Axis Ticks
Introducing the tick.inner option that allows you to display axis ticks inside the chart area for a cleaner, more modern chart design.
Specify per axes by simply enabling the tick.inner option.
axis: {
x: {
tick: {
inner: true
}
},
y: {
tick: {
inner: true
}
},
y2: {
show: true,
tick: {
inner: true
}
}
}
Dynamic Label Background Colors
Set label background colors using functions to dynamically change colors based on data values, significantly enhancing data visualization expressiveness.
When the option is set, background colors can be specified one color per dataset.
Within the function, the last returned color for dataset will be used.
Only can control set or unset background color for each values.
data: {
labels: {
// call back for label text background color
backgroundColors: function(color, d) {
// color: the default data label color string
// data: ex) {x: 0, value: 200, id: "data3", index: 0}
....
return d.value > 200 ? "cyan" : "red";
}
}
}
Enhanced Developer ExperienceThis release significantly increases chart customization flexibility based on developer feedback:
- Enhanced Axis Control: Inner ticks enable more sophisticated chart designs
- Dynamic Styling: Function-based background colors for data-driven visualization
- Rich Label Expression: Border and image support for diverse representation methods
- Consistent API: Intuitive option structure while maintaining existing billboard.js patterns