Catherine
Catherine

Reputation: 747

How to format the xAxis of Highcharts

I am trying to edit the way the x-axis of my Highchart is presented. I use a csv file as the input so by default Highchart uses the first column in the csv file to for the x-axis. I cannot change the format of the csv file.

Currently for each row of data the x-axis appears as: '02/15/2016 10:31:46','02/15/2016 10:41:46','02/15/2016 10:51:46'

I would like to just show the time so if it were a string something like date_and_time_string[10:] to produce '10:31:46','10:41:46' and 10:51:46

However I am having trouble implementing this. I have tried the above square brackets method, and then circle brackets as well as the slice function but it makes no change to the formatting.

Below is my current code with the unsuccessful x-axis formatting included:

             $.get(data, function(csv) {
                $('#container').highcharts({
                  chart: {
                    zoomType: 'x',
                    type: 'column',
                  },
                  data: {
                    csv: csv,
                    lineDelimiter: "\n",
                  },
                  title: {
                        text: 'CSV file data'
                    },
                  yAxis: {
                      title: {
                          text: 'Bytes'
                      }
                  },
                  xAxis: {
                    labels: {
                      format: '{data}'.slice(10,-2)
                    }  
                  },
                  plotOptions: {
                      series: {
                          marker: {
                              enabled: false
                          }
                      }
                  }
                }); 
              });

Upvotes: 0

Views: 73

Answers (1)

Jaromanda X
Jaromanda X

Reputation: 1

use formatter function

              xAxis: {
                labels: {
                  formatter: function() {
                      return this.value.slice(10,-2);
                  }
                }  
              },

Upvotes: 2

Related Questions