How to use HAProxy in load balancing and as a reverse proxy with docker?

I am using HAProxy docker image to load share between multiple similar containers. It's working fine if I am using a single address like web.abc.com to query only the API containers, which is mapped to my localhost . But now I want to use api.abc.com too with this HAProxy config file .

So the scenario is going to be if I hit web.abc.com it will share the load of web application container using round robin and show me the contents of these containers and if I hit api.abc.com it gives me access of those containers which have the API .

I have tried multiple config changes with my haproxy.cfg , but it's not working .

This is my docker-compose file, and this is the haproxy.cfg I am using , which is obviously not working

Is this scenario even possible with HAProxy ? Help me.