Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Axes labels on Data Chart

In regards to this sample   Is it possible to get rid of the legend and instead display those country names above each of the years? So below each bar will be the label for the respective country. Is this possible or no? I know it is possible to hover over and display the country name but I would also like the text label to already be there. 

Thanks for the help!

  • 16310
    Offline posted

    Hello Andrew,

    It is easy to get rid of the legend -  just do not initialiaze it by setting the "legend" option.

    Since you want to display the country names below each bar I suggest you the following 2 possibilities:

    1) Use the formatLabel option of the axis to format the label text. Your code will look like this:

    name: "xAxis",
    type: "categoryX",
    label: "Year",
    formatLabel: function (item) {
       var ret = "CountryName" + "\n" + item.Year;
       return ret;

    Please note that this function returns as a result


    but the line break will be rendered as an empty space and not as an actual line break. In the chart this label will look like

    CountryName Year

    I guess this is not suitable for you so you can go for the other possible solution:

    2) Manually add the labels to the canvas at the position you want

    Such implementation is already discussed in the forum and demonstrated with a sample here:

    I hope this answers your questions. Please do not hesitate to contact me if you have any further questions.