matplotlib / mplfinance

Financial Markets Data Visualization using Matplotlib
https://pypi.org/project/mplfinance/
Other
3.72k stars 636 forks source link

How do you remove the blurriness? #490

Open uldkh opened 2 years ago

uldkh commented 2 years ago

I can't figure out how to remove the blurring of the candles? Does anyone know?

blur

DanielGoldfarb commented 2 years ago

Please post the code that was used to generate the attached image, along with sample data so that others can reproduce, and a description as to exactly how you obtained the image file to post here on github. There are several different factors that can contribute to how sharp or fuzzy the candles appear, and the requested information is necessary to determine which of those factors are dominant in your case.

DanielGoldfarb commented 2 years ago

@uldkh Thanks. Just a couple more questions.

  1. How are you generating the .png file that you have posted? Are you using matplotlib code? If so, please show that code as well.
  2. Are the candles blurry on your screen as well, or just in the saved .png file?
  3. It appears to me (in terms of my own perception of blurriness) and based on the red arrows in the posted image, that you concern is mainly or only with the blue candles? Is this correct?

Thank you.

uldkh commented 2 years ago

image As an example, the same colors on the Traiding View. To see the difference you need to zoom in on your browser.

DanielGoldfarb commented 2 years ago

@uldkh You didn't answer all my questions that would be necessary to help me narrow it down; but no worrys because would not have the time now anyway to experiment with the details.

I will list items here that I know may affect the clarity of fuzziness of the edges of various objects in the plot, and you can play around and experiment with the details to see if you can get what appears to you to be a better plot.

First, I notice comparing the png files, that the clear one from Trading View has a bit depth of 32, whereas the "blurry" one from mplfinance only has a bit depth of 24. I am not completely sure if this make much difference, and I don't know exactly what you did to generate the mplfinance png file. As I understand it, the bit depth relates primarily to quality of color and it seems to me that some aspects of clarity in the plot relate to the color change between the edge of the candle and the plot background.

The other thing I notice is that the the colors on this image (the blurry plot) do not perfectly match the colors that you have chosen in your mplfinance style. You can see this by using a web site like this to determine the hex value of the color of different parts of the graph. The blue is a little bit more pale than the blue you have chose in your style, and the white is not quite as white. This certainly can lead to less contrast between the candles and the plot background. Again, I don't know exactly how you generated the image from mplfinance, or whether the bit depth is a significant fact in this apparent color shift. I do know that when calling savefig() you can specify things such as the dpi, and transparent, and pil_kwargs, and backend, all of which may affect the clarity and color contrast of various parts of the figure.

Another thing that I suspect is contributing to the "blurriness" of the mplfinance plot is your choice of edge="#2a2e39" for the candle edges. This color is dark, but not quite as dark as the figcolor (or background color) of the plot. This may contribute significantly to the the clarity of the candle edges. If you look very closely at the Tading View image you will see that the candle edges are actually **darker than the background. This very likely makes the candles appear sharper. (You may have noticed that in some places they paint a dark outline to white lines on the road to make them stand out more for drivers to see). I would definitely try setting the edge to completely black to see if that helps.

So those are some ideas as to what may be contributing to what you are seeing. With a little experimentation I am sure you can manage to create a more clear mplfinance plot.

All the best. --Daniel

Jonarod commented 2 years ago

@DanielGoldfarb The blurriness mentioned is due to the fact that mplfinance seems to force candles to have "roundness". When you zoom in any candle image to the maximum, you will see that edges are blurred by default to give the illusion that the corner of the candle is somewhat "round". To give this illusion (which is unnecessary and should be an option IMHO), mplfinance does indeed force edge and particularly corners of candlesticks to use transparency. This transparency leads to get the impression of being "blurry" when seen without zoom. This "round corner" is not visible on bar charts like volume for example. In fact, even zooming in to 300%, volume bars always seem crisp because it only uses 1 solid color to define its edges instead of some transparency.

Attached an illustration of the issue where we can clearly see candlestick edges using transparency that leads to blurriness. As you can see, the image of candlesticks presents edges using transparency, while volume bars don't.

The question is : how to prevent this transparency behaviour in candles' edges so that it only present solid colors without roundness ?

Here 2 candlesticks zoomed to 2000%:

Candlesticks

Here 2 volume bars using the same zoom of 2000%:

Volume Bars
DanielGoldfarb commented 1 year ago

This is an interesting issue, to say the least, which I want to investigate further at some point in time (or at least understand the reason for this), but sorry to say there are several other projects on my plate that I am currently involved with and that are presently taking priority over looking into this.

That said, I'll post a few ideas here, and perhaps others can also investigate and contribute what they find. This issue, imo, is matplotlib based and may be fixable (or improvable) by changing how mplfinance calls matplotlib for various features.

For example, considering the comparison above posted by @Jonarod comparing the sharp edges of volume bars and with the fuzzy edges of candlesticks, it may be worthwhile looking into whether these observations can be reproduced with very simple matplotlib plots. Volume in mplfinance is plotted using matplotlib's Axes.bar() whereas candlesticks are plotted using matplotlib's collections.PolyCollection(). In theory candles could be drawn with matplotlib's patches.Rectangle() and/or possible also with Axes.bar(); I have not tried this. The idea behind using PolyCollection is that supposedly the collections methods are more efficient. (Not sure though, in the whole scheme of things, whether in this context that efficiency would be noticable.) The point of all this is that it may be worth while to experiment with these lowere level matplotlib functions to see if the issue is reproducible that way (for example to see if a simple two-rectangle Axes.bar() plot is clearer than a simple two-rectangle collections.PolyCollection() plot, and/or a patches.Rectangle() plot.

It should also be noted that which matplotlib backend is used may also make a difference. Some people have observed that sometimes the clarity depends on whether the figure is displayed on the screen directly versus saved to a png file. These two cases are clearly two different backends. I myself have observed that, in some situations, saving a plot as an image file behaves differently than displaying the plot on the screen; for example the fonts may be different, and (if I recall correctly) sometimes even the tick locations may be different.

I hope that someone with an interest in this problem can read through all of the stuff that has been posted here, and elsewhere, and perhaps put some time into investigating this further.

Thanks. All the best. --Daniel

pkgzm commented 3 months ago

Hi all,

would it be possible to use 'dpi' option even without saving an image to disk, as proposed in pull request #678 ?

P.