[Userscript] WaniKani Dashboard Level Progress Detail 1.0+

Hello :slight_smile:

First I just want to say I love this script!

Question: Did the “roundness” feature get turned off? Mine had been working (set at max 10) until about 5 days ago. I figured the script might be in maintenance or something, but I can’t seem to get my roundness to turn back on! I like the round things!!! :joy:

That’s odd, mine seems to work just fine:

Roundness 0:

Roundness 10:

Also, there hasn’t been an update since 10 days ago. Did you install any other scripts or styles?

1 Like

Hmmm not in a while… I’m actually talking about the “3D” effect roundness, which is what I thought that was referring to. My bubbles are round at the end but just not 3D anymore!

Oh, the shadow-y effect got turned off by default because it doesn’t work well with light mode (which vanilla WK uses).

You can turn it back on in the third settings tab by checking the box.


1 Like

OHHH! I didn’t really know how to use that tab. Now that you showed me what yours looks like, I just tried it again and it works! :smiley: THANK YOU @MagicalGrill !!!


Just pushed 1.1.5 to change the “Use Gradient” label to “Use Gradient (3D effect)”

1 Like

:open_mouth: :slight_smile:

Ooooo I made a contribution to a script! (however small :laughing:)

Thank you Ulnt2048!!!

1 Like

1.1.6 is out which adds a setting to let you require an item be learned to show a progression

1 Like

This is really cool, thanks for making it!

It would be nice if there was an option for a slim / compact view. I feel like it takes up too much space right now.

I made a script that transforms it into a slim view. I’ll share it here in case anyone else would like to use it.

// ==UserScript==
// @name         WaniKani Dashboard Level Progress Detail - Slim View
// @version      0.1
// @description  Transforms the level progress indicators to be slim
// @author       Onusai
// @include      /^https://(www|preview).wanikani.com/(dashboard)?$/
// @run-at       document-end
// @grant        none
// ==/UserScript==

function transform() {

  document.getElementsByClassName("vocab-progress").forEach(e => {

    // reduces the size of the headings
    let heading = e.getElementsByTagName("h3")[0];
    heading.style["font-size"] = "12px";
    heading.style["line-height"] = "0";
    heading.style["letter-spacing"] = "0";
    heading.style["margin"] = "9px 0";

    // reduces the size of the progress bars
    let bar = e.getElementsByClassName("progress")[0];
    bar.style["height"] = "10px";

    // reduces the size of the charts below progress bars
    let chart = e.getElementsByClassName("chart")[0];
    chart.style["font-size"] = "10px";
    chart.style["line-height"] = "12px";

    // (optional) removes the green color from 90% kanji chart
    e.getElementsByClassName("threshold").forEach(i => {
      i.style["color"] = "";
      i.style["border-right-color"] = "rgba(0,0,0,0.1)";
      i.getElementsByTagName("div")[0].style["font-weight"] = "normal";


(function() {
  // attempts to apply the transformation for 15 seconds after the page loads
  for (let i = 0; i < 30; i++) {
    setTimeout(transform, i * 500);
1 Like

Thanks for the code! Would you mind if I incorporated into my script as a setting?


That would be great :slight_smile:

1 Like

Version 1.2.0 is out with three new settings!

Slim view & highlight threshold take advantage of the styles in the snippet provided by @Onusai

There’s also a zero left option which makes it always say 0 on the left in case it bugs you that the Guru+ number on the left could be greater than 50% :wink:

1 Like

Version 1.2.1 has been released to support the Real Score userscript (link in the first post)

I am having a bug for the last week in which the radical and kanji icons disappear. Is someone experiencing this?

With Dashboard Level Progress activated:

Without Dashboard Level Progress activated:

Before it would share the Level breakdown (first picture) WITH the radicals and Kanji icons (the normal progress bar would be replaced with the breakdown.

Can you help me fix this?

It might have been a bug accidentally introduced in the latest update. Can you confirm the “Hide current level” box is not enabled?

Just unmarked the box… for some reason all my UserScript configurations resetted and it marked the “Hide Current Level” box. Thank you so much :heart_eyes:

1 Like

I have released version 1.2.2 which limits a selector pursuant to a request by @Hubbit200

@jhendrix13 Sorry that this came too late to be of any use to you

1 Like

Any chance this script can be tweaked to be compatible with Better Progress Bar?

I love seeing the combined SRS stages of my current level’s kanji and radicals into a single bar. However, I’ve been focusing on Guru-ing all unlocked vocab before moving on so this script has been lovely for seeing that progress as a secondary bar for that extra dopamine boost to keep going.

With Better Progress Bar enabled:

After this script gets enabled:

1 Like

Yes, it can be. If you’d like to keep the original progress bar for compatibility, change -2 to -3 on line 92.

You also must keep the hide current level items setting off.

Yesss, it worked! Thanks a ton! I’m so glad it was a simple tweak. Now I can best observe my progress in all areas of a level >:D

1 Like