vega lite: duplicate labels in Date axis

[Jeanxyz]

I need to create a stock candle chart, I found the vega lite code from below: https://vega.github.io/vega-lite/examples/layer_candlestick.html

when I run the code using the author's source data, it all goes well, but when I change the data to my power dataset, I got duplicate dates.  I don't understand the problem, in Vega data preview , I can see each date has only one row of data, in my data fields open, high, low, close are measures, e.g.. open = average(fact_stocks[Open]). 

[v-hashadapu]

Hi @Jeanxyz , Hope you are doing well, can you please share us the ETA if possible, We are happy to assist you if the issue still persists. If you have any further queries, please feel free to start a new thread.

Thank you.

[v-hashadapu]

Hi @Jeanxyz , Hope you are doing well. Kindly let us know if the issue has been resolved or if further assistance is needed. Your input could be helpful to others in the community.

[v-hashadapu]

Hi @Jeanxyz , Thank you for reaching out to the Microsoft Community Forum.

The duplicate X-axis dates in your Vega-Lite candlestick chart aren’t caused by your data or measures, they happen because Vega-Lite, with few data points and a wide chart, automatically adds extra tick marks for spacing. When you reduced the chart width, Vega showed fewer ticks, which just happened to match your actual dates. To fix this properly, add timeUnit and labelOverlap to the X-axis so Vega treats each date exactly and avoids duplicating labels.

Try this updated X-axis config:

"x": {

  "field": "Date",

  "type": "temporal",

  "timeUnit": "yearmonthdate",

  "axis": {

    "format": "%Y/%m/%d",

    "labelAngle": -45,

    "labelOverlap": false,

    "title": "Date"

  }

}

If this helped solve the issue, please consider marking it “Accept as Solution” so others with similar queries may find it more easily. If not, please share the details, always happy to help.
Thank you.

[jean0304]

Hi @v-hashadapu , 

Thanks for help, and sorry for late reply. I added timeUnit bound and labelOverlap, the problem still exists. Maybe there is some setup in my script which overwrites the two properties. I will study vega-lite tutorial first before continuing further on this problem. Will post an answer if I got it fixed. 

[v-hashadapu]

Hi @jean0304 , Thanks for the update and we really we appreciate if you will share the answer, as it will help others.

Thank you.

[rohit1991]

Hi @Jeanxyz  

The root cause is usually that Vega expects one unique row per date with Open, High, Low, and Close all together  but Power BI, when using measures like average(fact_stocks[Open]), doesn't always behave that way.

Even if your data looks clean (i.e., one row per date) in Data view or Vega preview, what's actually getting passed to the Vega visual might still have duplicates  especially if Date isn’t being treated as a proper dimension.

Create a summarized table that flattens everything into one row per date:

StockChartData =
SUMMARIZE(
fact_stocks,
fact_stocks[Date],
"Open", AVERAGE(fact_stocks[Open]),
"High", AVERAGE(fact_stocks[High]),
"Low", AVERAGE(fact_stocks[Low]),
"Close", AVERAGE(fact_stocks[Close])
)

Once that’s done, use this table as the source for your Vega visual not the original fact_stocks table with measures.

Also double check in your Vega code that the x field is set to "type": "temporal" or "ordinal" depending on what you want for the time axis.

[Daniel29195]

Hello@Jeanxyz 

I hope you are doing great today, 

sorry that i can t help you with vega lite code.  i worked on a vega lite gant chart once, and let me tell you, it is a nightmare 🥲

did you try using chatgpt ?  it worked well for me for vega lite .
if not, you can try maybe claude.ai ( i know that it is better for coding ) . deepseek also is good. 

if you want , i dont mind taking a look at your report, if you can share, it to dig deeper into what could be the problem .

[Jeanxyz]

Thanks for help, Daniel. My 10-year old daughter helped me figure out the issue. The duplicate comes from the default setup of Vega-Lite. When there are only three data points, Vega-Lite will duplicate the X ticks to make the chart look nice, if I change the chart width of the chart form 400 to 100, the duplicates simply disappeared. 

I'm new to Vega-Lite, hence not sure how to fix this. And yes, I used ChatGpt to write the codes :), but I plan to spend some hours to understand the basic syntax of Vega-Lite before go further on the project. 

Below is how the chart looks like when I select multiple months.