User How-To Guides

Our how-to guides are recipes to address specific and critical use cases when working with Britecharts. They assume some knowledge about Britecharts and the library structure. If this is the first time you work with Britecharts, we recommend you to read the Getting Started Tutorial first.

How to Customize the Chart's Colors

Follow these steps to customize Britecharts' charts to use different color schemas:

1. Find out if your chart supports the .colorSchema() configuration, if so, keep on reading
2. Check the Color Palettes demo page and find a palette you like
3. Import the colors helper at the top of your file
4. Set the color palette with .colorSchema(colors.colorSchemas.orange) or with any other color schema
5. Draw the chart

Note that in some charts we can only configure a gradient. Use the colorGradients object instead of colorSchemas within the colors helper. You can explore other options in the source code of the colors file.

How to Configure Time Scales

Britecharts has some logic to try guessing the best date format on time series charts from the time period of the dataset. As we haven't bulletproofed this algorithm, and sometimes users want specific formats, we also expose configuration options to set custom formats.

The next steps apply to time series charts like the line chart, stacked area chart and brush chart:

1. Render the chart using the default settings, see if the x-axis format is satisfactory. If not, keep on reading.
2. Check the chart's reference to find out the configuration options, for example, the line chart reference
3. Check the options within the axisTimeCombinations object of the chart instance:

console.log('combinations', line.axisTimeCombinations);
// Returns
{
    MINUTE_HOUR: 'minute-hour',
    HOUR_DAY: 'hour-daymonth',
    DAY_MONTH: 'day-month',
    MONTH_YEAR: 'month-year',
    CUSTOM: 'custom'
}

1. Set the xAxisFormat parameter to a value from the ones below (except 'custom')
2. Draw the chart and see if it meets your criteria. If not, try with other time combination. If still doesn't feel right, see next step.
3. Set the xAxisFormat parameter to the value 'custom'
4. Set the xAxisCustomFormat parameter to a valid D3.js time format specifier string. For example: line.xAxisCustomFormat('%H')
5. Play around with different specifiers until finding something that works. You can experiment in this block example.

Remember that for increased accuracy, all date formats in Britecharts should be provided in ISO 8601 Extended Format.