CODEWITHSUNDEEP
javascripthighcharts
kittyhawk
kittyhawk

Reputation: 698

HighCharts Axis Formatting in Chrome

I have data that looks like this:

Time,Speed
Mon May 11,21
Tue May 12,34
Wed May 13,12
Thu May 14,12
Fri May 15,45
Mon May 18,34
Tue May 19,56
Wed May 20,67
Thu May 21,78

I am trying to plot this on a HighCharts line chart with the speed on the y-axis and the time on the x-axis. I would like to keep my time labels as they are in the data. This works in Firefox and Edge. However, Chrome is trying to translate the time into a date value so it messes up the format of the labels. How do I get around this so I can keep my Axis labels the way they exist in the raw data. 

var csv = {this is my data};
var options = {chart: {
                        backgroundColor: '#f6f6f6',
                        type: 'line',
                        style: {
                            fontFamily: 'Arial'
                        },
                        borderWidth: 1,
                        borderColor: "#ddd",
                        borderRadius: "5",
                        zoomType: "xy",
                        renderTo: 'chartContainer',
                    },
                    xAxis: {

                        labels: {
                            formatter: function(){
                                return this.value;
                            }
                        }
                    }
                    data: {
                        csv: data
                    },
                    title: {
                        text: chartTitle
                    }
                    }};

            var chart = new Highcharts.Chart(options);
        }

Upvotes: 0

Views: 38

Answers (1)

ppotaczek
ppotaczek

Reputation: 39099

Use category axis type:

    xAxis: {
        type: 'category',
        ...
    }

Live demo: http://jsfiddle.net/BlackLabel/25ypbo1e/

API Reference: https://api.highcharts.com/highcharts/xAxis.type

Upvotes: 1

Related Questions