CODEWITHSUNDEEP
angularhighcharts
Ross Halliday
Ross Halliday

Reputation: 895

Does HighCharts have a fundamental minimum height before it's rendering behaviour changes?

Is there a fundamental minimum height for a highcharts heatmap?

What we're trying to achieve is a very wide heatmap, that is 1 cell tall and 4,032 to 4,462 cells wide, with the chart pushed out the edge of the frame.

Charts options are currently:

// options set on start up
chartOptions: Highcharts.Options = {
chart: {
  type: 'heatmap',
  margin: [0, 0, 0, 0],
  spacingTop: 0,
  spacingBottom: 0,
  spacingLeft: 0,
  spacingRight: 0
},
plotOptions: {
  heatmap: { // heatmap specific series
    borderColor: "#C4C4C4",
    borderWidth: 1,
  }
},
title: {
  text: undefined
},
credits: { enabled: false },
xAxis: { visible: false },
yAxis: { visible: false },
legend: { enabled: false },
colors: ["#DCDCDC"],
colorAxis: {
  dataClassColor: "category",
  dataClasses: [
    {
      from: 0,
      to: 0.9,
      color: "#DCDCDC",
      name: "Ok",
    },
    // Snipped full color set
  ]
},
series: [
  {
    name: 'Downtime status',
    type: 'heatmap',
    data: [[0, 0, 0], [1, 0, 0], [2, 0, 0], [3, 0, 0]], // Force initial chart creation to be a single row of data
  }
],
tooltip: {
  enabled: true,
}

};

This is all within an the official angular wrapper. The chart sits within the normal tags:

<highcharts-chart *ngIf="isHighcharts"
                  [Highcharts]="Highcharts"
                  [constructorType]="chartConstructor"
                  [options]="chartOptions"
                  [callbackFunction]="chartCallback">
</highcharts-chart>

This is styled with the following css:

highcharts-chart {
  clear: both;
  width: 40000px;
  height: 75px;
  overflow-x: auto;
  display: inline-block;
}

The element is purposely overflowing, the users want to have a scrollbar rather than zooming the chart. Full data sets are loading after an httpClient call completes.

With a height value greater than 75px the single heatmap row is working well and filling the full chart, however if we drop this below 75px then the chart behaviour changes and rather than the row filling the chart it reverts to be a very small row, 5-10px tall with the remainder filled with whiteSpace.

Is this 75px a hard limit or are there more options in the chart that need to be turned off?

Upvotes: 0

Views: 367

Answers (1)

ppotaczek
ppotaczek

Reputation: 39099

Here: http://jsfiddle.net/BlackLabel/e9Lp3xvu/ I have reproduced the issue without Angular.

The problem is caused by the default value of tickPixelInterval for y-axis (72). As a solution you can reduce the value.

    yAxis: {
        visible: false,
        tickPixelInterval: 1
    },

Live demo: http://jsfiddle.net/BlackLabel/ozLbs8qy/

API Reference: https://api.highcharts.com/highcharts/yAxis.tickPixelInterval

Upvotes: 1

Related Questions