hightchart line and column chart , line not start with start of chart

Question

here is my jsFiddle, you can see the black line start with column center,

how to that black line at starting of bar and end it to ending of bar ?

Like below image.

this is a simple task to look, but try all to do it but now working.

I try it with add data value by adding [-1,7.6]

see code ::

{ name: 'Temperature', type: 'line', data: [[-1,7.0], 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6], tooltip: { valueSuffix: '°C' }, step: 'center', rangeSelector: { selected: 0 } but it show '-1' on xAxis see image

Please help :(

Answer 1

This requirement is complex, use this steps .

1>Use Formatter to remove -1 and 12 in xAxis

2>Disable crosshair for xAxis (I updated to false)

3>Add fake column series for point -1 and 12.

4>Disable fake series legend.

5>Disable tooltip for particular point for all series using formatter (got idea form this SO post).

Highcharts.chart('container', {
  chart: {
    zoomType: 'xy'
  },
  title: {
    text: 'Average Monthly Temperature and Rainfall in Tokyo'
  },
  subtitle: {
    text: 'Source: WorldClimate.com'
  },
  xAxis: [{
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
      'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'
    ],
    crosshair: false,
    labels: {
      formatter: function() {
        if (this.pos != -1 && this.pos != 12) {
          return this.value
        }
      }
    }
  }],
  yAxis: [{ // Primary yAxis
    labels: {
      format: '{value}°C',
      style: {
        color: Highcharts.getOptions().colors[1]
      }
    },
    title: {
      text: 'Temperature',
      style: {
        color: Highcharts.getOptions().colors[1]
      }
    }
  }, { // Secondary yAxis
    title: {
      text: 'Rainfall',
      style: {
        color: Highcharts.getOptions().colors[0]
      }
    },
    labels: {
      format: '{value} mm',
      style: {
        color: Highcharts.getOptions().colors[0]
      }
    },
    opposite: true
  }],
  tooltip: {
    shared: true,

    formatter: function() {
      if (this.points[0].point.noTooltip == false) {
        return false
      } else {
        var points = this.points;
        var pointsLength = points.length;
        var tooltipMarkup = pointsLength ? '<span style="font-size: 10px">' + points[0].key + '</span><br/>' : '';
        var index;

        for (index = 0; index < pointsLength; index += 1) {

          if (index == 0) {
            tooltipMarkup += '<span style="color:' + points[index].series.color + '">\u25CF</span> ' + points[index].series.name + ': <b>' + points[index].y + ' mm</b><br/>';
          } else {
            tooltipMarkup += '<span style="color:' + points[index].series.color + '">\u25CF</span> ' + points[index].series.name + ': <b>' + points[index].y + '°C</b><br/>';
          }

        }

        return tooltipMarkup;
      }
    }

  },
  legend: {
    layout: 'vertical',
    align: 'left',
    x: 120,
    verticalAlign: 'top',
    y: 100,
    floating: true,
    backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
  },
  plotOptions: {
    series: {

      marker: {
        enabled: false
      }
    },
    column: {
      stacking: 'normal',
      dataLabels: {
        enabled: false,
      },
      pointPadding: -0.3,
    }
  },
  series: [{
    name: 'Rainfall',
    type: 'column',
    yAxis: 1,
    data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
    tooltip: {
      valueSuffix: ' mm'
    }

  }, {
    name: 'Temperature',
    type: 'line',
    data: [{
      x: -1,
      y: 7.0,
      noTooltip: false
    }, 7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6, {
      x: 12,
      y: 9.6,
      noTooltip: false
    }],
    tooltip: {
      valueSuffix: '°C'
    },
    step: 'center',
    rangeSelector: {
      selected: 0
    }
  }, {
    name: 'Rainfall',
    type: 'column',
    yAxis: 1,
    color: "#fff",
    data: [{
      x: -1,
      y: 50,
      noTooltip: false
    }, {
      x: 12,
      y: 55,
      noTooltip: false
    }],
    tooltip: {
      valueSuffix: ' mm'
    },
    showInLegend: false,
  }]
});

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>