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

Calling all Data Engineers! Fabric Data Engineer (Exam DP-700) live sessions are back! Starting October 16th. Sign up.

Reply
Anonymous
Not applicable

how to implement Deneb chart with many column labels?

how to implement Deneb chart with many column labels?
Trying to replicate Tableau stacked bar chart with 2 columns on the left side.
pls point me on example or give any idea

I found some hereโ€œhconcatโ€ block to display six columns side-by-side

1 ACCEPTED SOLUTION
dm-p
Honored Contributor

Apologies for the delay. I have been sick for the last couple of weeks and am trying to catch up on things before the holidays. I've added columns to mimic the original mockup, so you should be able to adapt accordingly. Note that x-positioning is hard-coded, but this could be done via transforms - either way, I'm hoping this is enough for you to have a think about your version. A workbook containing the spec is also attached to this post.

 

dmp_1-1734559695652.png

 

Spec

{
  "data": {
    "name": "dataset"
  },
  "transform": [
    {
      "calculate": "datum['Sector'] + '-' + datum['Channel']",
      "as": "grain"
    },
    {
      "window": [
        {
          "op": "row_number",
          "as": "group_row_number"
        }
      ],
      "groupby": [
        "Sector"
      ]
    }
  ],
  "spacing": 0,
  "hconcat": [
    /* Labels */
    {
      "width": 150,
      "layer": [
        /* "Group" (sector) */
        {
          "transform": [
            {
              "filter": "datum['group_row_number'] == 1"
            }
          ],
          "mark": {
            "type": "text",
            "style": [
              "category_label"
            ]
          },
          "encoding": {
            "text": {
              "field": "Sector"
            },
            "x": {
              "value": 0
            }
          }
        },
        /* Channel column */
        {
          "mark": {
            "type": "text",
            "style": [
              "category_label"
            ]
          },
          "encoding": {
            "text": {
              "field": "Channel"
            },
            "x": {
              "value": 75
            }
          }
        },
        /* Sales Value */
        {
          "mark": {
            "type": "text",
            "style": [
              "value_label"
            ]
          },
          "encoding": {
            "text": {
              "field": "Sales"
            },
            "x": {
              "value": 175
            }
          }
        },
        /* Net Sales Value */
        {
          "mark": {
            "type": "text",
            "style": [
              "value_label"
            ]
          },
          "encoding": {
            "text": {
              "field": "Net Sales"
            },
            "x": {
              "value": 225
            }
          }
        },
        /* Profit Value */
        {
          "mark": {
            "type": "text",
            "style": [
              "value_label"
            ]
          },
          "encoding": {
            "text": {
              "field": "Profit",
              "format": ".1%"
            },
            "x": {
              "value": 275
            }
          }
        }
      ],
      "encoding": {
        "y": {
          "field": "grain"
        }
      }
    },
    /* Negative-facing stack */
    {
      "width": 150,
      "transform": [
        {
          "fold": [
            "Sales",
            "Net Sales"
          ],
          "as": [
            "metric",
            "value"
          ]
        }
      ],
      "layer": [
        {
          "mark": {
            "type": "bar"
          }
        }
      ],
      "encoding": {
        "y": {
          "field": "grain"
        },
        "x": {
          "field": "value",
          "type": "quantitative",
          "scale": {
            "reverse": true
          }
        },
        "color": {
          "field": "metric",
          "legend": null,
          "scale": {
            "range": ["#cee9fb", "#99cef7"]
          }
        }
      }
    },
    /* Positive-facing stack */
    {
      "width": 150,
      "layer": [
        {
          "mark": {
            "type": "bar",
            "color": "#d5a0c7"
          }
        }
      ],
      "encoding": {
        "x": {
          "field": "Profit",
          "type": "quantitative"
        },
        "y": {
          "field": "grain"
        }
      }
    }
  ]
}

Config

{
  "view": {
    "stroke": "transparent"
  },
  "axis": {
    "title": false,
    "ticks": false,
    "grid": false,
    "domain": false,
    "labels": false
  },
  "style": {
    "category_label": {
      "align": "left"
    },
    "value_label": {
      "align": "right"
    }
  }
}

Cheers,

 

Daniel





Did I answer your question? Mark my post as a solution!

Proud to be a Super User!


On how to ask a technical question, if you really want an answer (courtesy of SQLBI)




View solution in original post

6 REPLIES 6
lbendlin
Esteemed Contributor III

Please provide sample data that covers your issue or question completely, in a usable format (not as a screenshot).

Do not include sensitive information. Do not include anything that is unrelated to the issue or question.

Need help uploading data? https://community.fabric.microsoft.com/t5/Community-Blog/How-to-provide-sample-data-in-the-Power-BI-...

Please show the expected outcome based on the sample data you provided.

Want faster answers? https://community.fabric.microsoft.com/t5/Desktop/How-to-Get-Your-Question-Answered-Quickly/m-p/1447...

Anonymous
Not applicable

screenshot of what I'm trying to achieve and test data

 

SectorChannel SalesNet SalesProfit
Sector 0Fragmented 1004040.0%
 Organized 1206050.0%
Sector 1Fragmented 1,2221,16295.1%
 Organized 53447488.8%
Sector 2Fragmented 26520577.4%
 Organized 45639686.8%
Sector 4Fragmented 66660691.0%
 Organized 563460.7%
Sector 5Fragmented 6,6656,60599.1%
 Organized 77771792.3%
Sector 6Fragmented 88882893.2%
 Organized 993939.4%

Sergii_Petrov_0-1732272854519.png



dm-p
Honored Contributor

Hey @Anonymous - based on the mockup and the data, I interpret your desired output as this. Is this correct? If not, please advise what needs fixing, and I will find more time to finish this up.

 

dmp_0-1732835050580.png

 





Did I answer your question? Mark my post as a solution!

Proud to be a Super User!


On how to ask a technical question, if you really want an answer (courtesy of SQLBI)




Anonymous
Not applicable

exactly!
if you have similar template it would be great.

only thing I'd  like 2 more numeric columns in a matrix on the right to "fragmented" one

dm-p
Honored Contributor

Apologies for the delay. I have been sick for the last couple of weeks and am trying to catch up on things before the holidays. I've added columns to mimic the original mockup, so you should be able to adapt accordingly. Note that x-positioning is hard-coded, but this could be done via transforms - either way, I'm hoping this is enough for you to have a think about your version. A workbook containing the spec is also attached to this post.

 

dmp_1-1734559695652.png

 

Spec

{
  "data": {
    "name": "dataset"
  },
  "transform": [
    {
      "calculate": "datum['Sector'] + '-' + datum['Channel']",
      "as": "grain"
    },
    {
      "window": [
        {
          "op": "row_number",
          "as": "group_row_number"
        }
      ],
      "groupby": [
        "Sector"
      ]
    }
  ],
  "spacing": 0,
  "hconcat": [
    /* Labels */
    {
      "width": 150,
      "layer": [
        /* "Group" (sector) */
        {
          "transform": [
            {
              "filter": "datum['group_row_number'] == 1"
            }
          ],
          "mark": {
            "type": "text",
            "style": [
              "category_label"
            ]
          },
          "encoding": {
            "text": {
              "field": "Sector"
            },
            "x": {
              "value": 0
            }
          }
        },
        /* Channel column */
        {
          "mark": {
            "type": "text",
            "style": [
              "category_label"
            ]
          },
          "encoding": {
            "text": {
              "field": "Channel"
            },
            "x": {
              "value": 75
            }
          }
        },
        /* Sales Value */
        {
          "mark": {
            "type": "text",
            "style": [
              "value_label"
            ]
          },
          "encoding": {
            "text": {
              "field": "Sales"
            },
            "x": {
              "value": 175
            }
          }
        },
        /* Net Sales Value */
        {
          "mark": {
            "type": "text",
            "style": [
              "value_label"
            ]
          },
          "encoding": {
            "text": {
              "field": "Net Sales"
            },
            "x": {
              "value": 225
            }
          }
        },
        /* Profit Value */
        {
          "mark": {
            "type": "text",
            "style": [
              "value_label"
            ]
          },
          "encoding": {
            "text": {
              "field": "Profit",
              "format": ".1%"
            },
            "x": {
              "value": 275
            }
          }
        }
      ],
      "encoding": {
        "y": {
          "field": "grain"
        }
      }
    },
    /* Negative-facing stack */
    {
      "width": 150,
      "transform": [
        {
          "fold": [
            "Sales",
            "Net Sales"
          ],
          "as": [
            "metric",
            "value"
          ]
        }
      ],
      "layer": [
        {
          "mark": {
            "type": "bar"
          }
        }
      ],
      "encoding": {
        "y": {
          "field": "grain"
        },
        "x": {
          "field": "value",
          "type": "quantitative",
          "scale": {
            "reverse": true
          }
        },
        "color": {
          "field": "metric",
          "legend": null,
          "scale": {
            "range": ["#cee9fb", "#99cef7"]
          }
        }
      }
    },
    /* Positive-facing stack */
    {
      "width": 150,
      "layer": [
        {
          "mark": {
            "type": "bar",
            "color": "#d5a0c7"
          }
        }
      ],
      "encoding": {
        "x": {
          "field": "Profit",
          "type": "quantitative"
        },
        "y": {
          "field": "grain"
        }
      }
    }
  ]
}

Config

{
  "view": {
    "stroke": "transparent"
  },
  "axis": {
    "title": false,
    "ticks": false,
    "grid": false,
    "domain": false,
    "labels": false
  },
  "style": {
    "category_label": {
      "align": "left"
    },
    "value_label": {
      "align": "right"
    }
  }
}

Cheers,

 

Daniel





Did I answer your question? Mark my post as a solution!

Proud to be a Super User!


On how to ask a technical question, if you really want an answer (courtesy of SQLBI)




Anonymous
Not applicable

what could I reach so far, and stuck on setting 2nd level grouping

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": {
    "values": [
      {"Sector": "Sector 0", "Channel": "Fragmented", "Sales": 100, "Net Sales": 40, "Profit": "40.0%"},
      {"Sector": "Sector 0", "Channel": "Organized", "Sales": 120, "Net Sales": 60, "Profit": "50.0%"},
      {"Sector": "Sector 1", "Channel": "Fragmented", "Sales": 1222, "Net Sales": 1162, "Profit": "95.1%"},
      {"Sector": "Sector 1", "Channel": "Organized", "Sales": 534, "Net Sales": 474, "Profit": "88.8%"},
      {"Sector": "Sector 2", "Channel": "Fragmented", "Sales": 265, "Net Sales": 205, "Profit": "77.4%"},
      {"Sector": "Sector 2", "Channel": "Organized", "Sales": 456, "Net Sales": 396, "Profit": "86.8%"},
      {"Sector": "Sector 4", "Channel": "Fragmented", "Sales": 666, "Net Sales": 606, "Profit": "91.0%"},
      {"Sector": "Sector 4", "Channel": "Organized", "Sales": 56, "Net Sales": 34, "Profit": "60.7%"},
      {"Sector": "Sector 5", "Channel": "Fragmented", "Sales": 6665, "Net Sales": 6605, "Profit": "99.1%"},
      {"Sector": "Sector 5", "Channel": "Organized", "Sales": 777, "Net Sales": 717, "Profit": "92.3%"},
      {"Sector": "Sector 6", "Channel": "Fragmented", "Sales": 888, "Net Sales": 828, "Profit": "93.2%"},
      {"Sector": "Sector 6", "Channel": "Organized", "Sales": 99, "Net Sales": 39, "Profit": "39.4%"}
    ]
  },
  "transform": [
    {"joinaggregate": [{"op": "sum", "field": "Sales", "as": "TotalSales"}]},
    {"calculate": "datum.Sales/datum.TotalSales * 100", "as": "PercentOfTotal"}
  ],
  "hconcat": [
    {
      "mark": "text",
      "encoding": {
        "y": {"field": "Sector", "type": "ordinal"},
        "text": {"field": "Sector", "type": "ordinal"}
      }
    },
  {
      "mark": "text",
      "encoding": {
        "y": {"field": "Sector", "type": "ordinal"},
        "x": {"field": "Channel", "type": "ordinal"},
        "text": {"field": "Sales", "type": "quantitative", "format": ",.0f"},
        "tooltip": [
          {"field": "Sales", "type": "quantitative", "title": "Sales"},
          {"field": "Net Sales", "type": "quantitative", "title": "Net Sales"},
          {"field": "Profit", "type": "nominal", "title": "Profit"}
        ]
      }
    },
    {
      "mark": "bar",
      "encoding": {
        "y": {"field": "Sector", "type": "ordinal"},
        "x": {"field": "Sales", "type": "quantitative", "axis": {"labels": true,"title": null,"labelFontSize": 12, "titleFontSize": 14}},
        "color": {"field": "Channel", "type": "nominal", "title": "Channel"}
      }
    }
  ],
  "resolve": {"scale": {"y": "shared"}}
,  "config": {
    "text": {"baseline": "middle", "fontSize": 8},
    "view": {"stroke": "transparent"},
    "axis": {"domain": false, "ticks": false, "labels": false, "title": null},
    "legend": {"orient": "right", "titleFontSize": 14, "labelFontSize": 12}
  }
  }

 

Helpful resources

Announcements
Top Solution Authors
Users online (9,586)