CODEWITHSUNDEEP
jqueryhighcharts
skippr
skippr

Reputation: 2706

HighCharts (Stock) Styling Issues (Mobile and Date Selector)

Here's a HighStock chart with buttons and date selector: JSFiddle

Two questions:

1.) Is it possible to add a border radius to the date selector input fields? I see options like inputBoxBorderColor as well as inputStyle, but nothing seems to work out of the box. Any ideas?

2.) If you make your browser smaller (while viewing the chart), you'll notice the datepicker and range selector buttons overlap on each other. What are some options for fixing this? I don't want to force a width, as I'm looking for responsive design. How difficult is it to create an external datepicker and are there any examples out there? Plus one for JSFiddle examples :-)

Upvotes: 1

Views: 1084

Answers (2)

Anshuman Fotedar
Anshuman Fotedar

Reputation: 93

Regarding #2, if you wanted to hide the date range selector for smaller screens / window widths and have this work dynamically, you could use a media query (I used a sample breakpoint below):

@media (max-width: 768px) {
  .highcharts-input-group {
    display:  none;
  }
}

Upvotes: 1

Sebastian Bochan
Sebastian Bochan

Reputation: 37578

1) Unforutnately it is not available, but you can post your idea here.

2) You can only disable inputs, by width 

inputEnabled: $('#container').width() > 480

Upvotes: 0

Related Questions