Browsing the High Charts category

High Charts Graph has missing data point

With the title as the main issue; and additional background being that my graph was using an HTML data table, the solution was to add a THEAD and TBODY to the table.

Read the article

HighCharts x-axis label error

I had a graph in HighCharts, and the x-axis had auto-generated values.  The error was because the values were numbers; not strings. Adding in a space didn’t work, nor did adding in “ ” . The solution was, in the label, add a SPAN with a style of “display:none” … I added in the “use HTML: true” attribute in the graph, although it didn’t seem to need it.

Read the article

HighCharts don’t show 0 in graph

In Highcharts, I had a column graph with some of the values being “0” that I didn’t want to show up in the graph itself.  The trick was to format it, such that if the size of the label was smaller than the area it would go into, don’t show it:

column: {

formatter: function() {
if (this.point.yBottom – this.point.plotY > 13)
return this.y;
return ”;


Read the article

highcharts shows &

I had a highcharts graph that was showing “&” instead of just “&” – it was in the header and in the legend.  The graph was based off a HTML table, and the value was correctly displaying there.  To get around this, just specify useHTML:true

legend: {

                                                verticalAlign: ‘top’,



                                credits: {enabled: false},

        tooltip: {

            pointFormat: ‘<span style=”color:{series.color}”>{}</span>: <b>{point.y} Hours</b> ({point.percentage:.0f}%)<br/>‘,

            shared: false,



Read the article

high charts graph with data next to it

A coworker had a graph (in High Charts), and a data table next to it.  Depending on the size of the monitor, it would occasionally overlap.  Instead, it should appear next to it (if available), or below it (if not).  We tried various experiments with the CSS (“float:left”), but couldn’t get it initially.

Eventually, he got it.  The solution: on the DIV with the graph in it, set the “min-width” equal to the width of the graph.

Read the article

Waterfall graph in HighCharts doesn’t work in IE8 when using Bootstrap CSS

I’m using HighCharts for jQuery graphs on the web.  I’m also using Bootstrap for some CSS (specifically, a table).  Everything works in Chrome, but of course it doesn’t work in IE8 (what my users have).

Specifically, the “waterfall” graph doesn’t show correctly in IE8 – but only when also using Bootstrap.  After a lot of investigation, I realized it was the Bootstrap CSS file (and not the jQuery that I originally thought).

First I grabbed the non-minified version, and taking out everything, one-by-one (of course, in large chunks) to figure out what the problem was. Surprisingly, here’s the culprit:

body {

  font-family: “Helvetica Neue”, Helvetica, Arial, sans-serif;

  font-size: 14px;

  line-height: 1.428571429;

  color: #333;

  background-color: #fff;



Specifically, it was the one line:  line-height: 1.428571429;

One you remove that, it worked! For me, in the version of Bootstrap I was using, it was around line 280.

Maybe IE8 has some sort of limit on a maximum decimal point precision for the line-height… but it was somehow conflicting with how the HighCharts graph was being loaded.  By removing that one line (of the ~6,000) this caused the waterfall graph in HighCharts to correctly work in IE8 when also using Bootstrap!

Read the article

highcharts get x axis value

I have a HighCharts (line) graph, and when you click on a datapoint, I needed to find out the x-axis value that it was associated with.  I ended up passing in the “event” variable into the console (to look at in Google Chrome) to find that it was the event.point.category that told me.

	plotOptions: {
            line: {
              events: {
                   click: function(event) {
                       alert( + '- ' + event.point.category );

Read the article

Listen to you customer, then ignore them

A non-technical lesson learned: figure out what the customer wants.  I remember reading that developers should listen to the customer, and then ignore them!  (Unfortunately I can’t remember where I read that  that – it was probably “Getting Real” or “Don’t Make Me Think” – I did a quick Google search for the quote but couldn’t find it.)

I had some rather complicated code that was used to generate graphs on the web ( – which I highly recommend).  After running the SQL through a recordset, I created a few (dynamic) arrays. (I was using ASP, but really it could be for PHP or any language).

I had to work on a brand new project for a customer, which involved graphs.  Of course I started from something I had already made.  But getting the graphs to work in my existing code was a bit tricky.  I would have to had get the data, transpose it, and then use that new data for the graph.  I was better off with a brand new SQL statement and getting a sample graph from the documentation to start from scratch.

Lesson learned: find out what the customer wants – if they only need something simple, then there’s no need to use complicated (but working) code to replicate it.

Read the article

Highcharts API reversedStacks for yAxis doesn’t work

Using API for graphs (which is excellent by the way), I had to make a stacked column graph, with the bars reversed (the first value in my series had to be on the bottom instead of the top).  And it had to be reversed because I had a specific color combination (it wasn’t as simple as reversing the sort order in my SQL statement: the color order wouldn’t reverse).

I needed to use the “reversedStacks” property of “yAxis” but it wasn’t working:

yAxis: {

reversedStacks: false



I started by taking a working demo I found online and putting that javascript in my code.  When that didn’t work, I realized it must have been the source files that was wrong (outdated).

The solution: the version of HighCharts I was using was an outdated one.  I downloaded the current version and it worked.

The API documentation is very helpful: it said that this feature (reversedStacks) was only as of version 3.0.10 .

User Experience tip: when you do this, also reverse the legend of the graph


Read the article