I have a realtime timeseries chart which should show a variety of values. To make it mor clear: It should contain values for a solar park. Therefore I have stuff like Voltage, Current, Power (absolute & normalized to 1MW), Temperature and Irradiation.

The irradiation value is a global one so it exists only once. All the other values basically exists for each inverter which is installed on the park, I'm talking about max 20 to 30.

The user will overlay the curves over each other to compare different inverters with each other.

What is the best approach to assign the colors to the curves? I want to be able to distinguish between the devices and additionally between the different values. So lets say I want to compare two inverters both temperature ans power output. The user should be able to clearly see what curve belongs to which inverter and also which is the temperature and which is the power output.

So all in all, if we talk about 20-30 devices, I have around 140-210 different curves (each its own color) which can be combined in any way.

1 Answer 1


The total estimate you are giving is a huge number of colors for the user to be able to recall and even distinguish to make any sensible overview of the data they are seeing.

And I don't think that at any one time you will have more than, say, 20 colors in one graph in most use cases. And if you will, the graph will become illegible anyways, so what is the point of that? And I don't see any UX benefit in colors being unique and persistant for the unique device/type of values. Since it is highly doubtful that the user would be impressed (and helped in any form given so many total colors) by the fact that, say, Device #5 voltage output is always 'Bubblegum pink' rather than 'Salmon'.

You don't specify what type of interface it will be exactly. Will it be one single graph or you would have serveral graphs on the page. The best approach in each hase is different.

What I would suggest you to do in terms of colors is to handpick, say, 20 most unique and easily distinguishable colors and use them on the graph whenever the amount of time series are 20 or less. Then, for use cases if there are more colors needed in the graph, write a function that returns a list of colors that are maximally spaced out apart from each other on the color spectrum. Say, if the total spectrum is 16mil combinations of RGB values, and you need to obtain 40 colors, pick a color every 400k values apart. Well, you have quite some rep on stackoverflow so I think you got the point :)

However, in your situation I would say that the most important thing, apart from colors, are legends and the interactivity of the graph. I don't know what sort of solution you are using, but I would suggest to use some sort of graph engine that allows for interactivity on mouse over. For example, the line becomes bolder and its title and units appear whenever a user brings the mouse cursor over a particular line in the graph.

That would also mitigate accesabilty problems for people with color blindness.

  • maybe I was not clear enough in my description. Of course the user will in most cases not select more than a handful of the available series. My problem is that I have to prepopulate the colors (programatically of course), but If the user chooses any of the data series, he should be able to distinguish between the devices on on hand, and the type of the values on the other.
    – Mauli
    Jul 24, 2014 at 8:54
  • I don't think that color alone can solve that in your situation. Therefore you should relay on the legend and interactivity of your graphs. Take a look at this javascript library canvasjs.com/html5-javascript-spline-chart Perhaps it's something you can use. Jul 24, 2014 at 10:27

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.