Changing jqchart tooltip color

Question

I'm trying to change the color of my jqchart tooltip , but without any success .

I'm only changing the color of the line with success .

Below my code to build the jqchart :

$('#jqChartMes').jqChart({
    title: { text: 'Mensal' },
    border: { lineWidth: 0 },
    legend: { location: 'bottom' },
    animation: { duration: 1 },
    dataSource: porMes,
    axes: [
        {
            type: 'line',
            location: 'left',
            minimum: -5,
            maximum: 110,
            interval: 50
        }
    ],
    series: [
        {
            type: 'line',
            title: 'Disponibilidade na Falha',
            strokeStyle: '#00F',
            lineWidth: 1,
            xValuesField: {
                name: 'MES',
                type: 'string' // string, numeric, dateTime
            },
            yValuesField: 'DISP_FALHA'
        },
        {
            type: 'line',
            title: 'Disponibilidade Geral',
            strokeStyle: '#FCB441',
            lineWidth: 1,
            xValuesField: {
                name: 'MES',
                type: 'string' // string, numeric, dateTime
            },
            yValuesField: 'DISP_GERAL'
        },
        {
            type: 'line',
            title: 'Efetividade',
            strokeStyle: '#00A65A',
            lineWidth: 1,
            xValuesField: {
                name: 'MES',
                type: 'string' // string, numeric, dateTime
            },
            yValuesField: 'EFETIV',
        }
    ]
});

I searched a lot at the jqchart site to try to solve my issue , but without success . Pls guys help me .

score 0 · Answer 1 · answered Mar 12 '16 at 19:05

If you want to change the color of the tooltip you'll have to go to the jquery.jqChart.css file which is provided when you'll download

There you'll find this code segment:

.ui-jqchart .ui-jqchart-tooltip { position: absolute; white-space: nowrap; padding: .2em .4em; z-index: 9999; border: 1px solid #dddddd; color: #333333; background: white; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; -o-box-shadow: 0 0 5px #aaa; -moz-box-shadow: 0 0 5px #aaa; -webkit-box-shadow: 0 0 5px #aaa; box-shadow: 0 0 5px #aaa; }

Here the color: #333333 is the colour you can change to whatever you want.

I hope this helps :)

Changing jqchart tooltip color

1 Answers1