Skip to Content
Author's profile photo Etienne Guilhaume

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.

Capture.PNG

ℹ 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;

}

Assigned Tags

      3 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Laurens Geraedts
      Laurens Geraedts

      Thanks for sharing!

      Author's profile photo Former Member
      Former Member

      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?

      Author's profile photo Etienne Guilhaume
      Etienne Guilhaume
      Blog Post Author

      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