Can We Show Continues and Discrete Plots in a Single Plot Highcharts
Series#
What is a 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:
series : [ {
name : '' ,
data : [ ]
} ]
Note: The series object is an array, meaning it can contain several series.
The name attribute gives the series a name, which shows up when hovering over the series in a chart and in the legend.
The data in a series#
The actual data is represented as an array, by the data attribute, and can be presented in three ways:
- A list of numerical values. In this case, the numerical values will be interpreted as
yvalues and thexvalues will be automatically calculated, either starting at 0 and incrementing by 1, or from the pointStart and pointInterval options. If the axis has categories, these will be used. Example:
Online example
- A list of arrays with two or more values. In this case, the first value is the x value and the second is the y value. If the first value is a string, it is applied as the name of the point, and the x value is incremented following the above rules. Some series, like arearange, accept more than two values. See API documentation for each series type. Example:
data : [ [ 5 , 2 ] , [ 6 , 3 ] , [ 8 , 2 ] ]
Online example
- A list of objects with named values. In this case the objects are point configuration objects as seen under options.point. The full list of available properties can be seen from the API, for example for line series. Note that for this option to work in Highcharts Stock, the total number of points must not exceed the turboThreshold, or the turboThreshold setting must be increased. Example:
data : [ {
name : 'Point 1' ,
color : '#00FF00' ,
y : 0
} , {
name : 'Point 2' ,
color : '#FF00FF' ,
y : 5
} ]
Online example
Point and marker#
For cartesian charts, a point represents a (x, y) pair on the chart. Points can be given separate options inside the series data. For other chart types, the point represents other values than (x, y). For instance, in a range chart, the point represents (x, low, high). In an OHLC chart, the point represents (x, open, high, low, close). In a pie chart or gauge, the point represents a single value.
The point option can be applied to all charts. Here is an example showing how to edit the color of a specific point:
series : [ {
data : [ 29.9 , 71.5 , 106.4 , 129.2 , 144.0 , 176.0 , 135.6 , 148.5 ,
{ y : 216.4 , color : '#BF0B23' } , 194.1 , 95.6 , 54.4 ]
} ]
Line, spline, area and areaspline charts have the option to display point markers, these are slightly different from the point option because they enable altering the style and shape of the point marker.
Here is an example showing how to alter the color and size of a marker on a specific point.
series : [ {
data : [ 29.9 , 71.5 , 106.4 , 129.2 , 144.0 , 176.0 , 135.6 , 148.5 ,
{ y : 216.4 , marker : { fillColor : '#BF0B23' , radius : 10 } } , 194.1 , 95.6 , 54.4 ]
} ]
Series options#
The series options can be defined in two places within the Highcharts options structure.
- General options that apply to multiple series are defined in the plotOptions. To set general options for all series in the chart, use plotOptions.series. To set general options for a specific chart type, each chart type has its own collection of plotOptions.
- Specific options for each series are defined in the series options structure. All options that are listed for the plotOptions structure, can also be set in the specific series definition. Some options, likedata,id orname, only make sense for specific series.
Here is an overview over the most common options that can be applied to a data series:
Animation#
Allows disabling or altering the characteristics of the initial animation of a series. Animation is enabled by default.
Color#
Allows changing the color of a series.
Point selection#
Allows the selection and highlighting of a single point. Can be used to remove, edit or display information about a point.
Try it here
Code to enable point selection:
plotOptions : {
series : {
allowPointSelect : true
}
}
Code to get the selected points:
var selectedPoints = chart . getSelectedPoints ( ) ;
Line width#
Allows altering the width of a line.
Try it here
Code to alter line width:
series : [ {
data : [ 216.4 , 194.1 , 95.6 ] ,
lineWidth : 5 } ] ,
Stacking#
Stacking allows series to be placed on top of each other without overlapping. See Stacking charts for more information.
Cursor#
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.
Try it here
Code example showing how to enable datalabels:
plotOptions : {
line : {
dataLabels : {
enabled : true
}
}
} ,
Note: You may wish to disable mouse tracking, which highlights the series and points the mouse hovers over (tooltips will not show if mouse tracking is disabled).
The text displayed on datalabels may also be customized by using the formatter option. See API reference for more options.
Dash style#
Allows to use dashed lines instead of solid, there are several different dash options available.
Try it here
Code to set dashed lines for an 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'
} ]
Zones#
In some cases, you would want to display certain sections of the graph different. A common example is to use different colors when data falls in a certain range. This effect can be achieved by using zones. By default zoning is done on the yAxis, but this can be easily changed by setting the zoneAxis variable on the series. For the zoning itself, you have to define an array called zones where each entry corresponds to a zone, delimited by a parameter value, which is the point up to which the zones goes. The settings that can be overwritten for each zone are color, fillColor and dashStyle.
Code used for the zoning:
zones : [ {
value : 0 ,
color : '#f7a35c'
} , {
value : 10 ,
color : '#7cb5ec'
} , {
color : '#90ed7d'
} ]
Another common use of this is to style future, estimated data points differently.
Code used for the zoning:
zoneAxis : 'x' ,
zones : [ {
value : 8
} , {
dashStyle : 'dot'
} ]
See the API for more information.
Source: https://www.highcharts.com/docs/chart-concepts/series
0 Response to "Can We Show Continues and Discrete Plots in a Single Plot Highcharts"
Post a Comment