Styling the Info Chart Feeding Panel component
The Info Chart Feeding Panel component allows to change the look of Info Charts at runtime. Here’s a quick cheat sheet on which CSS classes to override in order to change its style.
ℹ The class .ui-state-highlight is the highlighted area when dropping is allowed (.ui-state-error when dropping is not allowed)
❗ The default padding around a feeding-sortable-item is not centered, this should be fixed in a service pack.
Here is the full CSS used to achieve this result:
.feedTypeTitle {
background:#ddddff;
}
.feedTypeContainer .feedTypeTitle {
color:#5151ae;
}
.feedContainer .bucketContainer {
background:#ffffa8;
}
.feedTypeContainer .feedContainer {
background: #d3d3d3;
}
body > .feeding-sortable-item {
background:black;
color:red;
font-size: 12px;
}
.bucketList .ui-state-highlight {
background:green;
}
.bucketList .ui-state-error {
background:red;
}
.bucketElement {
color: #1e6220;
}
.bucket {
color:#b32f61;
}
Thanks for sharing!
Hi Etienne,
In a run-time when a user changes the CHART_1 (dual axis Chart) Measure Value Axis & Value Axis 2 through the feeding panel, same changes should be reflected to the CHART_2 (dual axis Chart) which has a same data source as Char_1.
Can you please help me how should I achieve it?
Hello Poudel,
Apologies for the delay. Unfortunately the Feeding Panel was not designed to broadcast one single feed to several charts. It is possible to change the binding at runtime, but this will not achieve what you are trying to do unfortunately.
Could you detail a little why do you need this functionality? I'm not sure why 2 charts displaying the same feed and bound to the same data source is required. Maybe there are other ways to fulfill this requirement.
Regards,
Etienne