highstock xaxis datetime problem

[klhebs]

HI, I am having trouble to deal the the xaxis tickinterval, I am not sure why it will set to 40 minutes interval
like the image below

Capture.PNG (22 KiB) Viewed 640 times

my xaxis

Code: Select all

        xAxis: {
            startOnTick: true,
            
            endOnTick: true,
            breaks:this.breaks,
            type: 'datetime',
            dateTimeLabelFormats: {
                millisecond: '%H:%M:%S.%L',
                second: '%H:%M:%S',
                minute: '%H:%M',
                hour: '%H:00',
                day: '%m-%e',
                month: '%Y-%m',
                week: '%Y-%m',
                year:'%Y-%m',
            },
            tickInterval : 60*1000,
            ordinal:false,
        },
        

my plotOptions

Code: Select all

plotOptions: {
            series: {
                // general options for all series
                // color: '#9dc8f1',
                // upColor: 'green',
                // negativeColor :'red'
                // pointInterval: 3600*1000,
                // pointStart:this.
                // cropThreshold: 50,
                pointPadding: 0.25,
                marker:{
                    enabled:false,
                    states: {
                    hover: {
                        enabled: false
                    }
                  }
                },
                

Also there is some problem when i update the data using axios to get some stock data which ranged from 1 mins to 1 year, after I receive the the I used

Code: Select all

this.$refs.charts.chart.xAxis[0].update({tickInterval:30*60*1000})

(this case for 1 ,3, 5minutes and 31*24*60*60*1000 for year) to update the interval and also update the pointStart of the series using the first point data like this

Code: Select all

        this.$refs.charts.chart.series[0].update({pointStart:ohlc[0].x})

. but the result are not as expected sometime would be like this

Capture2.PNG (9.39 KiB) Viewed 640 times

and the tick will shift when the width of the width of the browser changed

Capture3.PNG (22.85 KiB) Viewed 640 times

is there any proper way to display the latest 80 point with specific tickinterval and also what should i do if i want to display the datetime range like from 9:00-16:00

Sorry for the long question, Looking forward for some answers. Much thanks!!!

[pawelys]

Hi! Thanks for contacting us with your question!
Could you reproduce your issue in the online editor? You could start here: https://jsfiddle.net/BlackLabel/x3mok7hu/

It is hard for us to find the exact solution to your problem since I can't see your whole codebase. Kind regards,

[klhebs]

Hi! Thanks for contacting us with your question!
Could you reproduce your issue in the online editor? You could start here: https://jsfiddle.net/BlackLabel/x3mok7hu/

It is hard for us to find the exact solution to your problem since I can't see your whole codebase. Kind regards,

hi i fount that is about the broken axis , the breaks will affect the x-axis tick the goal is to show start at 9:30 and the break is 12:00 to 13:00 and end at 16:00
here are the repo on codepen
https://codesandbox.io/s/highcharts-vue ... /Chart.vue
when i comment out the break parts it works fine for displaying the tick
the after you clicked 1m the time will start at 10:00 or 09:45 depends on the width of the browser how can i set to show 9:30 To 16:00
one more question is how can i show the most recent hour data( 60 points) when in the mid day and the user able to drag from he most recent hour data to the day begin 9:30

[pawelys]

Hello again! As far as I understand the issue with the broken axis Is resolved?
Regarding the second question, I don't really understand what is the problem here. Please try to explain the issue in greater detail Kind regards,

[klhebs]

Hello again! As far as I understand the issue with the broken axis Is resolved?
Regarding the second question, I don't really understand what is the problem here. Please try to explain the issue in greater detail Kind regards,

no i still got some problem, i want to show a tick every 30 minutes but the demo is not the interval change when you change the width of the browser like the picture here .

Capture.PNG (105.84 KiB) Viewed 613 times

after dragging it a bit

Capture2.PNG (109.45 KiB) Viewed 613 times

i want to show a tick exactly 30 minutes

and i dont know how to show the point from 09:00 to 16:00 when there are only points reach 13:00 or something like this

Capture4.PNG (65.08 KiB) Viewed 613 times

except the data after 13:00 is missing but i still want 16:00 to end

And one more wired thing is i try to make full repo of my project in codepen but when i change to one minute data it remain unchanged
https://codesandbox.io/s/h5vm1?file=/sr ... /Chart.vue

[pawelys]

Hi again! Since this is a purely highcharts configuration problem (not related to vue and vue wrapper) I created a demo in vanilla js.
As you noticed, there seems to be an issue with managing the tick Intervals with the broken-axis module, probably because it is not obvious how to position the ticks, when the xAxis isn't continuous. Luckily you can define the ticks yourself, either by using the tickPositions, or tickPositioner options. Then you just need to define the exact way, that you want your labels to be displayed in datetime units. Here is a full demo: https://jsfiddle.net/BlackLabel/uxt0ghs7/

Let me know, If that works for you, and check the API reference for the detailed explanation of all the options:

Kind regards,

API Reference:
https://api.highcharts.com/highcharts/x ... Positioner
https://api.highcharts.com/highcharts/x ... .formatter
https://api.highchhttps://api.highchart ... dateFormat