Skip to main content
cancel
Showing results for 
Search instead for 
Did you mean: 

Earn the coveted Fabric Analytics Engineer certification. 100% off your exam for a limited time only!

Reply
Anonymous
Not applicable

Problems with host.colorPalette not picking theme colors

Hello community,

 

I am trying to implement colors in my custom visual. So far it is looking really good, however I have troubles with the coloring.

 

Everything works fine, if the visual is added, while no filter on projects is active:

Project A will have color 1, Project B will have color 2 and so on. After that I can filter for Project B and it will stay color 2.

 

The problem
If I add my visual while there is an active filter on projects somewhere in the dashboard (e.g. only show project B), my visual will assign color 1 to Project B, while all other visuals pick the according color 2 for the Project B. 

 

I tried the same behaviour with Microsoft's visuals and they can pick the correct color, even when added with an active filter.


Does anybody have an idea what could cause this?
Thanks in advance!

 

THE CODE IN THIS POST IS OLD, PLEASE CHECK MY NEXT REPLY

I am using categorical dataViewMappings with grouping by project (old):

 

  "dataRoles": [
    {
      "displayName": "Date",
      "name": "date",
      "kind": "Grouping"
    },
    {
      "displayName": "Milestones",
      "name": "milestones",
      "kind": "Measure"
    },
    {
      "displayName": "Project Name",
      "name": "project",
      "kind": "Grouping"
    }
  ],
  "dataViewMappings": [
    {
      "categorical": {
        "categories": {
          "for": {
            "in": "date"
          }
        },
        "values": {
          "group": {
            "by": "project",
            "select": [
              {
                "for": {
                  "in": "milestones"
                }
              }
            ]
          }
        }
      }
    }
  ]

 

 

 

I am getting the colors like this (old):

 

let projects = dataViews[0].categorical.values.grouped();
host.colorPalette.reset();
projects.forEach(p => {
    const project = {
        name: p.name.toString(),
        milestones: [],
        colorLine: host.colorPalette.getColor(p.name.toString()).value),
        selectionId: host.createSelectionIdBuilder().withSeries(dataViews[0].categorical!.values!, p).createSelectionId()
    };
    // do something with project
}

 

1 REPLY 1
Anonymous
Not applicable

I had to update my dataViewMappings to support more columns. It now looks like this:

 

  "dataRoles": [
    {
      "displayName": "Reporting Date",
      "name": "date",
      "kind": "Grouping"
    },
    {
      "displayName": "Milestone Date",
      "name": "milestoneDate",
      "kind": "Measure"
    },
    {
      "displayName": "Milestone Name",
      "name": "milestone",
      "kind": "Grouping"
    },
    {
      "displayName": "Project Name",
      "name": "project",
      "kind": "Grouping"
    }
  ],
  "dataViewMappings": [
    {
      "categorical": {
        "categories": {
          "select": [
            {
              "for": {
                "in": "date"
              }
            },
            {
              "for": {
                "in": "project"
              }
            },
            {
              "for": {
                "in": "milestone"
              }
            }
          ]
        },
        "values": {
          "for": {
            "in": "milestoneDate"
          }
        }
      }
    }
  ]

 

 

and setting the selectionId like this:

 

const values = dataViews[0].categorical.values[0].values;
const col_project = dataViews[0].categorical.categories[index_project];

//...

values.forEach((value, i) => {
  //...
  project[index].selectionId = host.createSelectionIdBuilder().withCategory(col_project, i).createSelectionId();
  //...
}

 

 

Unfortunately the problem from my previous post persists.


Furthermore, when selecting a category by clicking on it in my legend all other visuals notice a selection, but all categories in those visuals getting "unhighlited" / half-transparent, as if a category which doesnt exists is selected. I must be doing something wrong while creating the selction?

Selecting via onClick:

 

host.createSelectionManager().select(viewModel.projects[i].selectionId);

 

 

Again, thank you for any pointers of code examples 🙂

Helpful resources

Announcements
April AMA free

Microsoft Fabric AMA Livestream

Join us Tuesday, April 09, 9:00 – 10:00 AM PST for a live, expert-led Q&A session on all things Microsoft Fabric!

March Fabric Community Update

Fabric Community Update - March 2024

Find out what's new and trending in the Fabric Community.