Develop Reference

Highcharts stacked column charts ( Parse json string for series)

I am getting following json string on Ajax call from javascript:-
var json = [{"date":"2018-05-16","MsgType":"xyz","count":4},
{"date":"2018-05-16","MsgType":"tyu","count":15},
{"date":"2018-05-15","MsgType":"sdf","count":5},
{"date":"2018-05-14","MsgType":"mnb","count":9},
{"date":"2018-05-14","MsgType":"xyz","count":8},
{"date":"2018-05-14","MsgType":"tyu","count":14}];
I want to fill series of my highchart with the above given data. My requirement is to make "date" as X-Axis, "MsgType" as name and "Count" as data. I have for two objects when i needed to put count for MsgTypes. But here first i need to group data based on date and then need to place each MsgType with count in stack. Please help me with this as i am not able to figure out anything. Any help will be appreciated. I have implemented following for other scenario : -
Highcharts.chart('MP_Chart', {
chart: {
type: 'column'
},
title: {
text: 'Market Processes',
style: { "fontSize": "16px", "font-weight": "bold" }
},
credits: {
enabled: false
},
xAxis: {
categories: Date,
labels: {
style: {
fontWeight: 'bold'
}
}
},
yAxis: {
min: 0,
title: {
text: 'Total Queued messages',
style: {
fontWeight: 'bold'
}
},
stackLabels: {
enabled: false,
style: {
fontWeight: 'bold',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
}
}
},
legend: {
align: 'right',
x: -30,
verticalAlign: 'top',
y: 25,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white',
borderColor: '#CCC',
borderWidth: 1,
shadow: false,
itemStyle: {
fontSize: '12px',
font: '12pt',
}
},
tooltip: {
headerFormat: '<b>{point.x}</b><br/>',
pointFormat: '{series.name}: {point.y}<br/>Total: {point.stackTotal}'
},
plotOptions: {
column: {
stacking: 'normal',
dataLabels: {
enabled: false,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
}
}
},
series: [{
name: 'Queued',
data: JSON.parse("[" + QueuedMPCount + "]")
}, {
name: 'Polled',
data: JSON.parse("[" + PolledMPCount + "]")
}]
});

Assuming I understood your question correctly, you need to pre-process the data a bit before passing it to Highcharts, for example, like this:
var json = [{"date":"2018-05-16","MsgType":"xyz","count":4},
{"date":"2018-05-16","MsgType":"tyu","count":15},
{"date":"2018-05-15","MsgType":"sdf","count":5},
{"date":"2018-05-14","MsgType":"mnb","count":9},
{"date":"2018-05-14","MsgType":"xyz","count":8},
{"date":"2018-05-14","MsgType":"tyu","count":14}];
json = json.reverse() //reverse incomming json because highcharts expectes sorted dates
var series = [];
var names = [];
for (let i = 0; i < json.length; i++) { //loop through all incoming records
if (names.indexOf(json[i].MsgType) !== -1) { //check if we have a record with this messageType yet, if yes, add to that messagetypes array
series[names.indexOf(json[i].MsgType)].data.push({
x: new Date(json[i].date),
y: json[i].count
})
} else { //add new messageTypes
names.push(json[i].MsgType)
series.push({
name: json[i].MsgType,
data: [{
x: new Date(json[i].date),
y: json[i].count
}]
})
}
}
Coupled with this, I changed the xAxis type to datetime and series definition to take the variable we created earlier:
xAxis: {
type: 'datetime',
...
},
series: series
We then get this:
var json = [{"date":"2018-05-16","MsgType":"xyz","count":4},
{"date":"2018-05-16","MsgType":"tyu","count":15},
{"date":"2018-05-15","MsgType":"sdf","count":5},
{"date":"2018-05-14","MsgType":"mnb","count":9},
{"date":"2018-05-14","MsgType":"xyz","count":8},
{"date":"2018-05-14","MsgType":"tyu","count":14}];
json = json.reverse()
var series = [];
var names = [];
for (let i = 0; i < json.length; i++) {
if (names.indexOf(json[i].MsgType) !== -1) {
series[names.indexOf(json[i].MsgType)].data.push({
x: new Date(json[i].date),
y: json[i].count
})
} else {
names.push(json[i].MsgType)
series.push({
name: json[i].MsgType,
data: [{
x: new Date(json[i].date),
y: json[i].count
}]
})
}
}
Highcharts.chart('MP_Chart', {
chart: {
type: 'column'
},
title: {
text: 'Market Processes',
style: {
"fontSize": "16px",
"font-weight": "bold"
}
},
credits: {
enabled: false
},
xAxis: {
type: 'datetime',
labels: {
style: {
fontWeight: 'bold'
}
}
},
yAxis: {
min: 0,
title: {
text: 'Total Queued messages',
style: {
fontWeight: 'bold'
}
},
stackLabels: {
enabled: false,
style: {
fontWeight: 'bold',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
}
}
},
legend: {
align: 'right',
x: -30,
verticalAlign: 'top',
y: 25,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white',
borderColor: '#CCC',
borderWidth: 1,
shadow: false,
itemStyle: {
fontSize: '12px',
font: '12pt',
}
},
tooltip: {
headerFormat: '<b>{point.x}</b><br/>',
pointFormat: '{series.name}: {point.y}<br/>Total: {point.stackTotal}'
},
plotOptions: {
column: {
stacking: 'normal',
dataLabels: {
enabled: false,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
}
}
},
series: series
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="MP_Chart"></div>
JSfiddle working example: https://jsfiddle.net/ewolden/Lbyq4k0n/19/

Highcharts - center placement of columns

I have a Highcharts column chart and I am trying to reduce the distance between each column on the X axis whilst pulling them towards the center so that the columns appear more grouped.
So for example in my example above, the red and the blue column would be much closer together and positioned towards the center.
Below is my chart configuration. The seriesData parameter is just a custom object I pass in at render.
chartConfig.js
function chartConfig(seriesData) {
return {
barColor: seriesData.color,
data: seriesData,
credits: { enabled: false },
chart: {
width: seriesData.width,
defaultSeriesType: 'column',
backgroundColor: '#EAEFF6'
},
tooltip: { enabled: false },
colorAxis: {
dataClassColor: 'category'
},
colors: [],
legend: {},
title: {
useHTML: true,
text: (seriesData.name === 'n/a' || seriesData.name === 'N/A') ? '_' : seriesData.name,
style: {
color: (seriesData.name === 'n/a' || seriesData.name === 'N/A') ? '#E9EFF4' : '#666666',
fontSize: '14px',
fontFamily: 'Roboto',
fontWeight: 'bold',
paddingTop: '10px',
lineHeight: '1em'
},
align: 'center',
x: 0,
y: 2
},
plotOptions: {
column: {
stacking: 'normal',
animation: true,
borderColor: 'grey',
borderWidth: 0
},
series: {
borderRadius: 15,
dataLabels: {
enabled: false
},
states: {
hover: {
enabled: false
}
}
}
},
yAxis: [{
max: Math.max.apply(null, seriesData.scaleValues),
min: Math.min.apply(null, seriesData.scaleValues),
title: false,
minorGridLineColor: '#FFF',
gridLineColor: '#8E8E8E',
minPadding: 0,
tickPositions: (seriesData.scalePercentageValues || null),
labels: {
formatter: function () {
if (seriesData.usePercentage) {
return `${this.value} %`;
}
return this.value;
}
}
}],
xAxis: {
lineWidth: 0,
minorGridLineWidth: 0,
lineColor: 'transparent',
minorTickLength: 0,
tickLength: 0,
categories: seriesData.elements.map((x) => { return x.name; }),
labels: {
style: {
color: '#666666',
fontSize: '12px',
fontFamily: 'Roboto'
}
}
},
series: [{
dataLabels: {
style: {
fontSize: '12px',
fontWeight: 'normal',
textShadow: 'none',
color: 'black',
fontFamily: 'Roboto',
backgroundColor: 'blue'
},
enabled: true,
formatter: function () {
if (seriesData.usePercentage) {
return `${this.y}%`;
}
return this.y;
}
},
showInLegend: false,
name: 'Fill Series',
color: '#F2F6F9',
pointWidth: 28,
animation: true,
data: seriesData.elements.map((x) => {
return { name: x.name, y: x.value, color: x.color };
}),
borderRadiusTopLeft: 10,
borderRadiusTopRight: 10,
borderColor: '#C0C0C0',
borderWidth: '1'
}]
};
}
module.exports = chartConfig;
The only solution I have tried so far is to use pointPadding and groupPadding. However this does not seem to have the desired effect.

Nodata message with React 0.13.3 and react-highcharts 3.0.0

I'm working with react-highcharts. It works perfectly except nodata state.
I need to display 'No data available' message when chart has empty data.
I have check no-data-to-display.js of official highcharts but it doesn't work with React.
I would like to make a result like this: http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/no-data-to-display/no-data-pie/
import React from 'react';
import Highcharts from 'react-highcharts/dist/bundle/highcharts';
require('highcharts-no-data-to-display');
class MyChart extends React.Component {
constructor(props) {
super();
this.state = this._getInitialState(props);
}
static chartColors() {
return [
'#04a5af', '#4a6cb4', '#2d4665', '#76b5db', '#b4dcee','#cae9de','#24a9b2','#48d0ae','#2a2b32', '#5065ae'
]
}
componentWillReceiveProps(newProps) {
this.setState(this._getInitialState(newProps));
}
_getInitialState(props) {
return {
chartConfig:
{
colors: MyChart.chartColors(),
chart: {
type: 'column',
events: {
load: function(event) {
event.target.reflow();
}
}
},
credits: {
enabled: false
},
title: {
text: props.title
},
xAxis: {
type: 'datetime',
title: {
text: '',
style: {
fontSize: '12px'
}
},
labels:{
style:{
fontSize: '12px'
}
},
dateTimeLabelFormats : {
second : '%H:%M',
minute : '%H:%M',
hour : '%H:%M',
day : '%e-$b-%y',
week : '%e',
month : '%e',
year : '%e'
},
alternateGridColor: '#FAFAFA',
startOnTick: true,
endOnTick: true,
categories: [],
},
yAxis: {
min: 0,
title: {
text: props.yTitle?props.yTitle: ""
},
stackLabels: {
enabled: false,
style: {
fontWeight: 'bold',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
}
}
},
legend: {
align: 'center',
y: 15,
floating: false,
backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white',
shadow: false
},
tooltip: {
pointFormat: '{series.name}: {point.y}<br/>Total: {point.stackTotal}'
},
plotOptions: {
column: {
stacking: 'normal',
dataLabels: {
enabled: false,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
style: {
textShadow: '0 0 3px black'
}
}
}
},
noData: {
position: {
"x": 0,
"y": 0,
"align": "center",
"verticalAlign": "middle"
}
},
series: props.series
}
};
}
render() {
return (
<div refs="wa-chart">
<Highcharts config={this.state.chartConfig} ref="chart" isPureConfig={true} />
</div>);
}
}
export default MyChart;
I am using react 0.13.3, react-highcharts version 3.0.0 and highcharts-no-data-to-display version 0.1.2

Your imports should look like this.
import Highcharts from 'highcharts';
import NoDataToDisplay from 'highcharts/modules/no-data-to-display';
import HighchartsReact from 'highcharts-react-official';
NoDataToDisplay(Highcharts);
Define your options to have a noData message.
const options = {
lang: {
noData: props.noDataMessage,
},
noData: {
style: {
fontWeight: 'bold',
fontSize: '15px',
color: '#303030',
},
},
};
Use this options in your highcharts.
<HighchartsReact
highcharts={Highcharts}
options={options}
/>

https://github.com/kirjs/react-highcharts
tips: Using highcharts modules/add-ons like exporting, data, etc. (demo)
eg:
import React from 'react';
import Highcharts from 'react-highcharts/dist/bundle/highcharts';
require('highcharts-no-data-to-display')(ReactHighcharts.Highcharts)
class MyChart extends React.Component {
constructor(props) {
super();
this.state = this._getInitialState(props);
}
static chartColors() {
return [
'#04a5af', '#4a6cb4', '#2d4665', '#76b5db', '#b4dcee','#cae9de','#24a9b2','#48d0ae','#2a2b32', '#5065ae'
]
}
componentWillReceiveProps(newProps) {
this.setState(this._getInitialState(newProps));
}
_getInitialState(props) {
return {
chartConfig:
{
colors: MyChart.chartColors(),
chart: {
type: 'column',
events: {
load: function(event) {
event.target.reflow();
}
}
},
credits: {
enabled: false
},
title: {
text: props.title
},
xAxis: {
type: 'datetime',
title: {
text: '',
style: {
fontSize: '12px'
}
},
labels:{
style:{
fontSize: '12px'
}
},
dateTimeLabelFormats : {
second : '%H:%M',
minute : '%H:%M',
hour : '%H:%M',
day : '%e-$b-%y',
week : '%e',
month : '%e',
year : '%e'
},
alternateGridColor: '#FAFAFA',
startOnTick: true,
endOnTick: true,
categories: [],
},
yAxis: {
min: 0,
title: {
text: props.yTitle?props.yTitle: ""
},
stackLabels: {
enabled: false,
style: {
fontWeight: 'bold',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
}
}
},
legend: {
align: 'center',
y: 15,
floating: false,
backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white',
shadow: false
},
tooltip: {
pointFormat: '{series.name}: {point.y}<br/>Total: {point.stackTotal}'
},
plotOptions: {
column: {
stacking: 'normal',
dataLabels: {
enabled: false,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
style: {
textShadow: '0 0 3px black'
}
}
}
},
lang:{
noData: 'no data!'
},
noData: {
position: {
"x": 0,
"y": 0,
"align": "center",
"verticalAlign": "middle"
}
},
series: props.series
}
};
}
render() {
return (
<div refs="wa-chart">
<Highcharts config={this.state.chartConfig} ref="chart" isPureConfig={true} />
</div>);
}
}
export default MyChart;

import React from 'react';
import Highcharts from 'react-highcharts/dist/bundle/highcharts';
require('highcharts-no-data-to-display')(Highcharts.Highcharts)
class MyChart extends React.Component {
constructor(props) {
super();
this.state = this._getInitialState(props);
}
static chartColors() {
return [
'#04a5af', '#4a6cb4', '#2d4665', '#76b5db', '#b4dcee','#cae9de','#24a9b2','#48d0ae','#2a2b32', '#5065ae'
]
}
componentWillReceiveProps(newProps) {
this.setState(this._getInitialState(newProps));
}
_getInitialState(props) {
return {
chartConfig:
{
colors: MyChart.chartColors(),
chart: {
type: 'column',
events: {
load: function(event) {
event.target.reflow();
}
}
},
credits: {
enabled: false
},
title: {
text: props.title
},
xAxis: {
type: 'datetime',
title: {
text: '',
style: {
fontSize: '12px'
}
},
labels:{
style:{
fontSize: '12px'
}
},
dateTimeLabelFormats : {
second : '%H:%M',
minute : '%H:%M',
hour : '%H:%M',
day : '%e-$b-%y',
week : '%e',
month : '%e',
year : '%e'
},
alternateGridColor: '#FAFAFA',
startOnTick: true,
endOnTick: true,
categories: [],
},
yAxis: {
min: 0,
title: {
text: props.yTitle?props.yTitle: ""
},
stackLabels: {
enabled: false,
style: {
fontWeight: 'bold',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
}
}
},
legend: {
align: 'center',
y: 15,
floating: false,
backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white',
shadow: false
},
tooltip: {
pointFormat: '{series.name}: {point.y}<br/>Total: {point.stackTotal}'
},
plotOptions: {
column: {
stacking: 'normal',
dataLabels: {
enabled: false,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
style: {
textShadow: '0 0 3px black'
}
}
}
},
lang:{
noData: 'no data!'
},
noData: {
position: {
"x": 0,
"y": 0,
"align": "center",
"verticalAlign": "middle"
}
},
series: props.series
}
};
}
render() {
return (
<div refs="wa-chart">
<Highcharts config={this.state.chartConfig} ref="chart" isPureConfig={true} />
</div>);
}
}
export default MyChart;

UPDATE: I've created a npm package for this, just install it, and use it! this one ->
react-highcharts-no-data-to-display
ANSWER: What you have to do is to add (ReactHighcharts.Highcharts) next to require('highcharts-no-data-to-display') quite easy right?
Just in case, if anyone is facing the same issue (trying to add the "no data" message in React-HighCharts). The steps are:
Install it! in a terminal run: npm install highcharts-no-data-to-display --save
In the react file that has the chart that you want to add the no-data message, you have to add require('highcharts-no-data-to-display')(ReactHighcharts.Highcharts) on the first lines
Furthermore, if you want to customize the text and position of the message. Add this:
>
lang:{
noData: 'no data!' //the text to be displayed
},
noData: {
position: {
"x": 0,
"y": 0,
"align": "center",
"verticalAlign": "middle"
}
}
the full code of what #ittus is asking should be
import React from 'react';
import Highcharts from 'react-highcharts/dist/bundle/highcharts';
require('highcharts-no-data-to-display')(Highcharts.Highcharts)
class MyChart extends React.Component {
constructor(props) {
super();
this.state = this._getInitialState(props);
}
static chartColors() {
return [
'#04a5af', '#4a6cb4', '#2d4665', '#76b5db', '#b4dcee','#cae9de','#24a9b2','#48d0ae','#2a2b32', '#5065ae'
]
}
componentWillReceiveProps(newProps) {
this.setState(this._getInitialState(newProps));
}
_getInitialState(props) {
return {
chartConfig:
{
colors: MyChart.chartColors(),
chart: {
type: 'column',
events: {
load: function(event) {
event.target.reflow();
}
}
},
credits: {
enabled: false
},
title: {
text: props.title
},
xAxis: {
type: 'datetime',
title: {
text: '',
style: {
fontSize: '12px'
}
},
labels:{
style:{
fontSize: '12px'
}
},
dateTimeLabelFormats : {
second : '%H:%M',
minute : '%H:%M',
hour : '%H:%M',
day : '%e-$b-%y',
week : '%e',
month : '%e',
year : '%e'
},
alternateGridColor: '#FAFAFA',
startOnTick: true,
endOnTick: true,
categories: [],
},
yAxis: {
min: 0,
title: {
text: props.yTitle?props.yTitle: ""
},
stackLabels: {
enabled: false,
style: {
fontWeight: 'bold',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
}
}
},
legend: {
align: 'center',
y: 15,
floating: false,
backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white',
shadow: false
},
tooltip: {
pointFormat: '{series.name}: {point.y}<br/>Total: {point.stackTotal}'
},
plotOptions: {
column: {
stacking: 'normal',
dataLabels: {
enabled: false,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
style: {
textShadow: '0 0 3px black'
}
}
}
},
lang:{
noData: 'no data!'
},
noData: {
position: {
"x": 0,
"y": 0,
"align": "center",
"verticalAlign": "middle"
}
},
series: props.series
}
};
}
render() {
return (
<div refs="wa-chart">
<Highcharts config={this.state.chartConfig} ref="chart" isPureConfig={true} />
</div>);
}
}
export default MyChart;

HighChart Stacked Column label issue

I have a chart with values that are uneven, ie: First value is 1315 and second value is 1, and so on, and when displaying the chart the labels are being overlapped. I have already searched in multiple forums but no one had the exact same problem. Here's a fiddle to see the problem: http://jsfiddle.net/6LutjLc3/
$(function () {
$('#container').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Stacked column chart'
},
xAxis: {
categories: ['Issue']
},
yAxis: {
min: 0,
title: {
text: 'Total fruit consumption'
},
stackLabels: {
enabled: true,
style: {
fontWeight: 'bold',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
}
}
},
legend: {
align: 'right',
x: -30,
verticalAlign: 'top',
y: 25,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white',
borderColor: '#CCC',
borderWidth: 1,
shadow: false
},
tooltip: {
formatter: function () {
return '<b>' + this.x + '</b><br/>' +
this.series.name + ': ' + this.y + '<br/>' +
'Total: ' + this.point.stackTotal;
}
},
plotOptions: {
column: {
stacking: 'normal',
dataLabels: {
enabled: true,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
style: {
textShadow: '0 0 3px black'
}
}
}
},
series: [{
name: 'John',
data: [1235]
}, {
name: 'Toto',
data: [2]
}, {
name: 'Matt',
data: [1]
}, {
name: 'Jane',
data: [72]
}, {
name: 'Joe',
data: [3]
}]
});
});
What I need to code is to give the value 1 one box where the label fits in as like any other example in highchart.
Thanks in advance for your help!

If your client demands use of this style of graph you can get better looking results by modifying your dataLabel settings. Setting overflow to false and adding a formatter function that only returns a value if it's let's say at least 7% (or whatever percentage works best for you) of the current total will help. See the following:
dataLabels: {
enabled: true,
overflow: false,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
style: {
textShadow: '0 0 3px black'
},
formatter: function () {
if (this.percentage >= 7) return this.y;
}
}
Fiddle here: http://jsfiddle.net/6LutjLc3/4/

High Charts Rendering on Internet Explorer 10

Highcharts Bar chart doesn't render well when they are put inside HTML Table. Issue is reproduced in this Fiddle. Rendering problem can be seen when opened in IE 10(works well in chrome).
var options = {
colors: ["#3ACB35", "#DE3A15", "#FF9A00", "#00B8F1"],
chart: {
renderTo: 'Chart3container',
type: 'bar',
backgroundColor: 'black',
borderColor: 'black',
borderWidth: 0,
className: 'dark-container',
plotBackgroundColor: 'black',
plotBorderColor: '#000000',
plotBorderWidth: 0
},
credits: {
enabled: false
},
title: {
text: 'Count Per Category',
style: {
color: 'white',
font: 'normal 22px "Segoe UI"'
},
align: 'left'
},
tooltip: {
backgroundColor: 'rgba(0, 0, 0, 0.75)',
style: {
color: '#F0F0F0'
}
},
categories: {
enabled: 'true'
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0,
itemStyle: {
font: '9pt Segoe UI',
color: 'white'
},
itemHoverStyle: {
color: 'grey'
}
},
xAxis: {
categories: BarData.categories,
tickInterval: 1,
labels: {
enabled: true,
style: {
color: 'white'
}
},
title: {
enabled: false
},
gridLineColor: '#222222'
},
yAxis: {
title:
{
enabled: true,
text: "Document Count",
style: {
fontWeight: 'normal',
color: 'white'
}
},
labels: {
style: {
color: 'white'
}
},
gridLineColor: '#222222'
},
exporting: {
enabled: false
},
plotOptions: {
series: {
stacking: 'normal',
cursor: 'pointer'
}
},
series: []
};
options.series = BarData.bardataarray;
chart1 = new Highcharts.Chart(options);
});
When put outside table, it works well. Here is the related Fiddle.
I need table for proper alignment.

You can disable animation or use CSS styles like here:
<table>
<tr>
<td style="width:287px;height: 278px; vertical-align: top;position:relative;">
<div id="container1" style="position:absolute;height: 270px; width:287px;overflow: hidden;"></div>
</td>
</tr>
</table>
Related topic: https://github.com/highslide-software/highcharts.com/issues/1157