We Keep Coding

Why would the label of the vertical axis only show after the button is clicked?

I am working on a website which needs to show something on the chart (highchart) upon clicking of a button.
The issue is: when the page is first loaded, the label on the vertical axis can not be seen, no matter how big I set the margin for the chart. However, after the button is clicked for the first time, the labels can be seen and remains so.
There was no such problem before I set "reversed", "opposite" for xAxis and "reversed" for yAxis as true.
What causes this phenomenon and how can I solve this?
See the JSFiddle for detail. (There are some logic mistakes in the code which is irrelevant for my question.)
I just discovered that when I first load the JSFiddle, the vertical axis of the graph shows up with label; but when I click on "Run" additionally, the graph is refreshed with a vertical axis without label. Maybe I can simulate certain process which takes place when a JSFiddle is loaded to make sure that the vertical axis of the graph shows up with labels. But I am not sure how to do that.
Browser: Google Chrome Version 69.0.3497.92 (Official Build) (64-bit) (up to date)
My OS: Windows 10
Code for the generation of the chart:
function createColumnHorizChart(argMinY = minYAxis, argMaxY = maxYAxis) {
var chart = new Highcharts.Chart({
chart: { //not to be changed lightly
renderTo: 'contr2',
type: 'bar',
width: 749,
marginTop: 5,
marginLeft: 1,
marginRight: 90,
marginBottom: 55
},
colors: [
'#0000ff'
],
title: {
text: null
},
exporting: {
enabled: false
},
legend: {
enabled: false
},
credits: {
enabled: false
},
xAxis: {
categories: ['smaller than 100', '100 - 110', '110 - 120', '120 - 130', '130 - 140', '140 - 150', 'bigger than 150'],
gridLineWidth: 1,
startOnTick: true,
title: {
text: 'Money Unit (MU)'
},
opposite: true,
reversed: true
},
yAxis: {
reversed: true,
min: 0,
max: 15,
tickInterval: 5,
title: {
text: 'Frequency',
}
},
tooltip: {
positioner: function(boxWidth, boxHeight, point) {
return {
x: point.plotX - 50,
y: point.plotY - 10
};
},
style: {
fontSize: "10px",
fontWeight: "unbold"
},
formatter: function() {
return Math.round(chartData[index - 2] * 100) / 100;
}
},
plotOptions: {
bar: {
dataLabels: {
enabled: false
}
},
series: {
borderColor: '#FFFFFF',
animation: false, //disable all the animations,
pointPadding: 0,
groupPadding: 0,
borderWidth: 1,
shadow: false
}
},
series: [{
enableMouseTracking: false,
data: Array(7).fill(0)
}]
});
return chart;
}

So, it's only possible to reproduce on Windows platform. Could you provide us also with minified demo where the problem occurs? I'm asking because in current demo there are a lot of lines which are unnecessary.
Additionally, until we find the source of the problem, you can workaround it by calling this.reflow() in chart.events.load event handler.
chart: {
events: {
load: function() {
this.reflow()
}
}
}
API Reference: https://api.highcharts.com/class-reference/Highcharts.Chart#reflow

I'm not sure why but it works fine when you remove the marginLeft property or set it to 0.

highcharts. set full height of column/bar background color

I need to set a gradient background color to full height of column in Highcharts. Like on the image below. How can I do it? Help me, please.
here an example of what I need

Make another series which has points equaled yAxis maximum value. You can use pattern-fill plugin and set the pattern to a specific column.
$('#container').highcharts({
chart: {
type: 'column'
},
yAxis: {
min: 0,
max: 100
},
plotOptions: {
series: {
pointPadding: 0
}
},
series: [{
enableMouseTracking: false,
showInLegend: false,
grouping: false,
color: 'url(#highcharts-default-pattern-1)',
data: [100, 100]
}, {
data: [20, 50]
}, {
data: [40, 30]
}]
});
You can read more about modifying/creating patterns here - http://www.highcharts.com/docs/chart-design-and-style/gradients-shadows-and-patterns
Live example and output
http://jsfiddle.net/rgs9uv39/

Go here and import your image: http://www.colorzilla.com/gradient-editor/ and after get your css properties.
If you need the element to be full height use:
.yourClass {
height: 100vh;
}

high charts - lost animation when pie chart sliced is programmatically set

As you can see from this basic example, http://www.highcharts.com/demo/pie-basic
when you select a pie, the selected pie got pulled out slowly with animation.
and that is handled by this option.
pie: {
allowPointSelect: true
}
However, I don't want mouse click to select Point. I have, say, a button outside of the pie chart, when I press the button, the first pie/Point should be selected.
I have the following
$scope.SAWChartConfig.series[0].data[0].selected = true;
$scope.SAWChartConfig.series[0].data[0].sliced = true;
programatically set the first point as selected when button clicked. It works fine, but it lost the animation (where it should slowly pull outward).
My questions are:
how can i add the animation back?
series[0].data contains a few data points, I would need to reset data[i].sliced to false for each of them after button is clicked. Is there a easy way to do it instead of loop through all items?
.controller('spendingPieChartCtrl', ['$scope', '$q',
'TransactionService', 'CategoryService','chartColors', function
($scope, $q, TransactionSvc, CategorySvc, chartColors) {
if(typeof $scope.height === 'undefined') {
$scope.height = 140;
}
$scope.SAWChartConfig = {
options: {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie',
margin: [0, 0, 0, 0],
spacingTop: 0,
spacingBottom: 0,
spacingLeft: 0,
spacingRight: 0,
height: $scope.height
},
plotOptions: {
pie: {
dataLabels: {
enabled: false
},
size: '100%',
borderWidth: 0
},
series: {
states: {
hover: {
enabled: false
}
}
}
},
title:{
text: null
},
tooltip: {
enabled: false
}
},
series: [{
data: []
}]
};
$q.all([
TransactionSvc.get(),
CategorySvc.get()
]).then(function() {
var spendingCategories = TransactionSvc.getTopCategories();
//redraw the chart by updating series data
$scope.SAWChartConfig.series = [{data: spendingCategories}];
});
$scope.$on('talkToOne', function( event, data ){
$scope.SAWChartConfig.series[0].data[index].select();
//$scope.SAWChartConfig.series[0].data[index].sliced = true;
});
I am using ng-hightcharts, and here is the directive call

chart.series[0].data[index].select() will do the select/deselect of the slices without loosing animation.
See the working example here
By using above code your second problem will also get fixed, since the next select call will automatically deselect other selected slices in the chart.

Display points with minimum number in HighChart

In Highchart I want to set the number of plot points that are to be shown in the dynamic graph.
For example, if I set the number to 10, only 10 points in the dynamic series will be shown.
I have implemented another graph and it shows only 6 points but I want to display at least 10 points.
JsFiddle
$(function () {
var chart;
$(document).ready(function () {
chachart = new Highcharts.Chart({
chart: {
renderTo: "container",
type: "spline",
zoomType: 'x'
},
title: {
text: 'Inverter ~ AC Currents'
},
subtitle: {
text: 'Click and drag in the plot area to zoom in'
},
plotOptions: {
spline: {
turboThreshold: 2000,
lineWidth: 2,
states: {
hover: {
enabled: true,
lineWidth: 3
}
},
marker: {
enabled: false,
states: {
hover: {
enabled: true,
radius: 5,
lineWidth: 1
}
}
}
}
},
In the link above, I do not see any line that defines the limit for the number of points.

This is how addPoint in your example works, see docs.
So third param (shift) is responsible for removing first point in series. Just add checking if number of points == 10, and then set it to true to remove point.

Highstock Column Chart - data grouping causes data to scroll independently of axis

I am attempting to make a stacked column chart representing events on a timeline. I need evenly-spaced bars, that scroll left/right with their respective ticks. Currently upon scrolling, the columns remain in place and their data is updated to reflect the new timespan they represent (I assume).
For example: when scrolling one "step" to the right, I note these differences:
The column remains in place with updated data and the axis tick moves to the left. This results in a 'graphic equalizer'-like effect when scrolling. (See fiddle)
What I need is to have the column represent the same data for the life of the chart, and to scroll left/right with its tick mark.
I suspect I'm misunderstanding something in the configuration. Any help/direction would be very much appreciated.
(As a side note: is there any easy way to style/color data from the past (with an xAxis datetime value of < today) differently to normal data?)
chart: {
alignTicks: false,
backgroundColor: '#eeeeee',
events: {
load: function (e) {
this.xAxis[0].setExtremes(1390943153305, 1400015153305);
}
},
ignoreHiddenSeries: true,
renderTo: $('#chart')[0]
},
colors: ['#89f1a4','#68d9f7','#9eb9ef','#c49eef'],
credits: {enabled: false},
legend: {
enabled: true,
shadow: true
},
rangeSelector: {selected: 1},
title: {text: 'Global Events'},
navigator: {
height: 40,
xAxis: {
gridLineWidth: 1
},
series: {type: 'column'}
},
plotOptions: {
series: {
showInLegend: true,
stacking: 'normal',
dataGrouping: {
enabled: true,
forced: true,
units: [
['millisecond', [604800000]], // Attempting to force data into weekly groups, throws error if this is null
['second', [604800]],
['minute', [10080]],
['hour', [168]],
['day', [7]],
['week', [1]], // Expected this to be the only required option if I only want weekly grouping...
['month', null],
['year', null]
]
}
}
},
xAxis: {ordinal: false},
series: data

If you want just weekly grouping, then only that one set, see: http://jsfiddle.net/s6BmC/2/
I think that resolves your issue, right?
plotOptions: {
series: {
showInLegend: true,
stacking: 'normal',
dataGrouping: {
enabled: true,
forced: true,
units: [ [ 'week', [1] ]]
}
}
},
Regarding additional question:
- yes you can set specific color for each point, but you need to determine on your own what color should be set:
data: [{ x: timestamp, y: value, color: color }, { x: timestamp, y: value, color: color }... ]
Another solution is to wrap setting color for column. Something similar I have done for candlestick: http://jsfiddle.net/79WZM/ (this solution requires much more knowledge of Highcharts).