CODEWITHSUNDEEP
javascriptdjangohighcharts
Geoff
Geoff

Reputation: 2491

How can I specify the position of the columns relative to the X-axis labels in a column chart using Highcharts?

I have some time series data with well-defined intervals. Here's what the raw data look like:

[((datetime.datetime(1997, 10, 20, 0, 0),
   datetime.datetime(1997, 10, 20, 23, 59, 59)),
  1),
 ((datetime.datetime(1997, 10, 21, 0, 0),
   datetime.datetime(1997, 10, 21, 23, 59, 59)),
  0),
 ((datetime.datetime(1997, 10, 22, 0, 0),
   datetime.datetime(1997, 10, 22, 23, 59, 59)),
  0),
 ((datetime.datetime(1997, 10, 23, 0, 0),
   datetime.datetime(1997, 10, 23, 23, 59, 59)),
  1),
 ((datetime.datetime(1997, 10, 24, 0, 0),
   datetime.datetime(1997, 10, 24, 23, 59, 59)),
  3),
 ((datetime.datetime(1997, 10, 25, 0, 0),
   datetime.datetime(1997, 10, 25, 23, 59, 59)),
  0),
 ((datetime.datetime(1997, 10, 26, 0, 0),
   datetime.datetime(1997, 10, 26, 23, 59, 59)),
  0),
 ((datetime.datetime(1997, 10, 27, 0, 0),
   datetime.datetime(1997, 10, 27, 23, 59, 59)),
  0),
 ((datetime.datetime(1997, 10, 28, 0, 0),
   datetime.datetime(1997, 10, 28, 23, 59, 59)),
  1),
 ((datetime.datetime(1997, 10, 29, 0, 0),
   datetime.datetime(1997, 10, 29, 23, 59, 59)),
  4),
 ((datetime.datetime(1997, 10, 30, 0, 0),
   datetime.datetime(1997, 10, 30, 23, 59, 59)),
  6),
 ((datetime.datetime(1997, 10, 31, 0, 0),
   datetime.datetime(1997, 10, 31, 23, 59, 59)),
  0),
 ((datetime.datetime(1997, 11, 1, 0, 0),
   datetime.datetime(1997, 11, 1, 23, 59, 59)),
  0),
 ((datetime.datetime(1997, 11, 2, 0, 0),
   datetime.datetime(1997, 11, 2, 23, 59, 59)),
  0),
 ((datetime.datetime(1997, 11, 3, 0, 0),
   datetime.datetime(1997, 11, 3, 23, 59, 59)),
  2),
 ((datetime.datetime(1997, 11, 4, 0, 0),
   datetime.datetime(1997, 11, 4, 23, 59, 59)),
  0)]

You can see that there are tuples that define the exact start and end of each interval. I want to draw a Highcharts column chart that exactly mimics the data above. https://jsfiddle.net/kvh4zt2k/ is what I currently have:

current graph

The problem is that this doesn't mimic my data exactly. Notice how the columns are centered on each X-axis label. In order to display my intervals exactly, I want the X-axis labels to be exactly on the left edge of each column. Here's a crappy photoshop that illustrates how the columns should be aligned relative to the X-axis labels:

goal graph

I've scoured the API docs and tried a bunch of things without success. How can I do this?

Upvotes: 0

Views: 97

Answers (1)

Paweł Fus
Paweł Fus

Reputation: 45079

Set pointPlacement: "between", see: http://jsfiddle.net/kvh4zt2k/1/

API reference.

Upvotes: 1

Related Questions