CODEWITHSUNDEEP
javascriptjqueryflot
pythonian29033
pythonian29033

Reputation: 5207

Flot tick rotor showing ticks twice

so I used the flot-tickrotor plugin to rotate the ticks on the xaxis of my flot chart, the problem now though is, it shows up twice;

enter image description here

do any of you know why this is happenning?

here's the code I'm using for this, you'll notice I'm not specifically adding the ticks;

        //sample data
    var mainDataSet = {name:'1 - WOMENS OUTERWEAR',     Actual: 181.8,  Budget:15.7,  BudgetVar: 8.4 } ,
                        {name:'2 - WOMENS LINGERIE',      Actual: 12.5,   Budget:6.0,   BudgetVar: -1.3 } ,
                        {name:'3 - KIDSWEAR',             Actual: 8.7,    Budget:13.2,  BudgetVar:0.8 } ,
                        {name:'5 - MENSWEAR',             Actual: 4.9,    Budget:4.4,   BudgetVar: 0.5 } ,
                        {name:'6 - WOMEN FOOTWEAR+ACCES', Actual: 354.0,  Budget:16.5,  BudgetVar: 14.7 }
                      ];

    var graph_options = { 
        series: {
          lines: { show:false , fillColor:'#CDD0D1', fill:true},
          points: { show: false },
          color: '#3B80F7',
        },

        grid: {
          hoverable: true, 
          clickable: true, 
          show:true, 
          borderWidth: 0.5,
          backgroundColor: { colors: ["#FFF", "#CDD0D1"] }
        },
        xaxis: {
          mode: "categories",
          //tickLength: 1,
          rotateTicks: 45
        }
    };

    var barGraphData = []; //graph_settings
    var graph_settings = {label: dataSets[c].label, 
      data: mainDataSet, 
      bars: { show: true , align: "center", barWidth: 0.5},
      color: '#3B80F7'
    };

    barGraphData.push(graph_settings);

    var barGraph = $.plot($("#bar_graph_canvas"), barGraphData, graph_options);

Upvotes: 0

Views: 1260

Answers (1)

pythonian29033
pythonian29033

Reputation: 5207

Ok, so according the issue log for flot charts this is a known issue for flot since 0.8.1, the work around is to add this in your styling until the issue is resolved;

div.xAxis div.tickLabel { display:none }

NB: make sure you put this in a style tag INSIDE YOUR HEAD TAG or BEFORE you include your flot chart plugin, so that the default styling can be overridden

Upvotes: 3

Related Questions