highcharts / highcharts-react

The official Highcharts supported wrapper for React
Other
1.07k stars 108 forks source link

Scrollbar is not working #369

Closed deepanshk closed 2 years ago

deepanshk commented 2 years ago

import Highcharts from "highcharts"; import HighchartsReact from "highcharts-react-official";

const config = { chart: { type: "column", marginLeft: 150, }, title: { text: "Most popular ideas by April 2016", }, subtitle: { text: 'Source: UserVoice', }, xAxis: { type: "category", title: { text: null, }, min: 0, max: 4, scrollbar: { enabled: true, }, tickLength: 0, }, yAxis: { min: 0, max: 1200, title: { text: "Votes", align: "high", }, }, plotOptions: { bar: { dataLabels: { enabled: true, }, }, }, legend: { enabled: false, }, credits: { enabled: false, }, series: [ { name: "Votes", data: [ ["Gantt chart", 1000], ["Autocalculation and plotting of trend lines", 575], ["Allow navigator to have multiple data series", 523], ["Implement dynamic font size", 427], ["Multiple axis alignment control", 399], ["Stacked area (spline etc) in irregular datetime series", 309], ["Adapt chart height to legend height", 278], ["Export charts in excel sheet", 239], ["Toggle legend box", 235], ["Venn Diagram", 203], ["Add ability to change Rangeselector position", 182], ["Draggable legend box", 157], ["Sankey Diagram", 149], ["Add Navigation bar for Y-Axis in Highcharts Stock", 144], ["Grouped x-axis", 143], ["ReactJS plugin", 137], ["3D surface charts", 134], ["Draw lines over a stock chart, for analysis purpose", 118], ["Data module for database tables", 118], ["Draggable points", 117], ], }, ], };

`const DoubleBarGraph = () => { return ( <div style={{ width: "500px" }}>

    </div>
);

}; export default DoubleBarGraph;`

ppotaczek commented 2 years ago

Hi @deepanshk,

Thank you for contacting us!

The scrollbar feature is a Highcharts Stock only, so import highstock to use it:

import Highcharts from "highcharts/highstock";

Example: https://codesandbox.io/s/highcharts-react-demo-rxk0nb?file=/demo.jsx


For basic Highcharts you can use scrollablePlotArea.

Example: https://codesandbox.io/s/highcharts-react-demo-fork-6socue?file=/demo.jsx API Reference: https://api.highcharts.com/highcharts/chart.scrollablePlotArea

Best regards!

deepanshk commented 2 years ago

Working for me 👍 Thanks for the information @ppotaczek