kirjs / react-highcharts

React wrapper for Highcharts library

Home Page:http://kirjs.github.io/react-highcharts/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Input date with text overlaid

maurodelazeri opened this issue · comments

Hello,
I have really weird behavior on the input dates. it might be related with css ?

Video:
https://monosnap.com/file/kCqKdOUOYv3oaSb3VzKN5Omq6bukaA

const options = {
  chart: {
    height: 500
  },
  navigator: {
    margin: 60
  },
  plotOptions: {
    candlestick: {
      color: "red", // Down color
      upColor: "green",
      pointWidth: 5
    }
  },
  // Range buttons (top left)
  rangeSelector: {
    buttonSpacing: 5,
    buttonTheme: {
      width: null,
      padding: 5
    },
    buttons: [
      {
        type: "hour",
        count: 1,
        text: "1m",
        dataGrouping: {
          forced: true,
          units: [["minute", [1]]]
        }
      },
      {
        type: "day",
        count: 2,
        text: "30m",
        dataGrouping: {
          forced: true,
          units: [["minute", [30]]]
        }
      },
      {
        type: "day",
        count: 7,
        text: "2h",
        dataGrouping: {
          forced: true,
          units: [["hour", [2]]]
        }
      },
      {
        type: "all",
        //count: 6,
        text: "day",
        dataGrouping: {
          forced: true,
          units: [["day", [1]]]
        }
      }
    ],

    // Default button selection
    selected: 0,
    inputDateFormat: "%d-%m-%Y",
    inputEnabled: true
  },

  title: {
    text: "USDJPY"
  },

  yAxis: [
    {
      labels: {
        align: "right",
        x: -3
      },
      title: {
        text: "OHLC"
      },
      height: "60%",
      lineWidth: 1,
      offset: 50
    },
    {
      labels: {
        align: "right",
        x: -3
      },
      title: {
        text: "Volume"
      },
      top: "65%",
      height: "35%",
      offset: 0,
      lineWidth: 1,
      offset: 50
    }
  ],

  tooltip: {
    valueDecimals: 8,
    split: true
  },

  series: [
    {
      type: "candlestick",
      name: "USDJPY",
      data: ohlc,
      dataGrouping: {
        units: groupingUnits
      }
    },
    {
      type: "column",
      name: "Volume",
      data: volume,
      yAxis: 1,
      dataGrouping: {
        units: groupingUnits
      }
    }
  ]
};

Did you find a solution?

@ilyjs you can try this code

rangeSelector {
    inputStyle: {
      background:  'white'
    },
}

Closing and there has been no activity in this issue for a while.
if this is still relevant, please feel free to reopen