0

We are having problems with Highchart Column chart, the yaxis labels displayed are not consistent. The Column bars generated are between two yaxis labels. This gives the appearance of there is no yaxis scales and the bars are floating.

And also it is not generating the 0 yaxis scale from which the bar starts all the time. We have both negative and positive values, so the bar should be displayed above and below the 0 yaxis line.

We cannot post a sample because the behaviour is random, it works correctly most of the time only on some occasions it is not working (quiet regular to ignore though).

Please find below the column chart setting options:

{
        chart: {
            type: 'column',
            height: response.ChartHeight ? response.ChartHeight : ChartDefaults.Height          
        },            
        xAxis: {
            categories: response.TimePeriodTranslated,
            labels: {
                style: {
                    fontSize: (response.ChartFontSize ? response.ChartFontSize + 'pt' : ChartDefaults.FontSize)
                }
            }
        },
        yAxis: {
            startOnTick: true,
            title: {
                text: ''
            },
            labels: {
                style: {
                    fontSize: (response.ChartFontSize ? response.ChartFontSize + 'pt' : ChartDefaults.FontSize)
                }
            }
        },
        tooltip: {
            useHTML: true,
            formatter: function () {
                return this.series.name + "<br>" + this.x + " </b> : <b> " + this.y.toFixed(response.NumberOfDecimal ? 2 : response.NumberOfDecimal);
            }
        },
        title: {
            text: response.ShowAsAtDate == 1 ? modelContents.GetTranslation('AsAt') + ' ' + response.AsAtDate : '',
            align: 'left',
            //x: 70,
            style: {
                fontSize: (response.ChartFontSize ? response.ChartFontSize + 'pt' : ChartDefaults.FontSize)
            }
        },
        subtitle: {
            text: '',
            style: {
                fontSize: (response.ChartFontSize ? response.ChartFontSize + 'pt' : ChartDefaults.FontSize)
            }
        },
        legend: {
            enabled: true,
            itemStyle: {
                fontSize: (response.ChartFontSize ? response.ChartFontSize + 'pt' : ChartDefaults.FontSize)
            }
        },
        credits: {
          enabled: false
        },
        plotOptions: {
            series: {
                borderWidth: 0,
                dataLabels: {
                    enabled: response.ShowDataLabels == 1 ? true : false,
                     formatter: function () {
                        return this.y ? this.y.toFixed(response.NumberOfDecimal ? 2 : response.NumberOfDecimal) : this.y;
                     },
                    style: {
                        fontSize: (response.ChartFontSize ? response.ChartFontSize + 'pt' : ChartDefaults.FontSize)
                    }
                },
                //To set the bar width.
                //pointWidth: GetBarSettings(dataToPlot)
            },
            column: {
                cursor: 'pointer',
                point: {
                    events: {
                        click: function (e) {
                            // This can be handled in the drilldown event but our requirements with drilldown need this event implementation
                            SetChart(e, data, divId, dataId);
                        }
                    }
                }
            }
        },
        series: dataToPlot
    };

Thanks, Sarath

user3865301
  • 77
  • 2
  • 11
  • Maybe screenshot at least? It's hard to guess what is wrong, but since it happens occasionally that suggest the culprit: data. Maybe you can separate dataset which is responsible for that issue? – Paweł Fus Sep 17 '14 at 13:51
  • I do not have enough reputation points to post a screen shot. And data is not the issue, it works most of the time for the same data. Only on random occasions it is not working. We have around 5 - 10 charts per page. One of these creates a problem, and which one is random. We do not even have the option to debug as we are not sure whether it is going to happen and if it is which one is going to break. – user3865301 Sep 18 '14 at 08:33
  • I have hosted the image in google Cdn please use the link https://drive.google.com/file/d/0BwZhz5toAlY-N3U4RE1STTRaZzA/edit?usp=sharing – user3865301 Sep 18 '14 at 09:21
  • Have to re-upload the images it is not showing up properly https://drive.google.com/file/d/0BwZhz5toAlY-LTBmd25ieWJTWEU/ Expected: https://drive.google.com/file/d/0BwZhz5toAlY-SURYc0xYRWdEaGs/ – user3865301 Sep 18 '14 at 09:27
  • Thanks for screenshots! Do you have any errors in console? As workaround try to set `yAxis: { tickInterval: 25 }`. – Paweł Fus Sep 18 '14 at 12:42

0 Answers0