CODEWITHSUNDEEP
angularjshighcharts
Gaurav Radadiya
Gaurav Radadiya

Reputation: 231

How we configure highchart x axis start from first tick?

I am learning highchart with angularJs, first tick of x axis is not starting from 0 or we can say that left most corner of chart, here I attached screen shot of output which I am having now,

Line chart Image - not x axis first tick start form left most corner.

Column chart view - not x axis first tick start form left most corner.

For this I refer this solution which worked but not working properly when only 2 values are there on x-axis it displayed 0.5 only on center on x axis, not showing actual value.

I am doing like this in my example, 

xAxis: {
                  labels: {
                            enabled: true,
                            formatter: function () {
                                return this.value; 
                            }
                        },
                        tickmarkPlacement: 'on',
                        gridLineWidth: 0,
                        minPadding: 0,
                        maxPadding: 0,
                        startOnTick: true,
                        endOnTick: true,
                        align: "left",
                        lineColor: 'transparent'
                    }

Can anyone please guide me for the same.?

Upvotes: 1

Views: 2627

Answers (2)

Saumyajit
Saumyajit

Reputation: 746

Add the following for the required functionality, it will start from leftmost point :

plotOptions: {
          series: {
            findNearestPointBy: 'x',
            label: {
              connectorAllowed: false
            },
            pointPlacement: 'on'
          }
        }

Upvotes: 2

Priya-Systematix
Priya-Systematix

Reputation: 119

I think set Y-axis min value and X-axis min value. 

xAxis: {
  labels: {
    enabled: true,
    formatter: function () {
      return this.value;
    }
  },
  tickmarkPlacement: 'on',
  gridLineWidth: 0,
  min: 0,
  maxPadding: 0,
  startOnTick: true,
  endOnTick: true,
  align: "left",
  lineColor: 'transparent'
},
yAxis: {
  min: minYAxisValue,
  max: maxYAxisValue
}

Hope so it may be helpful..

Upvotes: 0

Related Questions