Large-chart with MarketWatch and WideScreen Support for Kite

Zerodha
1

When running Kite in your browser,
do you ever look at the sides of your screen and wonder
Why is there so much empty space??… :thinking:

default-screen-kite-zerodha
default-screen-kite-zerodha1900×960 275 KB

I noticed that there have been previous attempts at supporting widescreen Kite using browser extensions.
But, it turns out that supporting widescreen in Kite is just a matter of 5-10 lines of CSS! :grinning:

.app .wrapper .app .container .container-right {
    max-width: 100% !important;
}

.app .container .container-left .marketwatch-wrap {
    min-width: 300px !important;
    max-width: 20% !important;
}

The above CSS allows the MarketWatch and Chart widgets to occupy the entire width of the window/screen.
Thus avoiding the waste of space on the sides of the screen in Zerodha’s Kite.
This is extremely handy to…

  • have a large chart with more details / longer timeline visible on-screen.
  • along with the Market-watch and Market-depth widgets on the left simultaneously.

Here’s a screenshot of Zerodha’s Kite running with the above CSS applied locally within the browser…

wide-screen-kite-zerodha
wide-screen-kite-zerodha1904×1087 403 KB

If you use any custom styling extension in your browser (eg. Stylus),
then you can simply import and use the Widescreen Kite style
to enable the above widescreen view when using Kite in your browser.

Hi Zerodha / Kite-devs,
assuming there are some reasons to continue supporting the existing layout in Kite with padding/empty-space on the sides, would it be possible to add such a 10-line CSS customization using a toggle-button in the corner of the Kite web-page/screen to switch between the default and widescreen/full-width layouts?

1 Like
2

Hey @cvs, thanks for the feedback. We’ll explore the possibilities :slightly_smiling_face:

3

Hey CVS,

Wikipedia’s desktop interface is getting revamped after a period of 10 years. One of the points that stand out for us is that the articles will now have a line width since research shows that leads to a more comfortable reading experience.

Screenshot from 2023-01-20 14-34-04
Screenshot from 2023-01-20 14-34-041051×393 174 KB

This research paper highlights why line width is important to keep the user engaged.

We think full-width screens work for graphics and disjoint blocks, but not for lines and rows that have to be read from left to right. Reading a table from left to right stretched to 2k-4k pixels will be impossible and hence the blank spaces in between on Kite. :slight_smile:

2 Likes
4

Agreed.
However, am not sure why this bit is relevant to what i requested above -
widening the graph/chart area to use the otherwise wasted whitespace.

Agreed, that would be a pain to use.
(also, i was not requesting this though!)

Please checkout the 2nd screenshot in my above post (desired layout)
and compare it to the 1st screenshot (default layout)
to better understand what i was requesting -
"The ability to view a wider graph without losing out on the details.
instead of the wasted whitespace on either side."

As you rightly pointed out,
one must NOT unnecessarily widen the tabular market watch area on the left,
just the graph/chart area can be allowed to expand to fill the remaining screen-width.