How to add marker(label) on flotr2 bar stack?

Question

I use flotr2, I wrote a test here. http://jsfiddle.net/yKqXM/

If I want to show label on each bar stack, should I use "marker" type? and how do I use it. I am new to flotr2, could you give me an good study article or docs, so I can study it. Sorry if this question is stupid, but I am frustrated of looking for the example.

Matt

Answer 1

Yup, you can use the 'markers' attribute. You can actually just place this fragment after the bars type (you can use both at once):

markers: {
  show: true,
  position: 'ct',
},

However, there is a small problem with this. Flotr2 doesn't respect the stacked positions for markers, so the marker labels will end up in the wrong position.

To get around this, create some dummy data sets which are the summation of the stacks, and move the 'bars' and 'markers' to be directly specified on the separate data sources. The bit after the data is listed is just the "default" mode for each data source.

Answer 2

There are many quite useful opts for markers. See the library source.

Flotr.addType('markers', {
    options: {
      show: false,           // => setting to true will show markers, false will hide
      lineWidth: 1,          // => line width of the rectangle around the marker
      color: '#000000',      // => text color
      fill: false,           // => fill or not the marekers' rectangles
      fillColor: "#FFFFFF",  // => fill color
      fillOpacity: 0.4,      // => fill opacity
      stroke: false,         // => draw the rectangle around the markers
      position: 'ct',        // => the markers position (vertical align: b, m, t, horizontal align: l, c, r)
      verticalMargin: 0,     // => the margin between the point and the text.
      labelFormatter: Flotr.defaultMarkerFormatter,
      fontSize: Flotr.defaultOptions.fontSize,
      stacked: false,        // => true if markers should be stacked
      stackingType: 'b',     // => define staching behavior, (b- bars like, a - area like) (see Issue 125 for details)
      horizontal: false      // => true if markers should be horizontal (For now only in a case on horizontal stacked bars, stacks should be calculated horizontaly)
  }