CODEWITHSUNDEEP
javascriptreactjshighchartsreact-highcharts
Profer
Profer

Reputation: 643

Need to join x axis and y axis label highcharts

I am trying to join the nodes of the x axis and the y axis of the area spline chart. Here is my fiddle and also I need to move title and subtitle at the left corner and need to integrate dropdown. Basically I need graph something like this enter image description here.

Highcharts.chart('container', {
    chart: {
        type: 'areaspline'
    },
    title: {
        text: 'Total Visitors',
        x: 0,
    },
    subtitle: {
      text: 'This is all users that visited your site',
        x: 0,
    },
    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'June', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
    },
    yAxis: {
        title: {
            text: ''
        }
    },
    tooltip: {
        shared: true,
        valueSuffix: ' units'
    },
    credits: {
        enabled: false
    },
    plotOptions: {
        areaspline: {
            fillOpacity: 0.5
        },
        series: {
          marker: {
            enabled: false
          },
          lineWidth: 2,
          states: {
            hover: {
              enabled: false
            }
          }
        }
    },
    series: [{
      lineColor: '#8b8bff',
            color: '#c5c6ff',
            showInLegend: false,
            lineWidth: '4px',
        name: 'John',
        data: [37, 25, 50, 20, 37, 28, 50, 42, 70, 46, 55, 26]
    }]
})

Kindly help Thank you!!!

Upvotes: 0

Views: 386

Answers (1)

ppotaczek
ppotaczek

Reputation: 39139

To start axes ticks in the same place set tickmarkPlacement to on and also set min and max.

To move title and subtitle to the left corner use align property:

title: {
    ...,
    align: 'left'
},
subtitle: {
    ...,
    align: 'left'
},
xAxis: {
    tickmarkPlacement: 'on',
    min: 0.5,
    max: 10.5,
    ...
}

Live demo: https://jsfiddle.net/BlackLabel/w7p6rL8o/

API Reference: https://api.highcharts.com/highcharts/title.align

Upvotes: 2

Related Questions