Incubator-echarts: how to display months in xAxis and how to dynamically change it to stop on the current month-Line Graph

[JoaoEscobar1]

hello everyone i have no idea how to display months in the xAxis and make it dynamic. i mean if i am in April the chart only displays : January, February, March, April

Thanks and much apprecciate

[WeiFei365]

what show in the xAxis is up to you; you can set :

xAxis[0].data = ['January', 'February', 'March', 'April'];

if your echarts' version > 3.0, you also can set:

option = {
    // ...others

    xAxis: [
        {
            data: [
                { value: 'Jan', label: 'January' }
                { value: 'Feb', label: 'February' }
                { value: 'Mar', label: 'March' }
                { value: 'Apr', label: 'April' }
            ],
            axisLabel: {
                formatter: function(d) {
                    return d.label;
                }
            }
        }
    ]

    // ...others
};

please open this page to test your option inline: http://echarts.baidu.com/demo.html#bar-tick-align

[JoaoEscobar1]

when i try to use your code i get this error SyntaxError: "missing ] after element list
{ value: 'Feb', label: 'Fev' }"

I had issues because it seems that i can't display those 12 months of the year it seems that the default is only 7 values so in this case: [ January,February,March,April,May,June,July] only

xAxis: [
    {
      type: 'category',
      boundaryGap: false,
      data:[
            { value: 'Jan', label: 'January' }
            { value: 'Feb', label: 'February'}
            { value: 'Mar', label: 'March' }
            { value: 'Apr', label: 'April' }
            { value: 'May', label: 'March' }
            { value: 'Jun', label: 'June' }
            { value: 'Jul', label: 'July' }
            { value: 'Aug', label: 'August' }
            { value: 'Sep', label: 'September'}
            { value: 'Oct', label: 'October' }
            { value: 'Nov', label: 'November' }
            { value: 'Dec', label: 'December' }
        ],
        axisLabel: {
            formatter: function(d) {
                return d.label;
            }
        } 
    }],
    yAxis: [{
      type: 'value'

update: Seems that i can't display in my xAxis more than 7 items by default how do i make to display in the xAxis ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec']? This is what i want

[JoaoEscobar1]

[cid:463b3f17-864e-4dfa-804f-5f36842615a2]

This is the problem that i am facing i want to display 12 months and it seems it can only display 7 months ending in July. WHat can i do to solve this problem? in data i have data: ["Jan","Feb","Mar","April","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"]. But it still only displays the first 7

---

From: weixiao [email protected]
Sent: Thursday, November 17, 2016 3:26 AM
To: ecomfe/echarts
Cc: JoaoEscobar1; Author
Subject: Re: [ecomfe/echarts] how to display months in xAxis and how to dynamically change it to stop on the current month-Line Graph (#4494)

what show in the xAxis is up to you; you can set :

xAxis[0].data = ['January', 'February', 'March', 'April'];

if your echarts' version > 3.0, you also can set:

option = {
// ...others

xAxis: [
    {
        data: [
            { value: 'Jan', label: 'January' }
            { value: 'Feb', label: 'February' }
            { value: 'Mar', label: 'March' }
            { value: 'Apr', label: 'April' }
        ],
        axisLabel: {
            formatter: function(d) {
                return d.label;
            }
        }
    }
]

// ...others

};

please open this page to test your option inline: http://echarts.baidu.com/demo.html#bar-tick-align

You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHubhttps://github.com/ecomfe/echarts/issues/4494#issuecomment-261145102, or mute the threadhttps://github.com/notifications/unsubscribe-auth/AWTszUWIGKupgigWwK9cztxLbAGsNJzrks5q-8mAgaJpZM4Kzv7F.

[WeiFei365]

Sorry so long time to reply to you!

in my last msg, the option is not completed; please use this:

option = {
    color: ['#3398DB'],
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis : [
        {
            type : 'category',
            data : [
                { key: 'Jan', label: 'January' },
                { key: 'Feb', label: 'February'},
                { key: 'Mar', label: 'March' },
                { key: 'Apr', label: 'April' },
                { key: 'May', label: 'March' },
                { key: 'Jun', label: 'June' },
                { key: 'Jul', label: 'July' },
                { key: 'Aug', label: 'August' },
                { key: 'Sep', label: 'September'},
                { key: 'Oct', label: 'October' },
                { key: 'Nov', label: 'November' },
                { key: 'Dec', label: 'December' }
            ],
            axisLabel: {
                // force to display all labels
                interval: 0,
                formatter: function(d) {
                    return d.label;
                }
            }
        }
    ],
    yAxis : [
        {
            type : 'value'
        }
    ],
    series : [
        {
            name:'TEST',
            type:'bar',
            barWidth: '60%',
            data:[10, 52, 200, 334, 390, 330, 220, 10, 52, 200, 334, 390]
        }
    ]
};

---

And please make sure option.xAxis[0].data.length === option.series[0].data.length; because the option.xAxis[0].data is for the x-axis, the option.series[0].data is for the bars;

As for your axis only display 7 labels, i guess your option.series[0].data.lengthis 7;

Also, I made a mistake, in the option.xAxis[0].data, if the data item is a abject, please don't use the value key, otherwise, the option.xAxis[0].axisLabel.formatter function's argument will be a string, not a object