When there are more than 5 lines, line 6 an up are invisible

[openjck]

Steps to reproduce

Download and open this HTML document

Actual result

The final 5 lines (in this case, the top-most 5 lines) are invisible. Hovering over them does cause a black circle to appear, however.

Expected result

All lines are colored. d3 has something that looks like it could help with this. As a last resort, if there are any lines that can't be assigned a color, having multiple black lines would be better than having insible lines.

[hamilton]

Agreed, that would be a better expected result. It should also simply have a larger set of colors.

[shikhar-scs]

However the README.md mentions something about this in the FAQ section.

I only see the first five lines in my chart, what gives?

The colors for the first five lines, areas and legends are defined in the stylesheet for 
the light and dark themes. For a sixth line, you would add the follow CSS rules:

.mg-line6-color {
    stroke: steelblue;
}

.mg-area6-color {
    fill: steelblue;
}

.mg-hover-line6-color {
    fill: steelblue;
}

.mg-line6-legend-color {
    color: steelblue;
}
If you're plotting more than five lines in the same chart and using color to encode 
some dimension of the data, then you probably need to rethink the chart.

So, I guess this has been done on purpose. However, taking the scope to around 10 different colors shouldn't cause much harm. I've found out where to work on this.

If allowed can I file a related PR please ? @hamilton whatsay

[wlach]

My vote would be to allow up to 10 colors and render any additional series in black. I agree that most charts shouldn't need/have more than 5 different colors in them, but otoh I don't think it's helpful to be overly restrictive here given the low effort involved.

[shikhar-scs]

@wlach similar thoughts I have.
Then maybe I'll pick up the rest of the 5 from the d3 series available here and file a PR soon.

[shikhar-scs]

@wlach I've started work recently and realised that actually it would be of much help if you could tell me the exact colours you would want apart from steelblue for 6. I just need to insert these specific colour codes into the file.

[hamilton]

This sounds like a great PR. I'd say:

1.) Extend to 10 colors. You can fill in the remaining 5 from the link you provided. Frankly the ordering is not particularly important past the 5 we have now (which were from category10 but moved around since we didn't want to see that light color as the second line all the time).
2.) Past 10, the lines should be black + they should have the appropriate classes in-place. This places the onus on the user to fill in the colors if necessary.
3.) we need to provide some documentation that this is how multi-line charts work, with an explanation about why we only support 10 colored lines.
4.) I'm on the fence about the usability of allowing colors for more than 10. On the one hand, if this were a piece of paper, I'd say more than 5 is a disaster probably. But we are on the DOM. Mouse interactions can help clarify a multi-line plots. My vote is usually to be more conservative, and this solution gives the user just enough rope at any rate.

[shikhar-scs]

Ok @hamilton me right at work.

we need to provide some documentation that this is how multi-line charts work, with an explanation about why we only support 10 colored lines.

Maybe I'll file another one, improving the README for the same

Past 10, the lines should be black + they should have the appropriate classes in-place. This places the onus on the user to fill in the colors if necessary.

I'll keep this in mind for sure

[shikhar-scs]

@hamilton
I had implemented the colors for the first 10 lines easily.
However, when I'm trying to implement this,

Past 10, the lines should be black + they should have the appropriate classes in-place. This places the onus on the user to fill in the colors if necessary.

I'm unable to identify the exact places in https://github.com/mozilla/metrics-graphics/blob/master/dist/metricsgraphics.js where the specific classes are being added to each path_line in the format mg-line${line_id}. I've already tried in the following places but in vain.

  function mg_default_color_for_path(this_path, line_id) {
    this_path.classed('mg-line' + (line_id) + '-color', true);
  }

&

if (args.color === null) {
          class_string += ' mg-line' + d.line_id + '-color';
        }
        return class_string;

      } else {
        class_string = 'mg-line' + d.line_id;
        if (args.color === null) class_string += ' mg-line' + d.line_id + '-color';
        return class_string;
      }

• a couple of other places too. However, I'm not getting the expected results.

I've made a class called mg-line-black which should be added to the class string in case args.color is null and line_id>10

The colors that I've added are as shown below

Only if you could guide me a bit on where to make the exact changes for mg-line and legend also, it would complete the PR.

[hamilton]

Happy to help guide, but due to holidays I’ll be away from the computer for a few days.

…

On Sun, Dec 24, 2017 at 9:34 PM Shikhar Agnihotri ***@***.***> wrote: @hamilton <https://github.com/hamilton> I had implemented the colors for the first 10 lines easily. However, when I'm trying to implement this, Past 10, the lines should be black + they should have the appropriate classes in-place. This places the onus on the user to fill in the colors if necessary. I'm unable to identify the exact places in https://github.com/mozilla/metrics-graphics/blob/master/dist/metricsgraphics.js where the specific classes are being added to each path_line in the format mg-line${line_id}. I've already tried in the following places but in vain. function mg_default_color_for_path(this_path, line_id) { this_path.classed('mg-line' + (line_id) + '-color', true); } & if (args.color === null) { class_string += ' mg-line' + d.line_id + '-color'; } return class_string; } else { class_string = 'mg-line' + d.line_id; if (args.color === null) class_string += ' mg-line' + d.line_id + '-color'; return class_string; } - a couple of other places too. However, I'm not getting the expected results. I've made a class called mg-line-black which should be added to the class string in case args.color is null and line_id>10 The colors that I've added are as shown below [image: colorsmetrics] <https://user-images.githubusercontent.com/25258877/34332051-714e9a08-e952-11e7-8b81-1a24d63a4538.png> Only if you could guide me a bit on where to make the exact changes for mg-line and legend also, it would complete the PR. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#783 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAF19ze11wk-vTgLBCQL8iqMIkOcGgleks5tDxfegaJpZM4RKf8w> .

[shikhar-scs]

Well that's no problem @hamilton I'll wait up till after the new year.

P.S. Merry Christmas 🎄 🎅

[shikhar-scs]

So @hamilton if you are back, do you mind answering this

I'm unable to identify the exact places in https://github.com/mozilla/metrics-graphics/blob/master/dist/metricsgraphics.js where the specific classes are being added to each path_line in the format mg-line${line_id}.

[shikhar-scs]

@hamilton are you back ?

[wlach]

@shikhar-scs I can probably help on this a bit, though I'm less experienced with the code in question than @hamilton. Could you post your work-to-date in a PR (referencing this issue)? Then we can iterate on this together.

[shikhar-scs]

@wlach yep Sure, I'll push my code rightaway 👍

EDIT : please have a look ta the PR filed by me below #791

[wlach]

Hopefully we're good here now!