charts/docs/reference/configuration.md

Configuration

With all the customizable features of Frappe Charts, this section is dedicated to enabling / disabling existing functionality.

Container

The first parameter required by the Chart constructor is the container element. You can pass in a CSS Selector or a DOM Object.

const chart = new Chart('#chart', options);
// or
const container = document.querySelector('#chart');
const chart = new Chart(container, options);

Options

The second parameter required by the Chart constructor is the options object. The minimum required configuration is to pass data values, which itself requires an array of labels and an array of datasets.

const options = {
    data: {
        labels: ["12am-3am", "3am-6am", "6am-9am", "9am-12pm", "12pm-3pm"],

        datasets: [
            {
                name: "Some Data", values: [25, 40, 30, 35, 8]
            },
            {
                name: "Another Set", values: [25, 50, -10, 15, 18]
            }
        ]
    }
}

const chart = new Chart(container, options);

data

• Type: Object
• Required Properties: labels, datasets
• Optional Properties: yMarkers, yRegions

Contains an array of labels and an array of datasets, each a value for the 2-dimensional data points.

May also have annotation parameters, for example those for yMarkers and yRegions. This is because all properties defined inside data are meant to be animatable.

data: {
    labels: ["12am-3am", "3am-6am", "6am-9am", "9am-12pm", "12pm-3pm"],

    datasets: [
        { name: "Some Data", values: [25, 40, 30, 35, 8] },
        { name: "Another Set", values: [25, 50, -10, 15, 18] }
    ],

    yMarkers: [{ label: "Marker", value: 70 }],

    yRegions: [{ label: "Region", start: -10, end: 50 }]
}

Other configurable options are listed as follows:

title

• Type: String
• Default: ''

Add a title to the Chart.

---

type

• Type: String
• Values: line | bar | axis-mixed | pie | percentage | heatmap
• Default: line

Let the chart know what type to render.

type: ‘axis-mixed’

Mixed axis chart. For this to work, you must pass the chartType value for each dataset.

const data = {
    labels: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],

    datasets: [
        {
            name: "Some Data",
            values: [18, 40, 30, 35, 8, 52, 17],
            chartType: 'bar'
        },
        {
            name: "Yet Another",
            values: [15, 20, -3, -15, 58, 12, -17],
            chartType: 'line'
        }
    ]
}

const chart = new Chart('#chart', {
    data: data
});

---

colors

• Type: Array
• Default: ['light-blue', 'blue', 'violet', 'red', 'orange', 'yellow', 'green', 'light-green', 'purple', 'magenta', 'light-grey', 'dark-grey']

Set the colors to be used for each individual unit type, depending on the chart type.

---

height

• Type: Number
• Default: 240

Set the height of the chart in pixels.

---

axisOptions

• Type: Object
• Default: {}

xAxisMode and yAxisMode

• Type: String
• Values: span | tick
• Default: span

Foo

xIsSeries

• Type: Boolean
• Default: 0

Foo

---

TooltipOptions

• Type: Object
• Default: {}

---

barOptions

• Type: Object
• Default: {}

This option controls how width of each column is calculated in the chart.

spaceRatio

• Type: Number
• Min: 0
• Max: 2
• Default: 0.5

stacked

• Type: Boolean
• Default: 0

---

lineOptions

• Type: Object
• Default: {}

Foo

---

isNavigable

• Type: Boolean
• Default: 0

Foo Example

{
    dropdownButton: '<span class="fa fa-chevron-down"></span>'
}

valuesOverPoints

• Type: Boolean
• Default: 0

Foo