Question 335818 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – How to show X-axis label for the only points where data is available?

I am plotting a time graph with echarts. I have only two data points I want to show in the graph. The graph shows those two points correctly, but it shows more than 2 labels on x axis (time axis), which is obviously the uniform time difference between those 2 data points. What I want is to see the time labels only for the data points I have. How can I do that?

I tried passing the time values in xAxis.data also, but it is not working.

I have created a demo graph for reference here.

Current Result:
Current Result Chart

Expected Result: Time label should be displayed under the bars only.

Tags:

2

Answers


  1. 0

    One option can be to use splitNumber which defaults to 5 we can set it to 4 and it generates the desired output!

    ...
xAxis: {
  show: true,
  type: "time",
  splitNumber: 4,
  data: [],
  name: "Time",
  ...

    xAxis. splitNumber = 5 (default)

    number

    Number of segments that the axis is split into. Note that this number serves only as a recommendation, and the true segments may be adjusted based on readability.
    This is unavailable for category axis.

    demo

    Login or Signup to reply.
  2. 0

    This approach ensures that time labels are displayed only for the data points you have in your ECharts graph. Adjust the condition inside the formatter function if you have multiple series or need to handle additional scenarios.

        option = {
  // Your existing options
  
  xAxis: {
    // Your existing xAxis configuration
    axisLabel: {
      // Your existing axisLabel configuration
      formatter: function (value, index) {
        // Check if the value corresponds to one of the data points
        for (let i = 0; i < option.series[0].data.length; i++) {
          if (value === option.series[0].data[i][0]) {
            // If the value matches a data point, format and return the time label
            return echarts.format.formatTime('yyyy-MM-ddnhh:mm:ss', value);
          }
        }
        // Return an empty string for values that don't correspond to data points
        return '';
      }
    }
  },
  
  // Your existing options
};
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search