You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
To get to grasp with how Highcharts works it is important to understand the various parts or concepts of a chart.
Below is an image and a description of the main concepts in a chart.
Title
Is the text that will be presented at the top of a chart. more information
Series
Is one or more series of data presented on a chart. more information
Tooltip
When hovering over a series or a point on the chart you can get a tooltip that describes the values on that perticular part of the chart. more information
Legend
The legend show the data series in the graph and allows for enabling and disabling one or more series. more information
Axes
The x and y-axis of the chart, can also use multiple axes for different dataseries.
Most chart types, like the typical cartesian types line and column, have axes.
Polar charts have an X axis that spans around the perimeter of the chart.
The title and subtitle can also be moved around by the default attributes of the title and subtitle options (align, float, margin, verticalAlign, x, y).
The x-axis and y-axis are shown by default in all charts but the pie chart.
Here is a quick overview of the axis elements:
1. AXIS LABELS, TICKMARKS AND GRIDLINES
The axis labels, tickmarks and gridlines are closely linked and all scale together. Their positioning is calculated to best fit the data present in a chart.
TICKS
Tick marks are the lines placed along an axis to show the units of measurement.
Note that several axes are created using a list, so the first yAxis starts with index 0. And the "opposite: true" option puts the axis on the right side of the chart.
2. AXIS TITLE
The axis title, showing next to the axis line.
This title by default for the y-axis and hidden by default for the x-axis. See xAxis.title for the full set of options.
3. AXIS TYPES
An axis can be either, linear, logarithmic, datetime or categories.
The axis type is set like this:
// The types are 'linear', 'logarithmic' and 'datetime'
yAxis: {
type: 'linear',
}
// Categories are set by using an array
xAxis: {
categories: ['Apples', 'Bananas', 'Oranges']
}
LINEAR
The numbers along the axis are of linear scale.
This is the default axis type. If only y-values are present in a dataseries the x-axis is labeled from 0 to the number of y-values (shows the array index of the y-values):
the numbers along the axis increase logarithmically
the axis adjusts itself to the data series present in the chart
Note that on logarithmic axes, the tickInterval option is based on powers, so :
a tickInterval of 1 means one tick on each of 0.1, 1, 10, 100 etc.
a tickInterval of 2 means a tick of 0.1, 10, 1000 etc.
a tickInterval of 0.2 puts a tick on 0.1, 0.2, 0.4, 0.6, 0.8, 1, 2, 4, 6, 8, 10, 20, 40 etc.
Another thing to note is that a logarithmic axis can never become negative, as each full axis unit is one tenth of the previous. As a consequence, Highcharts will remove 0 or negative points associated to the axis, and if you try to set the axis.min option to 0 or negative, it will fail with an error.
DATETIME
A datetime axis prints labels of round date values in appropriate intervals.
Internally, a datetime axis is a linear numeric axis based on milliseconds since midnight Jan 1, 1970, as specified by the JavaScript Date object.
Depending on the scale the datetime label will either be represented as time or a date.
Some useful functions are:
/* Get time in millis for UTC */
Date.UTC(year,month,day,hours,minutes,seconds,millisec)
/* Get time in millis for your local time */
Date.parse("Month day, year");
/* Built in Highcharts date formatter based on the PHP strftime (see API reference for usage) */
Highcharts.dateFormat("Month: %m Day: %d Year: %Y", 20, false);
Note that Unix based server timestamps are represented as seconds not milliseconds. This is useful to know since PHP time is based on a Unix timestamp, so to use it with Highcharts the value only needs to be multiplied by 1000.
In Highstock the x-axis is always a datetime axis.
CATEGORIES
If categories are present, the names of the categories are used instead of numbers or dates on the axis. See xAxis.categories.
WHAT AXIS TYPE SHOULD I USE?
Many of the examples in the Highcharts demo come with an xAxis with categories. However, it is important to understand when to use categories and when you are better off with a linear or datetime xAxis.
Categories are groups of items, like for example "Apples", "Pears" and "Oranges", or "Red", "Green", "Blue", "Yellow". These categories have that in common that there are no intermediate values. There's no sliding transition between apples and pears. Also, if you leave one category out, the user isn't able to understand what is left out. Say if you print every second color of "Red", "Green", "Blue" or "Yellow", the user won't know what colors are missing. Therefore, Highcharts doesn't have automatic methods to hide categories if they become to dense on the axis. If you have problems with overlapping axis labels, try either the xAxis.labels.staggerLines option, or give the labels a rotation. If you find that you can skip category labels by the xAxis.labels.step option, chances are that you are better off using a linear or datetime axis.
An xAxis of the linear or datetime type has the advantage that Highcharts is able to determine how close the data labels should be because it knows how to interpolate. The labels will by default be placed with approximately 100px between them, which can be changed in the tickPixelInterval option. If you have predictable categories like "Item1", "Item2", "Item3" or "2012-01-01", "2012-01-02", "2012-01-03" etc., linear or datetime axis types combined with an xAxis.labels.formatter would probably be a better choice.
DYNAMICALLY UPDATING AXES
Axes can be updated with new information after render time.
Below is a list of the main topics regarding series.
What is series?
The data in a series
Point and marker
Series options:
Animation
Color
Point selection
Line width
Stacking
Cursor
Data labels
Dash style
Zones
What is series?
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:
/* the series object = an array, meaning it can contain several series. */
series: [{
name: '' /* name attribut gives the series a name, which show up when hovering over the series in a chart and in the legend */
data: [] /* the actual data (as an array) */
}]
The data in a series
The data: [] attribut presents the actual data in 3 ways :
1. A list of numerical values
data: [0, 5, 3, 5] /* will be interpreted as y value */
/* then the x value will be automatically calculated(0~1 | pointStart~pointInterval | categories)*/
Highcharts.chart('container', {
title: {
text: 'Chart reflow is set to true'
},
subtitle: {
text: 'When resizing the window or the frame, the chart should resize'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}]
});
2. A list of arrays with 2 values
data: [[5, 2], [6, 3], [8, 2]]
/* the 1st value : x value */
/* the 2nd value : y value */
/* when the 1st value is string : the name of the point,
the 2nd value is incremented following the above rules.*/
/* In this case the objects are point configuration objects as seen under options.point. */
data: [{
name: 'Point 1',
color: '#00FF00',
y: 0
}, {
name: 'Point 2',
color: '#FF00FF',
y: 5
}]
Allows the cursor to change appearence to indicate that points and series are clickable.
Data labels
Allows data labels to be displayed for each point of data in a series on the chart.
/* Code example showing how to enable datalabels: */
plotOptions: {
line: {
dataLabels: {
enabled: true
}
}
},
The text displayed on datalabels may also be be customized by using the formatter option. (See API reference for more options.)
Note: You may wish to disable mouse tracking (highlights the series and points the mouse hovers over) (tooltips will not show if mouse tracking is disabled).
Allows to use dashed lines instead of solid, there are several different dash options available.
/* Code to set dashed lines for a individual series (the dashStyle can also be set in plotOptions): */
series: [{
data: [1, 3, 2, 4, 5, 4, 6, 2, 3, 5, 6],
dashStyle: 'longdash'
}]
provides a minimum width for the plot area of the chart.
if the width gets smaller than this, typically on mobile devices, a native browser scrollbar is presented below the chart.
this scrollbar is presented below the chart
this scrollbar provides smooth scrolling for the contents of the plot area, whereas the title, legend and axes are fixed.
minWidth : Number - The minimum width for the plot area. (default : undefined)
scrollPositionX : Number - The initial scrolling position of the scrollable plot area. (default : undefined)
(Ranges from 0 to 1 - 0 aligns to left, 1 aligns to right. Typically use 1 if the chart has right aligned Y axes.)
When the width of the plot area becomes less than this, it is applied to a separate div in the page, where native, smooth scrolling is applied, while the axes, titles, legend and other elements stay fixed.
This provides a great way to support long data series in a narrow mobile view.
See the effect below in a mobile browser or just a small desktop browser window.
