Develop Reference

How can I add double related x-axis bar to high chart in zoom

Below is the custom xAxis bar I want to implement.
When user is doing a selection highchart will zoom accordingly and also datetime format x-axis would also zoom in & out accordingly.
Which option should I use?

You can use two linked datetime x-axis with enabled zoom and different tick interval:
chart: {
zoomType: 'x'
},
xAxis: [{
type: 'datetime'
}, {
type: 'datetime',
tickInterval: 1000 * 60 * 60 * 24 * 30,
linkedTo: 0
}]
Filling label backgrounds will be harder to achieve, but this thread should help: How can i create Highchart xAxis labels centered and enclosed?
Live demo: http://jsfiddle.net/BlackLabel/ot6g0fvj/
API Reference: https://api.highcharts.com/highcharts/xAxis

Plotly.js: how to make markers only show when zoomed in (range slider with time on x-axis)

I'm using Plotly.js (javascript plotly) to configure a line chart that has a range slider and has dates on the x-axis (as in Range Slider and Selector | JavaScript | Plotly and in the snippet below). When you zoom in, I want the line chart to have dots at each data point (aka, mode: 'lines+markers'). When you zoom out, the dots look too crowded because they are very close together. So, I want the dots to disappear ( mode: 'lines') when zoomed in to 30 day's worth of data or less.
Is it possible to add markers to the chart only when zoomed in to a range span of 30 days or less? For example, when looking at an x-axis range of more than a week, the mode of the chart should be ‘lines’ but when zoomed in such that the x-axis’s range spans 30 days or less, the mode should be ‘lines+marker’.
I’m not certain the best language to ask the question, but I’m seeking a way to find a “hook” into the chart’s x-axis range. Since I’ve not defined the range (it’s managed instead via the range slider), how do I get my javascript to say “if the range[1] - range[0] is > 30 days, make mode = 'lines'; else if range[1] - range[0] is not > 30 days, make mode = 'lines+markers'.
// Generate 500 random numbers for Y axis
var randoms = [375438,375436,375434,375430,375428,375428,375428,375428,375422,375413,375412,375408,375405,375405,375405,375403,375393,375383,375380,375373,375373,375373,375375,375374,375371,375371,375367,375367,375367,375364,375348,375330,375325,375324,375324,375324,375318,375301,375295,375276,375254,375254,375254,375251,375243,375225,375209,375203,375221,375221,375221,375205,375183,375172,375153,375153,375153,375147,375130,375114,375094,375083,375083,375083,375083,375067,375050,375028,375023,375023,375021,375027,375008,374992,374988,374967,374967,374967,374971,374955,374938,374921,374898,374898,374896,374893,374873,374861,374840,374828,374828,374835,374835,374827,374809,374798,374772,374773,374773,374773,374761,374748,374738,374738,374738,374738,374749,374749,374729,374718,374717,374717,374717,374713,374728,374714,374705,374697,374697,374697,374702,374682,374668,374654,374637,374636,374636,374637,374637,374637,374622,374622,374622,374622,374624,374611,374604,374597,374592,374592,374592,374597,374588,374582,374573,374579,374579,374579,374579,374579,374572,374576,374570,374570,374570,374570,374559,374559,374567,374546,374546,374546,374552,374542,374530,374527,374505,374505,374505,374486,374467,374451,374450,374439,374439,374439,374433,374422,374429,374424,374373,374373,374373,374376,374371,374371,374358,374350,374350,374350,374356,374340,374348,374341,374307,374307,374307,374311,374318,374299,374282,374272,374272,374272,374271,374265,374238,374234,374224,374224,374223,374215,374199,374180,374171,374171,374171,374171,374170,374175,374168,374089,374089,374089,374089,374089,374089,374089,374089,374089,374089,374089,374089,374089,374082,374102,374073,374073,374075,374105,374094,374076,374051,374051,374051,374043,374030,374021,374029,374029,374029,374029,374028,374008,373997,373994,373977,373977];
// Make an array 1 - 500 for X axis
var xrange = ["2021-05-29","2021-05-28","2021-05-27","2021-05-26","2021-05-25","2021-05-24","2021-05-23","2021-05-22","2021-05-21","2021-05-20","2021-05-19","2021-05-18","2021-05-17","2021-05-16","2021-05-15","2021-05-14","2021-05-13","2021-05-12","2021-05-11","2021-05-10","2021-05-09","2021-05-08","2021-05-07","2021-05-06","2021-05-05","2021-05-04","2021-05-03","2021-05-02","2021-05-01","2021-04-30","2021-04-29","2021-04-28","2021-04-27","2021-04-26","2021-04-25","2021-04-24","2021-04-23","2021-04-22","2021-04-21","2021-04-20","2021-04-19","2021-04-18","2021-04-17","2021-04-16","2021-04-15","2021-04-14","2021-04-13","2021-04-12","2021-04-11","2021-04-10","2021-04-09","2021-04-08","2021-04-07","2021-04-06","2021-04-05","2021-04-04","2021-04-03","2021-04-02","2021-04-01","2021-03-31","2021-03-30","2021-03-29","2021-03-28","2021-03-27","2021-03-26","2021-03-25","2021-03-24","2021-03-23","2021-03-22","2021-03-21","2021-03-20","2021-03-19","2021-03-18","2021-03-17","2021-03-16","2021-03-15","2021-03-14","2021-03-13","2021-03-12","2021-03-11","2021-03-10","2021-03-09","2021-03-08","2021-03-07","2021-03-06","2021-03-05","2021-03-04","2021-03-03","2021-03-02","2021-03-01","2021-02-28","2021-02-27","2021-02-26","2021-02-25","2021-02-24","2021-02-23","2021-02-22","2021-02-21","2021-02-20","2021-02-19","2021-02-18","2021-02-17","2021-02-16","2021-02-15","2021-02-14","2021-02-13","2021-02-12","2021-02-11","2021-02-10","2021-02-09","2021-02-08","2021-02-07","2021-02-06","2021-02-05","2021-02-04","2021-02-03","2021-02-02","2021-02-01","2021-01-31","2021-01-30","2021-01-29","2021-01-28","2021-01-27","2021-01-26","2021-01-25","2021-01-24","2021-01-23","2021-01-22","2021-01-21","2021-01-20","2021-01-19","2021-01-18","2021-01-17","2021-01-16","2021-01-15","2021-01-14","2021-01-13","2021-01-12","2021-01-11","2021-01-10","2021-01-09","2021-01-08","2021-01-07","2021-01-06","2021-01-05","2021-01-04","2021-01-03","2021-01-02","2021-01-01","2020-12-31","2020-12-30","2020-12-29","2020-12-28","2020-12-27","2020-12-26","2020-12-25","2020-12-24","2020-12-23","2020-12-22","2020-12-21","2020-12-20","2020-12-19","2020-12-18","2020-12-17","2020-12-16","2020-12-15","2020-12-14","2020-12-13","2020-12-11","2020-12-10","2020-12-09","2020-12-08","2020-12-07","2020-12-06","2020-12-05","2020-12-04","2020-12-03","2020-12-02","2020-12-01","2020-11-16","2020-11-15","2020-11-14","2020-11-13","2020-11-12","2020-11-11","2020-11-10","2020-11-09","2020-11-08","2020-11-07","2020-11-06","2020-11-05","2020-11-04","2020-11-03","2020-11-02","2020-11-01","2020-10-31","2020-10-30","2020-10-29","2020-10-28","2020-10-27","2020-10-26","2020-10-25","2020-10-24","2020-10-23","2020-10-22","2020-10-21","2020-10-20","2020-10-19","2020-10-18","2020-10-17","2020-10-16","2020-10-15","2020-10-14","2020-10-13","2020-10-12","2020-10-11","2020-10-10","2020-10-09","2020-10-08","2020-10-07","2020-10-06","2020-10-05","2020-10-04","2020-10-03","2020-10-02","2020-10-01","2020-09-30","2020-09-29","2020-09-28","2020-09-27","2020-09-26","2020-09-25","2020-09-24","2020-09-23","2020-09-22","2020-09-21","2020-09-20","2020-09-19","2020-09-18","2020-09-17","2020-09-16","2020-09-15","2020-09-14","2020-09-13","2020-09-12","2020-09-11","2020-09-10","2020-09-09","2020-09-08","2020-09-07","2020-09-06","2020-09-05","2020-09-04","2020-09-03","2020-09-02","2020-09-01","2020-08-31"]
var trace = {
x: xrange,
y: randoms,
mode: 'lines+markers'
};
var layout = {
title: 'Time series with range slider and too many markers when zoomed out',
height: 400,
xaxis: {
rangeslider: {}
},
yaxis: {
fixedrange: true
}
};
var data = [trace];
Plotly.newPlot('myDiv', data, layout);
<body>
<div id="myDiv"></div>
<script src="https://cdn.plot.ly/plotly-latest.min.js" crossorigin="anonymous"></script>
</body>
Thanks in advance!

jquery twelve hour model is not working on chart

I am working with flot jquery library to draw a chart
this is my code
chartOptions = {
xaxis: {
timeformat: "%H",
twelveHourClock: true,
as you see, i set the twelveHourClock option to true and yet I still get results like 14 18 20 ...
why please?
Update 1
I already tried to use %I %p in timeformat but then I got the following results, please check that the bellow values should be 8am 10am 12 ..... 8 pm

For zero padded 12 hour format,
xaxis: {
mode: "time",
timeformat: "%I %p",
tickSize: [1, "hour"],
twelveHourClock: true,
}

Highcahrt time format issue

this is my yAxsis and normally displays time for column range chart
yAxis: {
type: 'datetime',
labels: {
formatter: function () {
return Highcharts.dateFormat('%H:%M:%P', this.value);
}
}
It normally works perfect when distance is some amount .
Question : When time distance between starttime and endtime is low then yAxsis dispalys 00:00 pm through the axsis I also tried %M:%P still dispalys 00:pm
here is the js fiddle

Thanks Sebastian .
minPointLength
did work..

Highcharts spacing issue on xAxis in column chart

When I create a simple column chart with at least 2 datapoints there is annoying spacing as you can see in the jsfiddle. The width of the spacing scales with the smallest distance between two datapoints. I can't find any other options besides the one I've already set (min, max, minRange) to prevent the spacing.
$(function () {
$('#container').highcharts({
chart: {
type: 'column'
},
xAxis: {
tickInterval: 1,
min: 0,
max: 23,
minRange: 23
},
series: [{
data:[[0,10], [23,10]]
}]
});
});
http://jsfiddle.net/f5JUU/2/ (Big spacing)
http://jsfiddle.net/f5JUU/3/ (No spacing. This is how the other Jsfiddle should look like too...)

Not sure if you mean the spacing between the points, or the size of the points.
if the size, use pointRange:
http://jsfiddle.net/f5JUU/4/
pointRange:1
If you want the data to be like your 'big spacing' example, but the chart to look like your 'small spacing' example, then you just need to make your x axis max value much larger.
http://jsfiddle.net/f5JUU/5/

You can try to use groupPadding / pointPadding / pointWidth parameters and adapt columns correct with your expectations.
All parametsers are documented here: http://api.highcharts.com/highcharts