CODEWITHSUNDEEP
highcharts
user45437
user45437

Reputation: 183

How to make the Y Axis values not start from 0 in highcharts? How to display forcefully display the last category data on X axis in HighCharts ?

So, here I am stuck with two things.Even after enough brainstorming, I couldn't figure out what parameters need to be changes to make my graph display the data as desired. Here's the output of my graph: MY Output. I want the output to be something like this: Desired Price Chart

There are basically 2 things which I want to make it work. Firstly,I guess, making to Y label to not start from 0 will make the graph work.But I couldn't figure which parameter I need to change.

Secondly, for X Axis data, I am passing an array of dates as Category to XAxis series. And I want to display dates at the interval of seven days. I have successfully implemented that. The issue which I am facing is, I want to forcefully display the today's date. Today's date is the last element in the XAxisData Array of my code which I am passing to the 'categories' for X Axis. So, my question here is, how do I forcefully display the last element of the A Axis categories? (optional question)Is there a better way to do that, by using datetime? Here's my code for the graph:

function setPriceParameterAndDisplay(){
document.getElementById('container').style.visibility='visible';
Highcharts.chart('container', {
    chart: {
        type: 'area'
    },
    title: {
        text: StockHeading ,
    },
    subtitle: {
         text: '<a style=\"color:blue;\" href=\"https://www.alphavantage.co\">Source: Alpha Vantage</a>'
    },
    xAxis: {
        categories: XAxisData,
          minTickInterval: 6,

   showLastLabel: true,

    },
    yAxis: [{
        title: {
            text: 'Stock Price',
        },
         },{
        title: {
            text: 'Volume '
        },
        labels: {
            format: '{value}m',
        },
        opposite:true,

    }],
    plotOptions: {
    label: {
    enabled: false,
},
        line: {

            enableMouseTracking: true
        },
        series: {
        marker: {
                enabled: false
            },}
    },
    legend: {
        layout: 'vertical',
        align: 'right',
        verticalAlign: 'middle'
    },
    series: [{
        name: '".$symbol."',
        label: {
    enabled: false,
},
        type: 'area',
        color: '#F66464',
        data: PriceData,
        tooltip: {
                valueDecimals: 2
            }

    }, {
        name: '".$symbol." Volume' ,
        label: {
    enabled: false,
},
        type: 'column',
        color: '#FFFFFF',
         yAxis: 1,
        data: StockVolume,
        tooltip: {
                valueDecimals: 2
            }


    }]
});}

Upvotes: 2

Views: 5213

Answers (1)

Kamil Kulig
Kamil Kulig

Reputation: 5826

1. Make area series not to start from zero (y axis)

You need to specify a threshold property for this series. By default it's 0 and that's the cause of your problem.

API reference: https://api.highcharts.com/highcharts/series.area.threshold

2. Force the x axis label to be always displayed for the last point

By default Highcharts automatically calculates and decides which ticks to show. Labels appear where the ticks do. So to make sure that some specific tick appears on the axis use tickPosition (define all ticks manually) or tickPositioner (modify the ticks created by Highcharts before passing them to the chart constructor).

API references:

Upvotes: 4

Related Questions