Extjs chart issue

Question

My Data :

data: [
        [1990,"USA",66,"Canada",53],
        [1992,"USA",66,"Canada",53],
        [1994,"USA",66,"Canada",53],
        [1996,"USA",66,"Canada",53],
        [1998,"USA",66,"Canada",53],
        [2000,"USA",66,"Canada",53],
        [2002,"USA",66,"Canada",53],
        [2004,"USA",66,"Canada",53],
        [2006,"USA",81,"Canada",67],
        [2008,"USA",83,"Canada",46],
        [2010,"USA",61,"Canada",45],
        [2012,"USA",67,"Canada",53],
        [2014,"USA",68,"Canada",43],
        [2016,"USA",68,"Canada",43],
        [2018,"USA",68,"Canada",43],
        [2020,"USA",68,"Canada",43],
        [2022,"USA",67,"Canada",53],
        [2024,"USA",68,"Canada",43],
        [2026,"USA",68,"Canada",43],
        [2028,"USA",68,"Canada",43],
        [2030,"USA",68,"Canada",43],
        [2032,"USA",67,"Canada",53],
        [2034,"USA",68,"Canada",43],
        [2036,"USA",68,"Canada",43],
        [2038,"USA",68,"Canada",43],
        [2040,"USA",68,"Canada",43],
        [2042,"USA",67,"Canada",53],
        [2044,"USA",68,"Canada",43],
        [2046,"USA",68,"Canada",43],
        [2048,"USA",68,"Canada",43],
        [2050,"USA",68,"Canada",43]
    ]

On X-axis I am displaying years.Here is the fiddle : fiddle
Myproblem :

Is their anyway so that i could display years as [1990''''2000''''2010''''2020].I mean their should be 4 minorTicks for years in between which should not be visible.Any help is appreciated.Thanks

Answer 1

You can configure the renderer of your axe's label to return an empty value for the year values you don't want to display:

{
    type: "Category",
    position: "bottom",
    minorTickSteps: 4,
    majorTickSteps: 5,
    maximum:50,
    minimum:0,
    fields: ["year"],
    title: "Year",

    label: {
        renderer: function(v) {
            return v % 10 === 0 ? v : '';
        }
    }
}