2

I am using Highstocks. I have a series graph with multiple range selectors. My data is coming in JSON format form c# code behind. The problem I am facing is that for some range selectors my graph line starts from extreme left though I want it to start from the first tick value OR Ideally my first tick value should be on left most. For example: In below image the line should start from 8 January OR the 8 January should be on the left most side.

I have already tried StartOnTick = true, PointPlacement = 'on' but nothing works for me. Is there a way to force the graph line to start from tick?

I am adding a fiddle of this problem. Click on 1day selector to see the problem. I just need to start tick value from extreme left for every selector.

Fiddle link

 Highcharts.stockChart('dynamicGoldChart', {


   scrollbar: {
     enabled: false
   },
   xAxis: {
     alternateGridColor: true,
     //startOnTick: true,

     labels: {

       rotation: 0, //280
       style: {
         'color': 'black',
         'fontSize': '11px',
         'font-weight': 'bold'
       }
     }

   },
   yAxis: {
     labels: {
       align: 'left',
       format: '{value:.0f}',
       x: 0,
       y: -2,
       style: {
         'color': 'black',
         'fontSize': '11px',
         'font-weight': 'bold'
       }
     },

     title: {
       text: 'Per Ounce',
       style: {
         'color': 'black',
         'fontSize': '14px',
         'font-weight': 'bold'
       },


     }
   },


   rangeSelector: {


     buttons: [{
         count: 10,
         type: 'minute',
         text: '10m',
         dataGrouping: {
           enable: false,
           approximation: 'close'
           //forced: true,
           //units: [['minute', [1]]]

         }

       },

enter image description here

Waqar ul islam
  • 418
  • 4
  • 17
  • Could you reproduce a simplified demo of your issue with sample data on some online editor which I could work on? – Sebastian Wędzel Jan 13 '21 at 09:38
  • @SebastianWędzel I have added a fiddle with some data. – Waqar ul islam Jan 13 '21 at 10:15
  • After digging into this problem I think that the only solution for this case is creating a custom rangeSelectors and use the `Axis.setExtremes` feature to set extremes exactly as the point value. Demo: https://jsfiddle.net/BlackLabel/sfqnpath/ API: https://api.highcharts.com/class-reference/Highcharts.Axis#setExtremes – Sebastian Wędzel Jan 14 '21 at 10:30

0 Answers0