States
Overview
A number settings of a chart, series, or point can be configured in three states: normal, hover, and selected. For example, you can adjust their appearance, enable and adjust labels and markers.
Here is the full list of available settings: anychart.core.StateSettings. Please note that many of them work only with certain types of charts or series.
Chart
Single Series
Some chart types can have only one series. To configure their states, use the normal(), hovered(), and selected() methods of the chart. The next step is to combine them with the methods from anychart.core.StateSettings - choose ones that work with your chart type.
Note 1: To configure an individual point of a chart, add to your data extra fields corresponding to the methods mentioned above.
Note 2: There is also an alternative way to set the normal state of a chart: see the Shortcuts section.
In the sample below, there is a Pie chart with visual settings adjusted with the help of the normal() and hovered() methods. One slice is configured individually though data:
// create data
var data = [
{x: "A", value: 637166},
{x: "B", value: 721630,
normal: { hatchFill: {
type: "forward-diagonal",
color: "#669999"
}
},
hovered: { hatchFill: {
type: "forward-diagonal",
color: "#669999",
thickness: 3
}
}
},
{x: "C", value: 148662},
{x: "D", value: 78662},
{x: "E", value: 90000}
];
// create a chart and set the data
chart = anychart.pie(data);
// configure the states of the chart
chart.normal().fill("#669999", 0.5);
chart.hovered().fill("#669999", 0.3);
chart.normal().stroke("#669999", 3);
chart.hovered().stroke("#669999", 3);
Multiple Series
Most chart types in AynChart allow creating multiple series. Such charts do not have the normal(), hovered(), and selected() methods, but their series do, so you should configure the states of series.
See the Series section of this article to learn more. Some additional information can be found in the Points and Shortcuts sections.
Series
Methods
To configure the states of a series, use its normal(), hovered(), and selected() methods. The next step is to combine them with methods from anychart.core.StateSettings - choose ones that work with your series type.
In the following sample, there is a Column chart with its visual settings, markers, and labels adjusted with the help of normal(), hovered(), selected() methods:
// create the first series
var series1 = chart.column(seriesData_1);
// configure the states of the first series
series1.normal().fill("#00cc99", 0.3);
series1.hovered().fill("#00cc99", 0.1);
series1.selected().fill("#00cc99", 0.5);
series1.normal().stroke("#00cc99", 1);
series1.hovered().stroke("#00cc99", 2);
series1.selected().stroke("#00cc99", 4);
series1.hovered().markers(true);
series1.selected().markers(true);
series1.selected().labels(true);
// create the second series
var series2 = chart.column(seriesData_2);
// configure the states of the second series
series2.normal().fill("#0066cc", 0.3);
series2.hovered().fill("#0066cc", 0.1);
series2.selected().fill("#0066cc", 0.5);
series2.normal().stroke("#0066cc");
series2.hovered().stroke("#0066cc", 2);
series2.selected().stroke("#0066cc", 4);
series2.hovered().markers(true);
series2.selected().markers(true);
series2.selected().labels(true);
Object Notation
Another way to configure the states of a series is using object notation.
You can create objects with settings and then use them repeatedly - for example, to make different series look the same. The properties of such objects should correspond with the methods mentioned in the previous section.
This is how it looks like:
// create two series
var series1 = chart.column(seriesData_1);
var series2 = chart.column(seriesData_2);
// create objects with settings
var normal = {
fill: {color:"#0066cc", opacity: 0.3},
stroke: {color: "#0066cc"}
};
var hovered = {
fill: {color:"#0066cc", opacity: 0.1},
stroke: {color: "#0066cc", thickness: 2},
markers: {enabled: true}
};
var selected = {
fill: {color:"#0066cc", opacity: 0.5},
stroke: {color: "#0066cc", thickness: 4},
markers: {enabled: true},
labels: {enabled: true}
};
// configure the states of the first series
series1.normal(normal);
series1.hovered(hovered);
series1.selected(selected);
// configure the states of the second series
series2.normal(normal);
series2.hovered(hovered);
series2.selected(selected);
Points
You can configure the states of individual points of a series: use special data fields corresponding to the methods of the series.
Data Fields
If you use object notation to set the data, just add extra fields to your data:
// create data
var data = [
{x: "John", value: 10000},
{x: "Jake", value: 12000},
{x: "Peter", value: 13000,
normal: { fill: "#5cd65c",
stroke: "#5cd65c"
},
hovered: { hatchFill: "forward-diagonal",
marker: { enabled: true,
size: 20,
type: "star5",
fill: "gold"
}
},
selected: { hatchFill: "forward-diagonal",
marker: { enabled: true,
size: 20,
type: "star5",
fill: "gold"
}
}
},
{x: "James", value: 10000},
{x: "Mary", value: 9000}
];
// create a chart
chart = anychart.column();
// create a column series and set the data
var series = chart.column(data);
Data Mapping
If you use an array to set the data, you should add settings to the data set and then map fields for them so that they can be interpreted by the component:
// create a data set
var data = anychart.data.set([
["John", 10000, 12500],
["Jake", 12000, 15000],
["Peter", 13000, 16500,
{fill: "#5cd65c", stroke: "#5cd65c"},
{fill: "#009933", stroke: "#009933",
marker: {enabled: true},
label: {enabled: true}
},
{hatchFill: "forward-diagonal",
marker: {enabled: true},
label: {enabled: true}
}
],
["James", 10000, 13000],
["Mary", 9000, 11000]
]);
// map the data
var seriesData_1 = data.mapAs({
x: 0, value: 1,
normal: 3, hovered: 5, selected: 5
});
var seriesData_2 = data.mapAs({
x: 0, value: 2,
normal: 4, hovered: 5, selected: 5
});
// create a chart
chart = anychart.column();
// create two series and set the data
var series1 = chart.column(seriesData_1);
var series2 = chart.column(seriesData_2);
Shortcuts (Normal)
There are shortcuts that allow you to configure the normal state of a chart, series, or point without using the normal() method.
Each series or chart has methods that affect its settings in the normal state. For example, the Column series has fill(), stroke(), labels(), markers(), and so on.
In the sample below, there is a single-series Column chart with the normal state of its series adjusted. One column is configured individually through data:
// create data
var data = [
{x: "John", value: 10000},
{x: "Jake", value: 12000},
{x: "Peter", value: 13000, hatchFill: "forward-diagonal"},
{x: "James", value: 10000},
{x: "Mary", value: 9000}
];
// create a chart
chart = anychart.column();
// create a column series and set the data
var series = chart.column(data);
// configure the states of the series
series.fill("#0066cc", 0.5);
series.stroke("#0066cc", 2);
series.markers(true);
series.labels(true);