Need to join x axis and y axis label highcharts

Question

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 .

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!!!

score 2 · Accepted Answer · answered Mar 01 '19 at 06:48

2

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

answered Mar 01 '19 at 06:48

ppotaczek

36,341
2
14
24

Thank you can I add the dropdown as well? – Profer Mar 01 '19 at 06:57
Hi @Profer, I think it will be best if you create the dropdown as a HTML element. – ppotaczek Mar 01 '19 at 07:02
Do you mean a separate html div and put it on the front of the map? – Profer Mar 01 '19 at 07:04
@Profer, Yes, I think it will be the simplest to achieve. – ppotaczek Mar 01 '19 at 07:22

Need to join x axis and y axis label highcharts

1 Answers1