The one fully documented thing that can be rendered using gradients is node fill color. However, by digging around a bit in undocumented properties you can also get it working for labels.
See Gradient fill example on codepen on how it could be done. Even though most of the API used there is not documented, it should be fairly stable, if we do manage to break it in future updates, let us know and we will see how we could expose these things better.
var t = new NetChart({
container: document.getElementById("demo"),
area: { height: 350 },
data: { preloaded: data },
style: {
nodeStyleFunction: function(n) {
// add gradient for node fillcolor
var bounds = t.getNodeDimensions(n);
if (bounds.radius) {
var gradient = tempCtx.createLinearGradient(bounds.x - bounds.radius, bounds.y, bounds.x + bounds.radius, bounds.y);
gradient.addColorStop(0, n.data.extra.c1);
gradient.addColorStop(1, n.data.extra.c2);
n.fillColor = gradient;
}
// add gradient for node label
createLabelGradient(n);
},
linkStyleFunction: function(l) {
// add gradient to link label fill color
createLabelGradient(l);
}
},
events: {
onPositionChange: function() {
// uncomment to make sure that the rendering is not done in an infinite loop
//console.log("calling updateStyle()", new Date().getTime());
// note that label style does not have to be updated - the labels are cached with the correct gradient.
// node fill however is painted from scratch every time so their gradient position has to be updated.
t.updateStyle(["n1", "n2", "n3"]);
}
}
});
function createLabelGradient(item) {
var label;
// LINKS
// use the undocumented `currentItems` collection to retrieve the label bounds
// note that the collection contains both the link label and any custom items it may have
if (item.isLink && item.currentItems && item.currentItems.length) {
label = item.currentItems[0];
}
// NODES
// assuming the default built in shape, the label can be read using other undocumented properties
if (item.isNode && item.shape) {
label = item.shape.currentLabel;
}
if (label && label.hwidth) {
// this gradient uses the fact that the labels are rendered on a cached canvas, so their actual
// coordinates on the screen are not important.
var gradient = tempCtx.createLinearGradient(-label.hwidth, 0, label.hwidth, 0);
gradient.addColorStop(0, item.data.extra.c1);
gradient.addColorStop(1, item.data.extra.c2);
item.labelStyle.backgroundStyle.fillColor = gradient;
}
}