Performance/Goal Renderer
These are series renderers that compare and display the target value (or expected value) stored in two data fields and the execution value. There are types such as ActualTargetBulletRenderer, ActualTargetTextRenderer, and you must select the appropriate type according to the content of the data.
var columns = [
.. skip ..
{
width: 400,
name: 'colBullet',
type: 'series',
fieldNames: 'target,actual',
height: 30,
renderer: {
type: 'actualtargetbullet',
},
header: {
text: 'Bullet',
},
styleCallback: (grid, model) => {
const ret = {}
const [target, actual] = model.value;
if (target < actual) {
ret.renderer = {
actualStyle: 'fill-green'
}
} else {
ret.renderer = {
actualStyle: 'fill-red'
}
}
return ret;
},
},
{
width: 400,
name: 'colText',
type: 'series',
fieldNames: 'target,actual',
renderer: {
type: 'actualtargettext',
},
header: {
text: 'Text',
},
},
]