html only vertically stacked bar chart

The Outlooks on Windows from 2007 to 2019 use Word’s rendering engine, and they do add a lot of <p> and other stuff. There’s no way to prevent this as far as I know. However, if you add them yourselves in the first place with the appropriate styles (margin:0 to reset default paragraphs styles), you should be ok. But in your example, you shouldn’t even need to add paragraphs in the first place. Here’s a full working example simplified from your code (I tested this on a real Outlook 2019 and the code stays stable when replying or forwarding):

<!DOCTYPE html>
<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Stacked bar chart</title>
    <!--[if mso]>
    <xml>
        <o:OfficeDocumentSettings>
            <o:PixelsPerInch>96</o:PixelsPerInch>
        </o:OfficeDocumentSettings>
    </xml>
    <![endif]-->
</head>
<body>
    <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="border: none; border-collapse: collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;">
        <tr>
            <td style="padding:2px; vertical-align:bottom;">
                <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="border: none; border-collapse: collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; width:40px;">
                    <tr>
                        <td style="height:50px; background-color:red;">1</td>
                    </tr>
                    <tr>
                        <td style="height:10px; background-color:green;">1</td>
                    </tr>
                </table>
            </td>
            <td style="padding:2px; vertical-align:bottom;">
                <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="border: none; border-collapse: collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; width:40px;">
                    <tr>
                        <td style="height:10px; background-color:red;">1</td>
                    </tr>
                    <tr>
                        <td style="height:50px; background-color:green;">1</td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
</body>
</html>

If this doesn’t work for you, another approach could be to use VML to render the entire graph. But this will only work on Outlook-ish clients using Word’s rendering engine or compatible with VML.

CLICK HERE to find out more related problems solutions.

Leave a Comment

Your email address will not be published.

Scroll to Top