bar chart saved as html file using mpld3 shows x-axis ticks on top

Question

I have a python code that stores the barchart as html file using the mpld3 save_html method. However, when I render the html file, the barchart shows x-axis ticks on the top as shown below.

I don't want the ticks to be shown at all & also no tick labels but want the x-axis line at the bottom. I thought I had done the required steps to prevent that from happening. Please see the code below. I would greatly appreciate any help here. I am blanking out.

 fig1,ax1=plt.subplots()
      dsize=fig1.get_size_inches()    
      fig1.set_size_inches((dsize[0]/2)*(1.5),(dsize[1]/2)*(1.25))

      m_colors=  ['red','green','blue','yellow','black','cyan','aqua','brown','coral','magenta','khaki','indigo','lavender','navy','olive','pink','plum','teal','tan','violet','wheat','orchid']
     bucket=['apple','banana','orange','lemon','pineapple']
     counts=[10,20,5,16,2]
     rects = ax1.bar(bucket,counts,color=m_colors)
     ax1.set_xlabel('Service Types')


ax1.set_ylabel('Anomalous Flow per Service Type')
ax1.tick_params(axis='x',which='both',bottom='off',top='off',labelbottom='off')
ax1.xaxis.set_label_position('bottom') 
for rect in rects:
    height = rect.get_height()
    ax1.text(rect.get_x() + rect.get_width()/2., 1.05*height,
            '%d' % int(height),
            ha='center', va='bottom')
#leg=ax1.legend((rects),(unique))

legend_font_props = FontProperties()
legend_font_props.set_size('xx-small')
leg=ax1.legend((rects),(bucket),loc='upper right',prop=legend_font_props)


mpld3.save_html(fig1,"test.html")

Answer 1

Mpld3 is not perfectly recreating matplotlib figures, it only tries to get close to the same appearance. In this case it seems to have problems replicating the axis parameters.

If you replace the lines

ax1.tick_params(axis='x',which='both',bottom='off',top='off',labelbottom='off')
ax1.xaxis.set_label_position('bottom') 

by

ax1.set_xticks([])

The result would look like

which seems close to what you want.