# Create

To create a chart with ipyhc you need:

• bring you data as (1) a list, (2) a numpy array or (3) a dataframe
• define highcharts chartOptions as a dict - see Highcharts doc
• pass them to the Chart constructor, along with some options - see below
• display the ipywidget thus created

This page describes the Python parameters of ipyhc and their configuration options. To see examples of graphs constructed with ipyhc, please browse the Examples section.

# Sample Setup

The params of the Chart constructor must have the following types:

# Widget options
width : int or str,
height : int,
theme : str,

# Chart setup
stock: bool,
data : list, numpy array or pandas dataframe,
options : dict,

# Customization options
unsync: bool,

The default parameters are the following:

def __init__(self,
             width='100%',
             height=0,
             theme='',
             stock=False,
             options={},
             data=[],
             unsync=False):

# User Data

data: list, default=[]

The data can only be input as a list of Series elements from Highcharts (for more information see the official documentation on Series). This module includes a collection of functions that can be used to create these Series

Here is an example of a valid data input:

data = [
  {'name': 'Track1',
   'data': [
    [0, 1.0],
    [1, 0.99],
    [2, 0.97],
    [3, 0.95],
    [4, 0.97]]
  },
  {'name': 'Track2',
   'data': [
    [0, 1.0],
    [1, 0.99],
    [2, 1.00],
    [3, 1.00],
    [4, 0.98]]
  }
]

# Chart Options

options: dict, default={}

The grid options are exactly those of Highcharts, in full transparency. It should contain all the customization options for the grid, including the JavaScript functions for custom actions like tooltip.

The Highcharts API is very rich and explicit and well documented, and their website has tons of examples that enable you to easily play with all the features. We can only recommend to use the plunkers they provide to fine tune the right configuration for your use case.

Here is a sample basic chart:

myData = [[1496151000000,153.67],[1496237400000,152.76],[1496323800000,153.18],[1496410200000,155.45],[1496669400000,153.93],[1496755800000,154.45],[1496842200000,155.37],[1496928600000,154.99],[1497015000000,148.98],[1497274200000,145.42],[1497360600000,146.59],[1497447000000,145.16],[1497533400000,144.29],[1497619800000,142.27],[1497879000000,146.34],[1497965400000,145.01],[1498051800000,145.87],[1498138200000,145.63],[1498224600000,146.28],[1498483800000,145.82],[1498570200000,143.73],[1498656600000,145.83],[1498743000000,143.68],[1498829400000,144.02],[1499088600000,143.5],[1499261400000,144.09],[1499347800000,142.73],[1499434200000,144.18],[1499693400000,145.06],[1499779800000,145.53]]
data_1 = [{'name': 'AAPL',
            'data': myData,
            'tooltip': {
                'valueDecimals': 2
            }}]

options_1 = {
        'rangeSelector': {
            'selected': 1
        },

        'title': {
            'text': 'AAPL Stock Price'
        }
}

chart = hc.Chart(data = data_1, options = options_1, stock=True)

chart

And the output:

# Parameters

This section describes the ipyhc configuration parameters. Please note that for some Highcharts features you might still need to write some Javascript, often copy-pasted and tweaked from the official documentation.

# Dimensions

width: int or str, default="100%", height: int, default=500

The size of the grid is determined by the width and height parameters. Width can either be a number of pixels or a string like 80% or 550px Otherwise the width will automatically be set to 100%, and height to 500px.

data = hc.sample.df_timeseries(N=2, Nb_bd=15+0*3700)


chart = hc.Chart(width= 600, height = 750, stock=True, data = data)

chart

And the output:

# HighStock

stock: bool, default=False

The stock parameter is used to choose whether or not the graph should be an instance of HighChart or HighStock.

# Sync Chart

unsync: bool, default=False

If you want to export the chart selected data in chart.data_out as soon as the Stock selection changes, set unsync to False.

See some examples of this synchonization in the Examples section.