Last active
December 9, 2019 12:17
-
-
Save ltenzil/0d8c8a0769f88ee98e8935c5b8612cc0 to your computer and use it in GitHub Desktop.
Understanding Highcharts
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| https://www.highcharts.com/docs/chart-concepts/titleandsubtitle.png | |
| title: { | |
| text: ‘the title comes here’, | |
| style: { color: ‘blue’, fontWeight: ‘normal’ }, | |
| x: 10, | |
| y: 20, | |
| align: ‘right’, | |
| verticalAlign: ‘top’, | |
| margin: 50, | |
| widthAdjust: -100, | |
| floating: true | |
| }, | |
| subtitle: { | |
| text: 'My subtitle' | |
| } | |
| chart.setTitle({text: 'New title'}) => updates title | |
| chart.setTitle(null, {text: 'New subtitle'}) => updates subtitle | |
| chart.setTitle({text: 'New subtitle'}, {text: 'New subtitle'}) => updates both (should work) | |
| chart.setTitle({style: {color: 'green'}}, {style: {color: 'blue'}}) => updates both |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| https://www.highcharts.com/docs/chart-concepts/axis_description.png | |
| Axis => xAxis and yAxis | |
| Example: Add custom labels to yAxis | |
| yAxis: { | |
| labels: { | |
| formatter: function() { | |
| return this.value + ' %'; | |
| } | |
| } | |
| } | |
| ############################ | |
| GridLines: | |
| xAxis: { | |
| gridLineWidth: 1 | |
| }, | |
| yAxis: { | |
| gridLineWidth: 1 | |
| } | |
| ############################# | |
| Multiple Axes: | |
| yAxis: [{ //--- Primary yAxis | |
| title: { | |
| text: 'Temperature' | |
| } | |
| }, { //--- Secondary yAxis | |
| title: { | |
| text: 'Rainfall' | |
| }, | |
| opposite: true | |
| }], | |
| series: [{ | |
| yAxis: 0, | |
| data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4] | |
| },{ | |
| yAxis: 1, | |
| data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6] | |
| }] | |
| ############################### | |
| // The types are 'linear', 'logarithmic' and 'datetime' | |
| yAxis: { | |
| type: 'linear', | |
| } | |
| // Categories are set by using an array | |
| xAxis: { | |
| categories: ['Apples', 'Bananas', 'Oranges'] | |
| } | |
| ############################### | |
| xAxis title and data (categories) to display on | |
| xAxis: { | |
| categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'], | |
| title: { | |
| text: 'X axis title', | |
| align: 'low' # => options => ['low', 'middle', 'high'] | |
| } | |
| } | |
| ################################ | |
| To remove Highcharts branding | |
| credits: { | |
| enabled: false | |
| } | |
| ################################ | |
| Style and positioning yAxis title | |
| yAxis: { | |
| lineWidth: 1, | |
| tickWidth: 1, | |
| title: { | |
| align: 'high', | |
| offset: 0, | |
| text: 'Rainfall (mm)', | |
| rotation: 0, | |
| y: -10 | |
| }, | |
| margin: 60 | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| A series is a set of data, for example a line graph or one set of columns. | |
| All data plotted on a chart comes from the series object. The series object has the structure: | |
| series: [{ | |
| name: '' | |
| data: [] | |
| }] | |
| The data in a series can be listed in three ways: | |
| 1. A list of numerical values | |
| => [1, 2, 3, 4], value represent Y and X is calculated. | |
| 2. A list of arrays with two or more values | |
| => data: [[5, 2], [6, 3], [8, 2]] | |
| 3. A list of object with named values. | |
| => data: [{ | |
| name: 'Point 1', | |
| color: '#00FF00', | |
| y: 0 | |
| }, { | |
| name: 'Point 2', | |
| color: '#FF00FF', | |
| y: 5 | |
| }] |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Tooltip on series data: | |
| tooltip: { | |
| backgroundColor: '#FCFFC5', | |
| borderColor: 'black', | |
| borderRadius: 10, | |
| borderWidth: 3 | |
| } | |
| ######################## | |
| Formatting | |
| tooltip: { | |
| formatter: function() { | |
| return 'The value for <b>' + this.x + '</b> is <b>' + this.y + '</b>, in series '+ this.series.name; | |
| } | |
| } | |
| ######################## | |
| Cross hairs ++++++++++++++ | |
| // Enable for x-axis only | |
| tooltip: { | |
| crosshairs: [true] | |
| } | |
| // Enable for y-axis only | |
| tooltip: { | |
| crosshairs: [false, true] | |
| } | |
| // Enable for both axes | |
| tooltip: { | |
| crosshairs: [true,true] | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment