Settings from Data

Overview

AnyChart js charting framework allows you to apply different visualization settings to a single point. It means that you can customize the point view explicitly from the data set. Let's consider how it works on a sample of JavaScript Bar Chart.

As you know you can use a data set to create charts with the following code:

//create data set var data = [ {x: 'Department Stores', value: 737166}, {x: 'Discount Stores', value: 537166}, {x: 'Men\'s/Women\'s Specialty Stores', value: 188662}, {x: 'Juvenile Specialty Stores', value: 178662}, {x: 'All other outlets', value: 89000} ]; //create bar chart var chart = anychart.barChart(); var series = chart.bar(data);

And the chart will look this way:

Playground

Visual appearance of bars is defined using these settings:

var series = chart.bar(data); series .fill('#6698FF .6') .hoverStroke("#0000A0", 4) .stroke('#56561a', 4) .hatchFill('diagonal-brick', '#348781') .hoverHatchFill('diagonal-brick', '#0000A0')

If you want to configure tooltips for all series - you should use tooltip() methods, labels() method configures series labels. Adding attributes with values to these methods, you can change visual appearance, position and format of the same-named elements.

tooltips = series.tooltip(); tooltips.enabled(true); ttTitle = tooltips.title().enabled(true); ttTitle.text('Information:'); series.labels().enabled(true).anchor('leftCenter').position('rightCenter').fontSize(13);

Look at the demonstration of these settings in the Single-Series Bar Chart sample:

Playground

As you can see, the settings are applied to all point in series, but sometimes it is necessary to highlight a specific point using a custom view. To make it you can define the point settings directly in a data set:

var data = [ {x: 'Department Stores', value: 737166, fill:{color: 'red', opacity: '.5'}}, {x: 'Discount Stores', value: 537166}, {x: 'Men\'s/Women\'s Specialty Stores', value: 188662}, {x: 'Juvenile Specialty Stores', value: 178662}, {x: 'All other outlets', value: 89000} ];

Using this way you can redefine all visualization parameters that are available for this type of chart:

var data = [ {x: 'Department Stores', value: 737166, fill:{color: 'red', opacity: '.7'}, hatchFill:{hatchType:'diagonal-brick',color: 'gray'}, marker:{type:'star5', fill:'gold', size: 12, enabled: true}, hoverMarker: {size: 22}}, {x: 'Discount Stores', value: 537166}, {x: 'Men\'s/Women\'s Specialty Stores', value: 188662}, {x: 'Juvenile Specialty Stores', value: 178662}, {x: 'All other outlets', value: 89000} ];

Playground

It was a simple demonstration of this feature, we've created the sample below to illustrate more opportunities:

Playground

Supported Functionality

In this way you can configure all main series settings like labels(), fill(), stroke(), markers().