CODEWITHSUNDEEP
highcharts
amarkon
amarkon

Reputation: 341

Hide first tick in Highcharts time series

I'm currently working on a time series line chart in Highcharts. I need to add major tick marks on the y-axis for all ticks except the first (i.e. major ticks at 0, 5, and 10 but only 5 and 10 have tick marks). Does anyone know of an easy way to accomplish this?

Upvotes: 0

Views: 3100

Answers (4)

VitalyB
VitalyB

Reputation: 12855

You can use the following:

https://api.highcharts.com/highcharts/xAxis.showFirstLabel https://api.highcharts.com/highcharts/xAxis.showLastLabel

Demo:

Highcharts.chart('container', {
    xAxis: {
        showLastLabel: false,
    },

    series: [{
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
    }]
});
<script src="https://code.highcharts.com/highcharts.js"></script>

<div id="container" style="height: 400px"></div>

Upvotes: 1

IL55
IL55

Reputation: 920

I know it is too late, but may be someone try to find better solution, use

tickPositions: [],

here example http://jsfiddle.net/q602Lsmc/

Upvotes: 0

amarkon
amarkon

Reputation: 341

This obviously isn't ideal because you want your chart configurations to live in your Highcharts definitions, but using pseudo-selectors to hide the last tick is functional.

Highcharts assigns your axis ticks inside of an svg element with the class .highcharts-axis. Assuming you want to hide it for all charts, add the following to your CSS file:

.highcharts-axis :last-child {
    display: none;
}

Upvotes: 1

jlbriggs
jlbriggs

Reputation: 17791

I would recommend the tickPositions property, or the tickPositioner.

It leaves you having to define the placement of all of the ticks that you do want to show, but I don't know of another way to accomplish it, other than editing the SVG directly.

Reference:

Upvotes: 2

Related Questions