iOS Chart Troubleshooting and/or help

[Perlguy]

I'm trying to get a custom tooltip to work properly for me and have been having an issue that I haven't been able to solve yet. In the tooltip, there should be a colored square next to each item to show what color it is in the graph. The tooltip works on a different chart that we created, but for this one, it isn't working.

Is there any way to troubleshoot a chart when developing in iOS?

I've included the tooltip code below.

Any help would be very much appreciated

Code: Select all

function() {
    const colorClassObject = {};
    colorClassObject['Shortfall'] = 'shortfall-square';
    colorClassObject['Savings']   = 'savings-square';
    colorClassObject['University of Mississippi'] = 'school1-square';
    colorClassObject['Mississippi State University'] = 'school2-square';
    colorClassObject['Heald College-Honolulu'] = 'school3-square';
    colorClassObject['Public In-state University'] = 'school4-square';
    
    var seriesHtml = [];
    var schoolColorIndex = 0;
    var totalSpending = 0;
    
    this.points.forEach(
        (point) => {
        if (point && point.point && point.series && point.y) {
            const seriesName = point.series.name;
            const seriesValueRaw = Math.floor(point.y);
            const seriesValue = '$' + seriesValueRaw.toLocaleString();
            
            totalSpending = point.point.totalSpending;
            
            if (seriesValueRaw > 0)
                seriesHtml.push(`
                    <li>
                        <span class="color-square ${colorClassObject[seriesName]}">&nbsp;</span>
                        ${seriesName}
                        <span class="series-value">${seriesValue}</span>
                    </li>`
                );
            }
        }
    );
    
    totalSpending = '$' + Math.floor(totalSpending).toLocaleString();
    
    return `<style>
        ul {
            padding: 0;
            margin: 0;
            list-style-type: none;
        }
        
        ul li {
            margin-top: 16px;
        }
        
        ul li:first-child {
            margin-top: 0;
        }
        
        .separator {
            margin: 12px -5px 0 -5px;
            border-top: 1px solid #c6c7ca
        }
        
        .series-value {
            float: right;
            display: inline-block;
        }
        
        .color-square {
            width: 12px;
            height: 12px;
            display: inline-block;
            margin-right: 9px;
        }
        
        .savings-square { background: "#3686a4"; }
        .shortfall-square { background: "#eb838c"; }
        .school1-square { background: "#353843"; }
        .school2-square { background: "#fbc81a"; }
        .school3-square { background: "#5bcd93"; }
        .school4-square { background: "#4f3576"; }
    </style>
    
    <div style="z-index: 1; background: #fff; padding: 16px; width: 280px; border-radius: 3px; box-shadow: 0 0 6px rgba(0, 0, 0, 0.2);">                        <ul>
            ${seriesHtml.join('')}
        </ul>
    </div>
    `;
}

[sebastian.h]

Hi,
Welcome to our forum and thanks for contacting us with your question.

I need to ask our iOS developer specialist.

Keep in touch.

[sebastian.h]

Hi, I have a few more questions.

Please explain what's going on, the code you put in JS, you're trying to translate and run in iOS, right?
If so, please send the code you implement in iOS, I will send it to our iOS developer.

I don't really understand and can't reproduce your example in JS, can you simplify it and put it in the online code editor?

I'm waiting for news from you.
Best regards.