1

I have set min:0, in y-axis. But in tooltip i want to show negative values also and also it should start with value y=0 only.

if i will remove min:0 in y axis it will show negative values with tooltip in chart. But i only want to see negative values on tooltip not on chart.

but it is not allowing me to show negative values.

below is sample code.

$(id).highcharts({
    chart: {
        zoomType: 'xy',
        marginLeft: 45,
        marginRight: rightval - 10


    },
    title: { text: title },
    exporting: { enabled: false },
    credits: { enabled: false },
    legend: { enabled: false, align: 'left', x: 10, verticalAlign: 'bottom', y: 3, shadow: false },
    xAxis: {
        min: minimum,
        max: maximum,
        scrollbar: {
            enabled: scroobarVal
        },
        fontWeight: 'bold',
        categories: Data['categories'],

        labels: {
            y: 20,
            rotation: 0,

            style: {
                color: 'gray',
                //fontSize:'1px !important;'
            }

        }

    },

    yAxis: [{
        min: 0,
        allowDecimals: false,
        endOnTick: false,
        gridLineWidth: 0,
        labels: {
            formatter: function () {

                if (optionSelected == 'Day') {
                    return this.value;

                } else {

                    return this.value / 1000000 + 'M';
                }
            },
            style: {
                color: '#767676'
            }
        },
        offset: -10,
        title: {
            text: 'Inv ' + val_qty,
            "textAlign": 'top',
            "rotation": 0,
            x: 60,
            y: yaxisVal,
            style: {
                color: '#767676',
                fontWeight: 'bold'
            }
        }
    }, {
        allowDecimals: false,
        min: 0,
        endOnTick: false,
        gridLineWidth: 0,
        title: {
            text: y2axisname,
            "textAlign": 'top',
            "rotation": 0,
            x: -75,
            y: yaxisVal,
            style: {
                color: '#767676',
                fontWeight: 'bold'
            }
        },
        offset: -10,
        labels: {
            format: '{value}',
            style: {
                color: '#767676'
            }
        },
        opposite: true
    }],
    labels: {
        items: [{
            html: ' ',
            style: {
                color: (Highcharts.theme && Highcharts.theme.textColor) || 'black'
            }
        }]
    },
    tooltip: {

        style: { fontSize: '7pt' },
        formatter: function () {
            var s = '<b>' + this.x + '</b>';

            $.each(this.points, function (i, point) {


                    s += '<br/><span style="color:' + point.series.color + '">\u25CF</span> ' + point.series.name + ': <b>' + CurrencySymbol + '</b>' + point.y.toString().replace(/,/g, "").replace(/\B(?=(\d{3})+(?!\d))/g, ", ");


            });

            return s;
        },
        shared: true
    },
    series: Data['series'],
});
mao
  • 39
  • 2
  • 8
  • I think you need to remove that min : 0 on y-axis. Please refer this... https://stackoverflow.com/questions/16417124/set-highcharts-y-axis-min-value-to-0-unless-there-is-negative-data – Sarvan Kumar Apr 06 '18 at 08:39
  • yeah that will work but i want it to start with y=0 – mao Apr 06 '18 at 08:41
  • 1
    Could you update your post with the whole highcharts code? –  Apr 06 '18 at 08:44
  • i have updated whole highchart functon. – mao Apr 06 '18 at 08:52
  • Are you talking about wanting to see a tooltip for the negative points falling outside the plot? Because I'm not sure if that is possible with highcharts –  Apr 06 '18 at 10:02
  • yeah, i want to see those points on tooltip which are falling outside plot. – mao Apr 06 '18 at 11:17
  • 1
    Use [tooltip.formatter](https://api.highcharts.com/highcharts/tooltip.formatter) - you can check for any condition inside the callback and you have access to all chart's data. – morganfree Apr 06 '18 at 20:49

1 Answers1

0

I don't think there is a simple way to do this on Highchart. One hacky way I found (don't judge me!) is to have a "ghost" series and set the tooltip.shared option to true.

Check it here: http://jsfiddle.net/arryx9rf/

João Menighin
  • 3,083
  • 6
  • 38
  • 80