CODEWITHSUNDEEP
javascriptjqueryflot
user0187409
user0187409

Reputation: 239

Add horizontal line stack flot chart

I will like to add an horizontal line to a stacked flot chart. Thought that I could just create a shaded area but got stuck on how to remove the rest of the area below it. Here is a working fiddle: http://jsfiddle.net/cefx1eq2/1/ where the labeled "horLine" is where I will like as an example add an hypothetical line like that could mean average, or any type of limit.

Section of data where need help:

{
   "label": "horLine",
   "color": "#000",
   "data": [ ["Comment", 125] ] //changing this data to be only a line
}

Upvotes: 0

Views: 1356

Answers (1)

mechenbier
mechenbier

Reputation: 3067

You can add markings to the grid options of your chart to draw a line.

grid: {
    markings: [ { xaxis: { from: 0, to: 2 }, yaxis: { from: 10, to: 10 }, color: "#bb0000" }, ... ]
}

An example of drawing a black horizontal line through your chart at 125 would look like this:

grid: {
    borderColor: '#eee',
    borderWidth: 1,
    hoverable: true,
    backgroundColor: '#fcfcfc',
    markings: [{ yaxis: { from: 125, to: 125 }, color: "#000000" }]
}

Upvotes: 2

Related Questions