topic Re: Creating a 3 Axis Line Chart in Custom Visuals Development Discussion

Creating a 3 Axis Line Chart

JST15 — Thu, 31 Oct 2024 13:03:46 GMT

Hello! In the attached or below, you'll see 3 axis line chart created in excel. It's a line chart using the secondary and then overlapping another line chart on top of that. It works but is a bit sloppy. We're trying to do the same in Power BI without buying a license from a third party. Is there a way to do this using the Power BI native charts? If not, does overlapping two line charts work? Thank you so much for any help!!

Re: Creating a 3 Axis Line Chart

lbendlin — Thu, 31 Oct 2024 20:46:13 GMT

Should be simple with Deneb. 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-Forum/ba-p/963216

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/1447523

Re: Creating a 3 Axis Line Chart

JST15 — Fri, 01 Nov 2024 20:30:32 GMT

Hi Ibendlin- thank you! I havne't heard of Deneb before, though I'm very new to PBI. Below is the table that the graph is build off of. I hope this is in the correct usable format. I've modified the amounts so none is sensitive information. Ideally, the left y-axis shows both "GM%" and "QTY" each as it's own axis scale with GM% as a percentage and QTY as a number, the right secondary axis shows "ASP$" and "GM $/unit", both in dollar. Picture below. I really hope I've supplied enough information.

PERIOD_YEAR	QTY	GM $/unit	GM %	ASP $
2019	1,080	$6,950.00	41.15%	$16,650.00
2020	950	$7,010.00	42.00%	$16,680.00
2021	1,145	$6,250.00	36.50%	$17,500.00
2022	1,050	$5,540.00	32.22%	$17,200.00
2023	970	$4,680.00	26.50%	$17,700.00
2024	830	$4,840.00	27.00%	$17,800.00

THANK YOU THANK YOU THANK YOU

Re: Creating a 3 Axis Line Chart

lbendlin — Sun, 03 Nov 2024 12:53:34 GMT

Here's something to get you going. Still needs coloring, smoothing etc.

The key is the "resolve" instruction at the bottom.

{ "data": { "name": "dataset" }, "encoding": { "x": { "field": "PERIOD_YEAR", "type": "nominal" } }, "layer": [ { "mark": { "type": "line" }, "encoding": { "y": { "field": "QTY ", "type": "quantitative" } } }, { "mark": { "type": "line" }, "encoding": { "y": { "field": "GM % ", "type": "quantitative" } } }, { "mark": { "type": "line" }, "encoding": { "y": { "field": "GM $/unit ", "type": "quantitative", "axis": {"offset":50} } } } ], "resolve": {"scale": {"y": "independent"}} }

Re: Creating a 3 Axis Line Chart

JST15 — Mon, 04 Nov 2024 18:08:18 GMT

This is amazing! I've got it working and is great. Thank you for the help and introducing me to Deneb.

Re: Creating a 3 Axis Line Chart

JST15 — Wed, 06 Nov 2024 19:10:54 GMT

Sorry, I'm stuck again.

The intervals ticks for my right side y-axis are using the exact value rather than round whole values intervals like the x-axis. This is causing my the two lines I'm expecting for the right side y-axis to merge into one. I tried changing my formats but it isn't working. I also tried reading the vega light documentation but couldn't figure it out. Do you know how to change this so my right side y-axis uses round whole values rather than the exact? Below is the code I'm using as well. Thank you!!!

{

"data": {"name": "dataset"},

"encoding": {

"x": {

"field": "PERIOD_YEAR",

"type": "nominal"

}

"layer": [

{

"mark": {

"type": "line"

"encoding": {

"y":{

"field": "QTY",

"type": "quantitative"

}

{

"mark": {

"type": "line"

"encoding": {

"y":{

"field": "GM%_Less LC__formatted",

"sort":"-y"

}

{

"mark": {

"type": "line"

"encoding": {

"y": {

"field": "GM $/unit_Less LC__formatted",

"sort":"-y",

"axis": {"offset":70}

}

"resolve": {"scale": {"y":"independent"}}

}

Re: Creating a 3 Axis Line Chart

lbendlin — Wed, 06 Nov 2024 20:26:24 GMT

Not sure what your concern is. Do you want to manually provide the values for the tick marks?

Axis | Vega-Lite

Re: Creating a 3 Axis Line Chart

JST15 — Thu, 07 Nov 2024 15:11:09 GMT

I'd rather the ticks be even even intervals like 0, 20%, 25%... rather than showing the exact value. I'll read the documents you send as those look like they will help solve the issue. No need to reply and THANK YOU so much for all of the help! This was very appreciated and I learned a ton.