HIghCharts bar chart renders columns on top of each other

I am having an issue with rendering a basic bar chart using HighCharts. I am using two series, both with a x and y value. I am storing date in the x and a number in the y. When I runt he code the columns are rendered on top of each other. I used a very similar code with an older version of HighCharts and the columns were displaying fine. These problems started occurring more recently. Any help is much appreciated. The code is very basic and I made it available at jsFiddle as well.

highcharts column labels

I have made a Highcharts chart with grouped and stacked columns, like in the example found here: http://www.highcharts.com/demo/column-stacked-and-grouped. The example shows a number of fruits for 5 different persons, grouped by gender. What I miss in this example, is an x-axis label showing the name of the group (male or female) underneath each group. Is it possible to add this to the chart? Here is a simplified version of the chart I'm trying to make: http://jsfiddle.net/WQjVP/66/. It shows t

Highcharts Set data grouping

On a candlestick chart, I have oclh values at minutes rsolution. I'd like to be able to programmatically set the grouping range (1min, 5min, 15min, 30min, 1h, 2h, 4h, 8h, 12h, 1w, 1m, 1y). Is it possible directly using highcharts? Or should I rely on a ochl manipulation library and is there such a library?

HighCharts - display ratio charts

I want to create a chart similar to http://www.highcharts.com/demo/column-negative but instead of 0 I want to use 1 as a mirror to show lower values (like negative values)

Highcharts giving input to highchart using JSON

i'm new to highchart using a default JSON value given by highchart team wrks fine here is the link default high chart values but however when i try to give input as JSON as a local variable shows nothing in the graph, here is the code var myval = new Array(); myval [0] = "1146096000000,69.36"; myval [1] = "1146182400000,70.39"; myval [2] = "1146441600000,69.60"; /******* OR ******/ //var myval = [ [1146096000000,69.36], [1146182400000,70.39], [1146441600000,69.60]]; /***** DOESN'T WORk

Highcharts verticalAlign ignored for non 0 rotation

If I try to rotate the data labels in my column charts, I can not align the labels at the bottom of my columns, verticalAlign appears to be completed ignored. basically trying to use: plotOptions: { column: { stacking: 'normal', dataLabels: { enabled: true, verticalAlign: 'bottom', rotation: -90 } } } fiddle with it at: http://jsfiddle.net/FbhAs/ Anyone know a work-around? -= Jab

Highcharts Highchart bubblechart custom symbol

I'm trying to get the bubblechart in highcharts to draw with a custom symbol (such as square, triangle, etc etc). This works wonderfully for scatter but bubble doesn't seem to cooperate when you switch type to bubble. Here's the code $(document).ready(function() { var bubbleOne = { x:20, y:10, z: 15, marker:{ symbol: "square" }, }; var bubbleTwo = { x:10, y:20, z:10, marker:{ symbol: "

Highcharts Highchart renderer image rotation is not working in IE10

I need to add an image in highchart and then need to rotate it on different angles. Here is the example: http://jsfiddle.net/peZfm/ And the rotation code: chart.renderer .image('http://graphs2.stormgeo.com/Images/Arrows/layout%202/0/test.png', 100, 100, 30, 30) .css({ '-webkit-transform': 'rotate( 50deg)', "-webkit-transform-origin": "center center", 'transform': 'rotate(50deg)', "transform-origin": "center center", '-ms-transform': 'rotate(50de

Highcharts Highstock: Grid-lines on top of area but not breaking the chart line

what I am trying to achieve is an area chart in highstock, where I have 1 pixel gridlines on both x- and y-axis which should be visible on top of the fill area but should not break the chart line. Look at this example from the highstock api: http://jsfiddle.net/highcharts/5uZzk/ Is it possible to somehow have those grid lines not break the chart line? I already tried splitting up my series into two series with different indexes where one would only represent the "area" (e.g. index 3) and the

Highcharts: basic column chart not showing correct color

Below is my code to display basic column chart. $(function () { Highcharts.setOptions({ colors: ['#f89422','#8cc641'] }); $('#container').highcharts({ chart: { type: 'column' }, title: { text: 'Monthly Average Rainfall' }, subtitle: { text: 'Source: WorldClimate.com' }, xAxis: { categories: [ 'Jan', 'Feb' ] },

Reveal.js with highcharts

I'm using reveal.js (http://lab.hakim.se/reveal-js/) together with Highcharts JS but i have problems with tooltips position. For example, if i use a line with the months on the x axis, when i put the mouse over the point in january the tooltip its ok, but when i put the mouse over december the tooltip shows me the october data. The tooltip for each month is displaced more and more. You can see http://lideria.net/presentacion/index1.php to see the problem

Highcharts Rendering chart in the background

I have a large dataset (multiple nested json) which I am using to create 4 line charts using highchart. As the volume of data grows I begin to see a higher rendering time, which is normal. I was wondering if there might be a way to render a part of the data (say, 15 days' data), and then render the rest of the data in the background and make the enable the tabs (1m, 3m, 6 m, ...) as the data is rendered. Thanks, Sukrit

Highcharts Getting extra series data from hash to show up in tooltip in highstock

I've gotten examples of this working in highcharts, but I am having trouble getting this to work in highstocks. I am trying to get my tooltip to show some extra information about the point provided in the series but it seems like the values I put in my series data hash aren't being saved properly. The X and Y fields are being set ok since I can see the graph coming out correctly, but my other "fruit" and "name" fields are reporting null in the tooltip. Here is an example of my series data:

Highcharts Rally chart - column layout issues

I'm having trouble getting the expected results in a chart in my Rally app. I'm trying to get an effect as seen in this jsFiddle example, with a series that creates a 'box' effect around two other series. However, when I render it in my Rally app, the pointPadding and pointPlacement properties don't seem to be having any effect. Am I doing something wrong or is this a bug? Highcharts Example (see jsFiddle) Rally Example (see initializing code below) Here's the code that initializes the cha

Get highcharts chart column position

I have a highcharts chart with a chart type column (unfortunately I'm not able to post images yet) I need to get position of each column (or point in case of line chart type) on a page (means top, left or something like this). I've tried a lot options, like this.series.data.PlotX (and plotY), this.plotX etc. Nothing is helpfull. thanks.

Highcharts How to set highchart legend style?

I made a jsfiddle example to demo this. http://jsfiddle.net/daxu/ttxvpduv/. $(function () { $('#container').highcharts({ legend: { enabled: true }, xAxis: { categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] }, series: [{ name:'a', data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4] }, {

Highcharts is formating x axis text values as dates

For some reason, Highcharts is formatting my text categories as dates. Background Info I am getting my data from a Google Spreadsheet. The labels should say Grade 12, Grade 11, etc. I know I can overwrite the xAxis labels with the categories function, but I want I sustainable solution so that my end users can change the labels as they wish. CodePen $(function() { Highcharts.setOptions({ chart: { defaultSeriesType: 'bar', backgroundColor: '#fff', shadow: false

Highcharts. How to set interval for PlotBand?

I have multiseries spline chart. All series has own plotBand. Is it possible to limit the plotBand interval by the length of the series? Example, edited image: plotLines can't help too: plotLines: [{ value: 12345, width: 10 }] plotBands: [{ from: 30, to: 45 }], http://jsfiddle.net/r00tGER/1nuw4fqs/

Highcharts compare different dates ranges

I'd like to use highstock to compare two different time ranges together. For example, for two data sets, one that shows the max temp for each day in Jan and the other one for Feb (for example), I'd like them to be shown one above the other, with the x-axis being the "same" one for both. I can't do it with categories, because the data is being fed automatically, so each data point has its own time, so the x-axis is datetime. I wanted to know if it was possible to simply have two graphs overlap

How do I change a specific bar color in Highcharts Bar Chart?

I am putting together a barchart that shows 24 bars and how much production is done in each hour of the day. Pretty simple. I am using Highcharts.js version 4.0.1 However, I want to make this extra cool and make the current hour's bar have a different color (so you can see which bar you should look at for what hour). So lets say: you have 24 bars from left to right It is 3PM in the afternoon Therefore you want the "15th" bar in the series to be highlighted a certain color Can anybody dir

Highcharts - get width of each slice of a column chart

I have the highcharts,column chart, wherein I need to draw a notification bar on each of the months. Please find image, I need to set the yellow bar under each month. Please can anyone help me get the each width of the slice. Thanks for ur help Regards Ruth

Highcharts Rendering the charts as columnrange type

I have the following chart I would like to render the working times intervalls as columnrange and palcing the charts close to the xAxis. with this part of code in the code below chart: { spacingTop: 0, paddingTop: 0, zoomType: 'x', }, I am getting the following charts: https://jsfiddle.net/62jq6zsd/ But I am not getting the right result.

How do get highcharts combo column scatter to work?

Trying to create a combo chart of with 3 column series and 1 scatter series; column should be 100% and scatter overlaid on it. When I use plotOptions: {column: {stacking: "percent"}, the columns are maximized in the plot area but scatter series goes to bottom of chart; when replace with plotOptions: {column: {stacking: "normal"}, it displays well but columns are not maximizing the plot area. Ideas? Highcharts.chart('container', { chart: { ignoreHiddenSeries: false, bac

Highcharts Areaspline: edge to edge lines and hide first y label

I received a mockup of a graph using an areaspline (ignoring the column chart): I have two questions that I can't seem to find any configuration that would satisfy the requirements. Is there a way to extend the lines to the edge of the graph based on their trending slope, or possibly just a little above or below the end point? On a graph like this, it wouldn't look bad to omit those edge lines, but on a graph in the same area with only 3 data points, the whitespace is much more noticeable.

How to display Δ in Highcharts category labels?

I've come across an issue that I'm pretty sure it's just where I'm setting my object value, however, I can't seem to get this to work. I'm attempting to put the Δ character in the highcharts.js category as seen in this code snippet below: Highcharts.chart('container', { chart: { type: 'bar' }, title: { text: 'Catawba Average Points' }, xAxis: { categories: ['Emergency TS Δs', 'Column B', 'Column C', 'Column D', 'Column E', 'Column F', 'Column G'],

Basic Highcharts Multiple Series Chart Using JSON

I am trying to create a basic line chart that contains three series of data in a json file. The json file is name json.json for this example. I have validated the JSON format using JSON Formatter. JSON Format Example { "Series1 (Units1)": [100 ,200 ,300], "Series2 (Units2)": [10, 20, 30], "Series3 (Units3)": [1, 2, 3] } Current Code Being Used from a another example I found $(function () { $.getJSON('data/json.json', function (data) { console.log(data) var processedData

Highcharts.js question: is it possible to not draw line beyond MACD indicator histogram?

I develop a project using Highstock.js library. I have a requirement to not draw lines beyond MACD indicator histogram (https://prnt.sc/lxjoit). In Highstock.js documentation related to MACD indicator there is macdLine API: https://api.highcharts.com/highstock/series.macd.macdLine , signalLine API: https://api.highcharts.com/highstock/series.macd.signalLine.zones. Those API allows only to set colors for MACD indicator parts divided by y axis. So it doesn't fit. From documentation it isn't clear

Highcharts Nested Donut chart with margins

I am working on creating a nested donut chart with highcharts. I saw the below link : can we make nested donut charts in highcharts? is there a way we can add some space/margins around each donut.

Highcharts: SeriesMapping with CSV

I have a chart that works very well when using the data module with Google spreadsheets. However I need to stop using Google sheets and use CSV on my own server instead. Some of my charts are working, but some aren't. Here's one that is not working. It uses the second column to set the point color, but it's not recognizing it. Any idea what might be wrong here? I edited some of the csv entries to try to make it work, but it's not working much: http://jsfiddle.net/jmunger/cf6L4bmk/20/ var c

Highcharts tooltip for single series always centre. Can I force it to be left hover of the marker?

highcharts example it has two series: Highcharts.chart('container', { xAxis: { categories: [ 'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec' ] }, tooltip: { shared: true }, series: [{ data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4] }, { data: [216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5] }] });

Highcharts States Not Working on Highmaps mappoint click

I am trying to change the color and borderColor of a lat/long point on a Highmap when a user clicks it. Currently when a user clicks that point it turns grey with a thick black border and a "glow" effect around it. I would like it to turn a color of my choosing. I have set the options as follows: plotOptions: { series: { tooltip: { headerFormat: '', pointFormat: '{point.name}' }, states: { select: { color: '#EFFFEF', borderColo

Replacing highcharts.each in my code as it is being deprecated

I have some highcharts which are synchronized and use the following code to synchronise the crosshairs as the mouse is moved: //catch mousemove event and have all charts' crosshairs move along indicated values on x axis function syncronizeCrossHairs(chart) { ['mousemove', 'touchmove', 'touchstart'].forEach(function(eventType) { var container = $(chart.container), offset = container.offset(), x; container[0].addEventListener(eventType, (function(evt) { x = evt.clientX - chart.plotLeft

Highcharts warning: Invalid attribute 'src' in config

Hi I started getting the warning in Title. It used to work but now it does not work anymore :( Any tips would be greatly appreciated! Here is a jsfiddle. When hovering mouse over one of the two dots, the error is triggered from line 204 in the JS. It should display an image: https://jsfiddle.net/yngtp9xv/ tooltip: { useHTML: true, borderWidth: 0, shadow: false, formatter: function() { return '<img src="./Earthmap.jpg" width="180" height="90" />' },

Highcharts Print button is duplicating content

I was creating chart with an additional legend at the bottom with exporting functionality. Now I've got a strange effect: When opening the printing context menu and choosing one of the download options (PNG/JPG/PDF/SVG) the menu in the bottom of the chart gets duplicated. var chart = new Highcharts.Chart({ chart: { renderTo: 'container' }, xAxis: { categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] }, navigation: { buttonOptions: {

Highcharts Solid Gauge Width

I've not found an API or previous question that addresses changing the width of the solid gauge data plot. I can easily change the chart width, plot width, plot padding, arc background's inner and outer widths... but not the chart. How do I prevent the chart (green) from overlapping the background (white)? (Just created account, so can't insert images yet) https://www.dropbox.com/s/dtvekgi9uyxvpww/arc.png pane: { center: ['50%', '70%'], size: '130%', startAngle: -90, endAngle: 90,

Stacklabels on Waterfall Highcharts

I am trying to add stacklabels to the waterfall chart. The stacks with positive 'y' value show the stacklabel but the ones with negative 'y' value are not visible. http://jsfiddle.net/kGH8r/ $(function () { $('#container').highcharts({ chart: { type: 'waterfall' }, title: { text: 'Highcharts Waterfall' }, xAxis: { type: 'category' }, yAxis: { title: { text: 'USD' }, stackLabels: { enabled: tr

Highcharts-browserify desn't work

error: Uncaught TypeError: undefined is not a function But, I download the highcharts.src.js from http://www.highcharts.com/, and change the code at line 1201 from win.jQuery to $, add var $ = require('jquery');, then it work with browserify. It's here something wrong? Thank you

Highcharts Highchart, get total of visible series data after setExtremes

How can I get the total of only those data points in series which are visible after I have updated the highchart line graph using setExtremes. In my jsfiddle clicking on button show get the result 4 but it's stays 5 :( http://jsfiddle.net/deepakgc/hz8fopan/ $(function () { $('#container').highcharts({ chart:{ events:{ load:function(){ $('#total').text(arraySum(this.series[0].processedYData)); } } }, xAxis: { type: 'datetime

Export option not visible in Highcharts

When I generate my Highchart chart it generates complete. The only thing that doesn't show up is the export option. Can anybody figure out what I am doing wrong? Do I need to specify extra CSS styling options of some sort or include another JS script to allow this to work? I can't really figure it out at the moment. chart1 = new Highcharts.Chart({ "chart": { "renderTo": "container", "type": "column" }, "title": { "text": "Doorlooptijd exploten" }, "

yAxis resize controlled axis prev option not working Highcharts

I have some highstock chart series with multiple yAxis. When I used resize enabled to true, a resizer comes and it resizes the chart as well. I want only one resizer at the bottom of 3 series which resizes the previous axis also. I think my top property in yAxis is preventing the charts from going above another axis. Please help. I tried controlled axis previous property. which dint work yAxis: [{ labels: { align: 'right',

  1    2   3   4   5   6  ... 下一页 最后一页 共 28 页