Still have questions?
Contact support
You are looking at an outdated 7.11.0 version of this document. Switch to the 7.13.0 version to see the up to date information.

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:

JsFiddle 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('diagonalbrick', '#348781')
        .hoverHatchFill('diagonalbrick', '#0000A0')

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

series.tooltip().enabled(true).title().enabled(true).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:

JsFiddle 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:'diagonalbrick',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}
];

JsFiddle Playground

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

JsFiddle Playground

Supported Functionality

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