We Keep Coding

Highchart not display correct size on initial load, only resize when resizing window in react js

currently I am developing chart in my React. I am using Highchart. My problem is when my chart first loaded, the size is not following the container size, when i resize the window then only the chart display correct size.
many solution suggested to use
chart.reflow();
but how to use this in react code?
i have tried
.highcharts-container, .highcharts-container svg {
width: 100% !important;
}
not working
the chart always when initial will look like this
I need the chart fully to the yellow line
My chart code
this.setState({
chartDrawSector: {
chart: {
type: 'column',
height: '600',
events: {
load: function(event) {
event.target.reflow();// i tried this not working also..
}
}
},
title: {
text: 'Sector All'
},
// subtitle: {
// text: 'Source: WorldClimate.com'
// },
xAxis: {
categories: sectorName[0],
crosshair: true
},
yAxis: {
min: 0,
title: {
text: displayMode == 'f' ? 'Figures' : 'Percentage %'
}
},
tooltip: {
headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
'<td style="padding:0"><b>{point.y:.1f} </b></td></tr>',
footerFormat: '</table>',
shared: true,
useHTML: true
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: [{
name: 'Ultimate Negative',
data: n30Data[0],
color: 'rgb(100, 30, 22 )'
},
{
name: 'Ultimate Positive',
data: gt30Data[0],
color: 'rgb(27, 79, 114)'
},
]
}
})

how to change the point format for drill down in pie charts?

I am using a pie chart with drill down, is there any way to change the point format in tool-tip function. I want to display; first pie chart in Percentage(%) format, and then drill down data in Metric Ton (MT)format.
I am getting the data in respective formats from the back end service. Products are coming in metric Tons and remaining-percentage, actual percentage are coming in percentage.
My pie chart code is given below.
function visitorData(data){
var products = data.products;
var remainingPercentage=data.remainingPercentage;
var actualPercentage=data.actualPercentage
Highcharts.chart('current', {
credits: {
enabled: false
},
chart: {
type: 'pie'
},
title: {
text: 'Production report of current quarter'
},
subtitle: {
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
}
}
},
tooltip: {
headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}%</b> of total<br/>'
},
series: [{
name: 'Planned Production',
colorByPoint: true,
data: [{
name: 'Remaining Production Qty. ',
y: data.remainingPercentage,
},
{
name: 'Actual Production Qty.',
y: data.actualPercentage,
drilldown: 'ap'
}
]
}],
drilldown: {
series: [{
name: 'production report',
id: 'po',
data: [
]
}, {
name: 'Actual Production Qty.',
id: 'ap',
data: data.products
} ]
}
});
}
Thanks in advance.

A way to solve this is to appoint a tooltip: {pointFormatter: } to your first level series. This will override the main tooltip formatter and show you the data you want it to show.
// Create the chart
Highcharts.chart('container', {
credits: {
enabled: false
},
chart: {
type: 'pie'
},
title: {
text: 'Production report of current quarter'
},
subtitle: {
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
}
}
},
tooltip: {
headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
//MT format for the lower drilldowns
pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}MT</b> of total<br/>'
},
series: [{
tooltip: {
//Pointformat for the percentage series
pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}%</b> of total<br/>'
},
name: 'Planned Production',
colorByPoint: true,
data: [{
name: 'Remaining Production Qty. ',
y: 3,
},
{
name: 'Actual Production Qty.',
y: 5,
drilldown: 'ap'
}
]
}],
drilldown: {
series: [{
name: 'production report',
id: 'po',
data: [1]
}, {
name: 'Actual Production Qty.',
id: 'ap',
data: [2]
},
]
}
});
The reason why I opted to let the first level override the tooltip is because of the construction of your drilldown, and I figure all of those drilldowns will use the same tooltip format.
Here you can find a working JSFiddle.

Highcharts - Chose category via dropdown list

I'm fairly new to working with Highcharts. As it is right now I am trying to figure out a way to let the user browse between categories via a drop-down selection.
The chart itself is quite simple: Categories are months, Jan through Dec, and the data arrays are populated by looping through SharePoint list data.
What I am hoping to be able to create is a solution where the user can choose which month to view data for via a drop-down selection. This would have to be done after all data has been loaded into the chart to avoid having to query the service for each selection.
The charts-code itself is very simple:
$('#container3').highcharts({
chart: {
type: 'column'
},
title: {
text: ''
},
subtitle: {
text: ''
},
xAxis: {
categories: categoryMonthsArray,
crosshair: true
},
yAxis: {
min: 0,
title: {
text: ''
}
},
tooltip: {
headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
'<td style="padding:0"><b>{point.y:.0f}</b></td></tr>',
footerFormat: '</table>',
shared: true,
useHTML: true
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: [{
name: 'd1',
data: d1Array
}, {
name: 'd2',
data: d2Array
}, {
name: 'd3',
data: d3Array
}, {
name: 'd4',
data: d4Array
}, {
name: 'd5',
data: d5Array
}]
Any pointers at all would be very much appreciated here!

Remove padding from barcharts Highcharts.js

I'm using highcharts.js to build bar charts, sometimes with hundreds of data points(bars). How do I remove the white padding that highcharts.js puts on every bar? Check out this fiddle to see the phenomenon I'm talking about. I've tried setting the groupPadding: 0 in the series object but there's still some padding/margin between the bars. Is there anything else I can do? Maybe highcharts.js is the wrong library for this type of plot? any suggestions are welcome, Thanks!
$(function () {
$('#container').highcharts({
chart: {
type: 'column',
zoomType: 'x'
},
title: {
text: 'Monthly Average Rainfall'
},
subtitle: {
text: 'Source: WorldClimate.com'
},
xAxis: {
categories: dates ,
crosshair: true,
crosshair: true,
minTickInterval: 24
},
yAxis: {
min: 0,
title: {
text: 'Rainfall (mm)'
}
},
tooltip: {
headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
'<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
footerFormat: '</table>',
shared: true,
useHTML: true
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: [{
name: 'Tokyo',
data: ticks,
groupPadding: 0
}]
});
});

Found the answer here: http://www.highcharts.com/docs/chart-and-series-types/column-chart
The above documentation shows how to zero out all spacing and I've done this to your fiddle so there are now no gaps. The code to update is your plotOptions call and keep your stacking: 'percent' call:
plotOptions: {
column: {
pointPadding: 0,
borderWidth: 0,
groupPadding: 0,
shadow: false,
stacking: 'percent'
}
}
For any service always have a look in their documentation, chances are they have dealt with most issues you can think of. Usually. :)

How do I add a series to a column chart at a specific index

Is there a way to set the position columns when adding a new series?
An example of what I would like to do with non-functional code at the end after adding a new series:
$(function () {
chart = new Highcharts.Chart({
chart: {
type: 'column',
renderTo: 'container'
},
title: {
text: 'Monthly Average Rainfall'
},
subtitle: {
text: 'Source: WorldClimate.com'
},
xAxis: {
categories: [
'Jan',
'Feb'
],
crosshair: true
},
yAxis: {
min: 0,
title: {
text: 'Rainfall (mm)'
}
},
tooltip: {
headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
'<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
footerFormat: '</table>',
shared: true,
useHTML: true
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: [{
name: 'Tokyo',
data: [49.9, 71.5]
}, {
name: 'Berlin',
data: [32.4, 33.2]
}]
});
chart.addSeries( {
name: 'New York',
data: [83.6, 78.8]
})
chart.series[0].index = 2;
chart.series[1].index = 3;
chart.series[2].index = 1;
chart.redraw();
});
Link to my a jsFiddle:
http://jsfiddle.net/cug79br2/1/
In my case do not have all the series when I created the chart so I need to rearrange them after I have loaded the additional dataset. In this example I want to add the last series at index 1 and move the existing columns one notch to the right.

try this
series: [{
name: 'Tokyo',
data: [49.9, 71.5],
index: 4
}, {
name: 'Berlin',
data: [32.4, 33.2],
index: 3
}]
});
chart.addSeries( {
name: 'New York',
data: [83.6, 78.8],
index: 2
})
chart.addSeries( {
name: 'New York1',
data: [83.6, 78.8],
index: 1
})

The best solution I could find is to remove all series, sort them and add them again. In this case its helpful (maby necessary) to keep the data outside the Highcharts object. In my case an array named series_data.
$(function () {
var chart, series_data;
series_data = [
{
name: 'Tokyo',
data: [49.9, 71.5]
}, {
name: 'Berlin',
data: [32.4, 33.2]
}
];
chart = new Highcharts.Chart({
chart: {
type: 'column',
renderTo: 'container'
},
title: {
text: 'Monthly Average Rainfall'
},
subtitle: {
text: 'Source: WorldClimate.com'
},
xAxis: {
categories: [
'Jan',
'Feb'
],
crosshair: true
},
yAxis: {
min: 0,
title: {
text: 'Rainfall (mm)'
}
},
tooltip: {
headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
'<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
footerFormat: '</table>',
shared: true,
useHTML: true
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: series_data
});
while(chart.series.length){
chart.series[0].remove();
}
series_data.push( {
name: 'New York',
data: [83.6, 78.8]
}
);
_.each(_.sortBy(series_data, 'data.0').reverse(), function(series, i){
series.index = i;
// To keep animations pretty and the last added to animate, do tno add it in the loop but later.
if(series.name === 'New York'){
return;
}
chart.addSeries(series, true, false);
})
chart.addSeries(series_data[2], true, false);
});
http://jsfiddle.net/cug79br2/23/
When adding the items again after they have been removed I ignore the 'New York' series and add it later but set the index on it so that the the newest series will be animated.