Flot Chart - remove tick labels between points

Question

I have a Flot chart that shows date in x axis tick labels, but is showing labels between points. I want to show the x axis tick labels only when I have values (points). Is this possible?

See this picture of my chart:

And below is my code:

sin.push([dataToTimestamp('01/03/2017'), 60000]);
sin.push([dataToTimestamp('02/03/2017'), 70000]);
sin.push([dataToTimestamp('03/03/2017'), 50000]);


cos.push([dataToTimestamp('01/03/2017'), 50000]);
cos.push([dataToTimestamp('02/03/2017'), 80000]);
cos.push([dataToTimestamp('03/03/2017'), 70000]);


var line_data1 = {
  data: sin,
  color: "#3c8dbc"
};
var line_data2 = {
  data: cos,
  color: "#00c0ef"
};
$.plot("#line-chart", [line_data1, line_data2], {
  grid: {
    hoverable: true,
    borderColor: "#f3f3f3",
    borderWidth: 1,
    tickColor: "#f3f3f3"
  },
  series: {
    shadowSize: 0,
    lines: {
      show: true
    },
    points: {
      show: true
    }
  },
  lines: {
    fill: false,
    color: ["#3c8dbc", "#f56954"]
  },
  yaxis: {
    show: true,
  },
  xaxis: {
    show: true,
    mode: "time", 
    timeformat:"%d/%m/%y",
    //timeformat:"%d/%m/%y %H:%M:%S",
    //tickSize: [4, 'hour']
  }
});

Btw: What you call legend are called axis tick labels by Flot. The legend contains the labels for the dataseries (not included in your example). — Raidri

Raidri Raidri · Accepted Answer · 2017-03-17T09:47:23

You can try to use

tickSize: [1, 'day']

in the xaxis options or specify the ticks directly yourself with

ticks: [dataToTimestamp('01/03/2017'), dataToTimestamp('02/03/2017'), dataToTimestamp('03/03/2017')]

See the documentation for more help.

Flot Chart - remove tick labels between points

1 Answers