w3hello.com logo
Home PHP C# C++ Android Java Javascript Python IOS SQL HTML videos Categories
  Home » HIGHCHARTS » Page 1
Highstocks - Step line does not appear on chart export
Its because of the min and max value you set for the xAxis. The datetime values for Step Series 1 and Step Series 2 are not specifically in that range. I commented the lines and it works fine: http://jsfiddle.net/e4c1hLmo/7/

Categories : Highcharts

Highcharts showing December instead of November in x-axis
UTC starts at 0 (0=January ... 11=December) So, the code should be: pointStart: Date.UTC(2014,10,15,19,0)

Categories : Highcharts

Highcharts redraw not working with alignTicks
Update the code like this: http://jsfiddle.net/04Lffe0r/4/ By adding this: chart.series[0].isDirty = true; Because the series should be set as dirty for the chart to redraw.

Categories : Highcharts

Using Bootstrap Datepicker with Highcharts
1.) bootstrap requires a more recent jQuery version. 2.) bootstrap does not contain a native datepicker. I imagine you want to use this, so you'll need to source it in: <script src="http://rawgit.com/eternicode/bootstrap-datepicker/release/js/bootstrap-datepicker.js"></script> 3.) setDefaults is a method of jquery-ui's datepicker not the bootstrap implementation I link above. Upd

Categories : Highcharts

Highcharts bubble graph bubble getting cut off on top
Without seeing an example I can only say to try adjusting the yAxis max value. That way there would be space to render your items. Or you can calculate your highest yValue bubble's radius and increase your yAxis by that pixel ammount in yAxis values.

Categories : Highcharts

column highchart overlapping and axis X line issue
1.) Simple answer is to just rotate the labels: plotOptions: { series: { dataLabels: { rotation: 290, y: -32, x: 10 } }, Example here. If you want to get fancier, see this answer by @PawelFul. 2.) To add a yAxis line, set yAxis.lineWidth > 0: yAxis: { lineWidth: 1, See updated fiddle.

Categories : Highcharts

Get highcharts chart column position
The plotX and plotY properties on the point object are indeed the pixel positions of the column or point but within the plot. If you want position in the page you need to factor in the charts plotLeft and plotTop properties: var plotLeft = Highcharts.charts[0].plotLeft; var plotTop = Highcharts.charts[0].plotTop; $.each(Highcharts.charts[0].series,function(i, s){ $.each(s.points, function(j,

Categories : Highcharts

Disables Crosshair for one series of two
Defaulty it is not built-in, but you can prepare your own crosshair function like in the example: mouseOver: function () { var chart = this.series.chart, r = chart.renderer, left = chart.plotLeft, top = chart.plotTop, width = chart.plotWidth,

Categories : Highcharts

Function to create Highcharts where the series has the correct prototype
First, you have metrics declared as an array. Should be an empty object: var metrics = {}; Second, the data structure you've created, metrics[metricName].series is not a Highcharts series object. It's an object you created and used to supply Highcharts data. To get the real series object, you'll have to get it back from the chart. // getting the chart from the DOM, then the first series...

Categories : Highcharts

Tick interval on highcharts plot is integer
1) check that allowDecimals is not set to false 2) check that the axis label formatter is not set in a way that would exclude decimals 3) set the tickInterval explicitly For better info, provide a fiddle example of your chart demonstrating the problem. Reference: http://api.highcharts.com/highcharts#yAxis.allowDecimals

Categories : Highcharts

How to avoid blank candles showing 0, 0, 0, 0 in highstock candlestick chart on dynamic update with shift
Please read the API before using! When shift is true, one point is shifted off the start of the series as one is appended to the end. Use this option for live charts monitoring a value over time. So it is because of shift that your previous data is lost. The problem with the zero data is because of the datetime format. So if you hit the button for example 3 seconds after the chart has loaded, y

Categories : Highcharts

Highcharts custom styling connect and label
In Highcharts you can only edit softness of connector and color/length. If you want to change that, then you need to overwrite drawDataLabels function for pie series. Or update series.data[index].connector path after rendering to fit your needs. Something like this: http://jsfiddle.net/yzob09ks/ function redrawConnectors() { var chart = this, d; Highcharts.each(chart.series[0]

Categories : Highcharts

Highcharts start reversed y-axis at 1 for ranking graph
There is a tickPositioner function which you can apply on yAxis so you can apply your own tick points : http://jsfiddle.net/270dj43o/3/ EDIT: Apart of tickPositioner, you can use also tickPositions.

Categories : Highcharts

HighChart with large amount of data(complex structure) not working
You need to increase turboThreshold parameter, but for huge data we recommen to use Highstock which uses dataGrouping module, allowing to increase performance.

Categories : Highcharts

higthcharts move the zero values to the bottom
You need to add min and max for the yAxis: yAxis: { min: 0 , max: 1 }, http://jsfiddle.net/w0n9Lq7o/1/

Categories : Highcharts

Exporting Highcharts all data
If you check out the docs and the source code for this plugin you can see that it is just explicitly getting the data as a two dimensional array of x and y points (date or category and the yValue). To get it to return the other items you would need to extend this plugin (or roll your own).

Categories : Highcharts

Highchart and HTMLCanvas
Agi La I don't know extjs, but since I had problems in dowloading highcharts charts too, I'll explain what I did to get them. First, make sure you have the rgbcolor.js and canvg.js libraries. Second, you can use this script to make an AJAX call: <script> $( document ).ready(function(){ var svg = document.getElementById('$this->id_chart').children[0].innerHTML;

Categories : Highcharts

How to prevent a React onClick event from being consumed by child
The cleanest solution for me was to render a transparent div overtop of the highchart using absolute positioning. The transparent div gets the events first and is handled purely by React. This solves all problems.

Categories : Highcharts

Highcharts version 3 type definitions for typescript
Or if someone has a list of differences maybe I could help make one Your best bet would be the changelog : http://www.highcharts.com/documentation/changelog but it massive. You might want to just stick with the current version and update it as you find differences

Categories : Highcharts

Add border on highcharts bar chart on start of bar
The border is actually there, but is hidden beyond the axis min, it seems. If you set a min as slightly less then zero, and set startOnTick to false, the border will appear: yAxis: { min:-.1, startOnTick:false, } http://jsfiddle.net/9csjzsx5/1/

Categories : Highcharts

How can I hide and show a category in highcharts
Instaed of setting categories etc, you can catch checkbox event and show/hide the particual SVG element. var $check, val; $('input[name="cat"]').click(function(){ $check = $(this); val = $check.val(); $.each(chart.xAxis[0].ticks, function(i, tick){ if(tick.label && tick.label.textStr == val){ $check.is(':checked') ? tick.l

Categories : Highcharts

Fixed min and max dynamic time ticks in chart
I found a solution where i set the tickpositioner in the JSONObject and implement the function in javascript. Mind the "positions.info" because due to the tickpositioner function, label predefined label formatting gets lost. void setXaxisTicks(XAxis xAxis, Long start, Long end) { JSONObject options = xAxis.getOptions(); options.put("tickPositioner", null); configureXAxis(options.getJa

Categories : Highcharts

Highcharts drilldown with more than one series
Unfortuantely it is not available,yet but you can post your suggestion in the uservoice service. http://highcharts.uservoice.com

Categories : Highcharts

Highcharts displaying decimals on yearly xAxis
tickPixelInterval will give a setting of how far apart ticks should be - that won't help in your situation, and will in fact make sure the problem persists. What you want is just tickInterval, and set it to 1, since your year numbers are in increments of 1: http://jsfiddle.net/ff2m2bsx/8/ if you won't always have increments of 1, another option is the allowDecimals property: http://jsfiddle

Categories : Highcharts

Highcharts errorbar with corsshairs
Error bars are paths in SVG, so there's no such thing like lower/higher part of it. If you check highcharts.src.js file and search for drawCrosshair, you will find method responsible for rendering crosshair. As you can see, there is line: pos = (this.chart.inverted != this.horiz) ? point.plotX : this.len - point.plotY; Which takes point.plotY to get position of the crosshair. In error bars plot

Categories : Highcharts

Highstock chart with data associated with time but not in x ais
The highstock requires x parameter as timestamp, to have a working scrollbar / rangeselector. If you need only scoller for highcharts you can do this in that way: xAxis:{ min:0, max:5 }, scrollbar:{ enabled:true }, http://jsfiddle.net/5bh1s4kn/

Categories : Highcharts

highcharts inner line on bar chart
You can try to use pointPlacement for line serie and move it by setting any number value for this parameter.

Categories : Highcharts

Hide/Display Flag in Highstock based on the range selection
You can catch the setExtremes event and then use addSeries() to add flag series.

Categories : Highcharts

Return xAxis category on click
You can get position x value and map to categories. Example: click:function(e){ alert('x: ' + categories[Math.floor(e.xAxis[0].value)]); } http://jsfiddle.net/pev5zos8/

Categories : Highcharts

Color selection based on a function for Highchart graphs?
I couldn't find anything in the documentation, so I decided to roll my own function: // Get data var data = giveMeData(); // At this point the data is already formatted for HC // Convert data var convertedData = []; for (var i=0; i<data.length; i++) { var item = data[i]; item['color'] = pickColor(item.name); convertedData.push(item); } // Pass converted data to HC ... Wish the

Categories : Highcharts

Remove spaces between columns in HighChart
You can change the type of the x-axis to category by adding: xAxis: { type: 'category' } see also this working fiddle. x-axis values are not anymore handled as datetime objects and positioned accrodingly.

Categories : Highcharts

Show ranges as legend for highcharts angular gauge
Sure, just create separate series for legend, and enable them: http://jsfiddle.net/kbvC3/734/ series: [{ name: 'Speed', data: [80], tooltip: { valueSuffix: ' km/h' } }, { showInLegend: true, name: "Bad", color: '#55BF3B' // green }, { showInLegend: true, name: "Good", color: '#DDDF0D' // yel

Categories : Highcharts

Moving from highcharts 3.0 to 4.0: grouped column weird behavior
This is because left y axis has 0 at that level. To fix it you can set startOnTick: false, min: 0.5 for that axis. Example: http://jsfiddle.net/pfofo973/4/

Categories : Highcharts

highcharts data labels overlaps the plotlines value
Highcharts allows you to modify the position of individual data labels in the data array. In your example, you would do that like so: data: [12.10,22.10,9.40,13.40,10.90,10.60,9.70,8.50,8.00,{y:11.90, dataLabels: {y:-8}}], Here it is in the API: http://api.highcharts.com/highcharts#series.data.dataLabels Although it might be best to move your plotline label underneath the line. In your example

Categories : Highcharts

HighCharts stacked column range
just add : plotOptions: { columnrange: { grouping: false } } to your chart. http://jsfiddle.net/6qsvjark/2/

Categories : Highcharts

How to change colors options in Highcharts programmatically?
You can set the plotOptions events: plotOptions: { column:{colorByPoint:true}, series: { animation:false, events: { mouseOver: function(e) { //console.log( chart.options); var options = chart.options; if(options.colors[0]!='#E84C3D') {

Categories : Highcharts

Categories positions in highcharts
It doesn't make sense with the numbers given (the distance between 0 and 5% is 1.5 times the distance between 5 and 10%), but using three x axes and the x property of the labels, this is possible. example: http://jsfiddle.net/cwbyyang/2/ labels: { x:-40 }

Categories : Highcharts

Highcharts series.remove(false) doesn't update yAxis.datamax
It's caused by disabling redraw: chart.series[channelIndex].remove(false); If you would replace false<=>redraw or just remove false it would work properly. Chart's redraw will recalculate datamin and datamax.

Categories : Highcharts

Marker with number in highcharts
You can catch datalabels.formatter and use loop on each series / and each point to check if any points has the same coordinates. Then sum it and return in the funcion.

Categories : Highcharts




© Copyright 2018 w3hello.com Publishing Limited. All rights reserved.