CODEWITHSUNDEEP
javascriptjquerymathchartsflot
Mr. B.
Mr. B.

Reputation: 8717

Flot charts: how to add a beginning and ending tick?

I'm trying to add two vertical lines (ticks) to my chart (Flot) to display the min.- and max.-values more clear. I don't mean the grid-border!

I tried to calculate the distances, new min./max. values and format it via the axis-options tickFormatter, tickSize, etc. - but I wasn't able to finish it.

The distance between the lines has to be equivalent (preview below).

Is there any setting, snipped or workaround to make this possible?

Feel free to play with the fiddle: http://jsfiddle.net/EK8Fk/1/ 

$(function () {    
    var data = [
        [10, 10], [-37.5, 20], [30, 30], [40, 40], [83.8, 50]
    ];

    var options = {
        series:{
            bars:{show: true}
        },
        bars:{
            horizontal:true,
            barWidth: 8
        },
        grid:{
            borderWidth: 0
        },
        xaxis: { 
            color: "#FF0000" 
        },
        yaxis: { 
            tickColor: "#FFFFFF",
            ticks: [[10, "A"], [20, "B"], [30, "C"], [40, "D"], [50, "E"]] 
        }
    };

    $.plot($("#flotcontainer"), [data], options);  
});

That's how it should look like:

enter image description here

Thanks a lot in advance!

Upvotes: 2

Views: 1556

Answers (1)

Deepak Ingole
Deepak Ingole

Reputation: 15772

Here is simple solution to your issue:

Just define min and max values for x axis,

xaxis: { 
        min:-40.0,
        max:100,
        color: "#FF0000" 
    },

Here is your working fiddle

Upvotes: 3

Related Questions