animated bar chart icon Animated Bar Chart API and Samples

Learn how to set up and use Animated Bar Chart features and options with simple JavaScript code and HTML. All code samples use only plain HTML and JavaScript to show Animated Bar Charts, and no other third-party technologies/libraries are involved. The only dependency file is, of course, the Kyubit Charts Library, so the first thing is to include KyubitTimeCharts.js in the HTML script section. The KyubitTimeCharts.js is the only dependency file you need to include on the page to work with all features of the Kyubit JavaScript Charts Library

A Quickstart Sample

To understand the concepts and simplicity of setting up the Animated Bar Chart, observe this straightforward example of chart configuration. In essence, we're creating a config object that contains all the important data needed for the chart to be displayed. The values for the chart could be included directly in the JavasScript config object or fetched from the external CSV file. We then invoke the showBarChart library function to render the chart on a specific DIV element. In this instance, the chart's data is kept in a separate CSV file. Additional methods for providing data to the chart are discussed in subsequent API examples. 

function showChart() {
   let config = {
        title: "Quickstart Sample 01",
        width: "800",
        height: "600",
        thousandsSeparator: ".",
        decimalSeparator: ",",
        transitionTime: 4,
        measures: [{ title: "Revenue", prefix: "$" }],
        dataCSVURL: "BarSample01.csv"
    }

    kyubitTimeCharts.showBarChart("chartDiv", config);
}

Animated Bar Chart Properties

A list of all chart properties with descriptions of their usage, types, and default values.

Animated Bar Chart Event Handlers

A list of all chart event handlers.


Properties

title

(string)
Defines the chart title which is always visible in the chart's left upper corner.

description

(string)
Defines the description title that is visible when moving the mouse over the title text.

width/height

(numeric)
Chart properties width and height expect numeric input that presents number of pixels used for chart rendering size on the web page. If the "width" and "height" properties are not provided, chart width and height will depend on the parent DIV element size.

fontFamily

(string, default: "Arial")
Defines the preferred font for chart text with the fontFamiliy attribute, otherwise the Arial font will be used.

fontSizeIncrease

(numeric, default: 0)
Font size is auto-calculated based on the chart width and height (for best results). Still, it is possible to influence the final font size by setting the "fontSizeIncrease" property to values between -3 and 3. For example, to slightly increase the font, set the value to 1. To decrease the font size, set the value to -1.

darkMode

(boolean, default: false)
Display the chart in the mode with a dark background and light text and graphics.

measures

(array)
An array of measures that define the measure features. Actual values are defined in the Data property, while here in the "measures" property we define the measure attributes. Each measure object includes a title, and optional decimalPlaces, prefix, suffix, and description attributes. The Animated Bar Chart can display a single measure. The prefix controls if any sign or text is to be displayed in front of each value related to the measure. The suffix controls if any sign or text is to be displayed after each value related to the measure. The description of the measure is displayed while moving the mouse over the measure label. The measure label is displayed for the X axis.

measures: [ { title: "Revenue ", prefix: "$", decimalPlaces: 2 } ]

data

(array)
An array of items to be displayed on the chart. Each item objects include the item (title), period, and val attributes. In this example, there is no CSV data. All data with values are defined directly in the config object, data array. Decimal places are defined for the measure. Items in the data array should be ordered by the time periods in the ascending order. 

function showChart() {
    let config = {
        title: "Quickstart sample 02",
        width: "800",
        height: "600",
        darkMode: true,
        thousandsSeparator: ".",
        decimalSeparator: ",",
        transitionTime: 4,
        measures: [{ title: "Revenue", prefix: "$" }],
        data: [
            { item: "Company A", period: "2020", val: 1000000 },
            { item: "Company B", period: "2020", val: 450000 },
            { item: "Company C", period: "2020", val: 650000 },
            { item: "Company A", period: "2021", val: 1300000 },
            { item: "Company B", period: "2021", val: 80000 },
            { item: "Company C", period: "2021", val: 950000 },
            { item: "Company A", period: "2022", val: 1550000 },
            { item: "Company B", period: "2022", val: 800000 },
            { item: "Company C", period: "2022", val: 1500000 },
            { item: "Company A", period: "2023", val: 2230000 },
            { item: "Company B", period: "2023", val: 1300000 },
            { item: "Company C", period: "2023", val: 2800000 },
        ]
    }

    kyubitTimeCharts.showBarChart("chartDiv", config);
}

dataCSVURL

(string)
Defines the URL for data items to be fetched from the external CSV file (as presented in Sample 01).

csvType

(string, default: "inline")
Defines the structure of values in the CSV data. It could be defined as 'inline' (default), 'rowItems', or 'columnItems'. Various available CSV structures exist to make it easy for users to prepare CSV data depending on their data sources. These examples illustrate the CSV data structure. Learn more about expected data structures on the data structure samples page.

inline
Data items are defined one by one, where each item has a definition of the time period and the value. Items must be sorted by the period in the ascending order.

rowItems
Items are defined on rows, while time periods are defined on columns. Columns must be sorted by the period in the ascending order.

columnItems
Items are defined on columns, while time periods are defined on rows. Rows must be sorted by the period in the ascending order. 

Item;Period;Measure
Company A;2020;1000000
Company B;2020;450000
Company C;2020;650000
Company A;2021;1300000
Company B;2021;80000
Company C;2021;950000
Company A;2022;1550000
Company B;2022;800000
Company C;2022;1500000
Company A;2023;2230000
Company B;2023;1300000
Company C;2023;2800000

dataCSV

(string)
Provides the CSV data directly to the chart config object (not as an external file). The structure of data and values in the CSV file could be 'inline' (default), 'rowItems', or 'columnItems' (as explained above). 

function showChart() {
    let config = {
        title: "Sample 03",
        width: "800",
        height: "600",
        darkMode: true,
        thousandsSeparator: ".",
        decimalSeparator: ",",
        transitionTime: 4,
        measures: [{ title: "Revenue", prefix: "$" }],
        dataCSV: `Item;Period;Measure
                Company A;2020;600000
                Company B;2020;450000
                Company C;2020;650000
                Company A;2021;700000
                Company B;2021;800000
                Company C;2021;950000
                Company A;2022;650000
                Company B;2022;1100000
                Company C;2022;600000
                Company A;2023;930000
                Company B;2023;1300000
                Company C;2023;800000`
    }

    kyubitTimeCharts.showBarChart("chartDiv", config);
}

decimalSeparator

(string, default: ".")
Defines the decimal separator in the CSV file values.

thousandsSeparator

(string, default: ",")
Defines the thousands separator in the CSV file values.

showPlayControls

(boolean, default: true)
Defines if play/pause and time axis will be displayed to control animation and transition changes.

autoPlay

(boolean, default: false)
Sets if the chart should immediately start with animation upon data load.

transitionTime

(numeric, default: 4)
This property controls the duration of transition between time periods during the chart animations (in seconds).

maxItemsPerTransition

(numeric, default: 10)
Defines the maximum number of items (bars) that will appear in each transition during the animation progress.

showBarLabels

(boolean, default: true)
Use this property to show or hide item name (label) on the bar.

showLastPeriod

(boolean, default: false)
If enabled this property will set the initial display of the chart to the last period (otherwise, it will start from the first period).

animScaleX

(boolean, default: true)
Controls if the chart X axis scale will be dynamic (animated), changing the axis scale min/max values to the currently displayed values. If the axis scale is not dynamically animated, it will display the maximum value related to all data points all the time of the animation. If the chart employs logarithmic scale or autoMinMax scale options, the animScale attribute is automatically disabled.

logarithmicXaxis

(boolean, default: true)
If enabled, the chart X axis will be displayed with the logarithmic scale. In this case, the dynamic axis scale property is automatically disabled.
In the following example, the X-axis uses a logarithmic scale and is not animated. 

 function showChart(){
    let config = {
        title: "Sample 04",
        width: "800",
        height: "600",
        thousandsSeparator: ".",
        decimalSeparator: ",",
        transitionTime: 4,
        logarithmicXaxis: true,
        measures: [{ title: "Revenue", prefix: "$" }],
        data: [
            { item: "Company A", period: "2020", val: 1000000000 },
            { item: "Company B", period: "2020", val: 450000 },
            { item: "Company C", period: "2020", val: 650000000000 },
            { item: "Company A", period: "2021", val: 1300000000 },
            { item: "Company B", period: "2021", val: 80000 },
            { item: "Company C", period: "2021", val: 9500000000000 },
            { item: "Company A", period: "2022", val: 1550000000 },
            { item: "Company B", period: "2022", val: 800000 },
            { item: "Company C", period: "2022", val: 15000000000000 },
            { item: "Company A", period: "2023", val: 2230000000 },
            { item: "Company B", period: "2023", val: 1300000 },
            { item: "Company C", period: "2023", val: 28000000000000 },
        ]
    }

    kyubitTimeCharts.showBarChart("chartDiv", config);
}

autoMinMaxX

(boolean, default: true)
Controls if the X-axis scale will be automatically trimmed to focus on the data values provided. When disabled the chart axis displays a scale from 0 to max value. When enabled the axis scale will start from the value related to the minimum value of all items. When enabled the dynamic axis scale property is automatically disabled. 

function showChart(){
    let config = {
        title: "Sample 05",
        width: "800",
        height: "600",
        thousandsSeparator: ".",
        decimalSeparator: ",",
        transitionTime: 4,
        autoMinMaxX: true,
        measures: [{ title: "Revenue", prefix: "$" }],
        data: [
            { item: "Company A", period: "2020", val: 112000 },
            { item: "Company B", period: "2020", val: 115000 },
            { item: "Company C", period: "2020", val: 116000 },
            { item: "Company A", period: "2021", val: 113000 },
            { item: "Company B", period: "2021", val: 108000 },
            { item: "Company C", period: "2021", val: 120000 },
            { item: "Company A", period: "2022", val: 105000 },
            { item: "Company B", period: "2022", val: 128000 },
            { item: "Company C", period: "2022", val: 115000 },
            { item: "Company A", period: "2023", val: 123000 },
            { item: "Company B", period: "2023", val: 130000 },
            { item: "Company C", period: "2023", val: 128000 },
        ]
    }

    kyubitTimeCharts.showBarChart("chartDiv", config);
}

colorPalette

(string, default: "Standard")
Defines the preferred color palette used by the Animated Bar Chart. Available options are Warm, Cold, Strong, and (default) Standard.

Example...
colorPalette: "Warm"

customPaletteColors

(string)
Defines the custom palette colors to be used by the Animated Bar Chart. Hexadecimal color codes are separated with an empty space. If defined, it will override the colorPalette definition.

Example...
customPaletteColors: "#5B9BD5 #4472C4"

itemDefinitions (item images)

(array)
Defines the item image to be rendered along the bar element. The image could be available on a relative or an absolute URL path. 

function showChart() {
    let config = {
        title: "Sample 07",
        width: "800",
        height: "600",
        darkMode: true,
        thousandsSeparator: ".",
        decimalSeparator: ",",
        transitionTime: 4,
        itemDefinitions: [
            { item: "Company A", imageURL: "img/apple.png" },
            { item: "Company B", imageURL: "img/google.png" },
            { item: "Company C", imageURL: "img/microsoft.png" },
            { item: "Company D", imageURL: "img/tesla.png" }
        ],
        measures: [{ title: "Revenue", prefix: "$" }],
        dataCSVURL: "BarSample06.csv"
    }

    kyubitTimeCharts.showBarChart("chartDiv", config);
}

countryFlags

(boolean, default: false)
If the items on the chart are countries, use this setting to quickly set country flag images to be displayed along the bars. The item name needs to match the country name (in English) or two-letter country code (ISO 3166). 

function showChart() {
     let config = {
        title: "Sample 07",
        width: "800",
        height: "600",
        darkMode: true,
        thousandsSeparator: ".",
        decimalSeparator: ",",
        transitionTime: 4,
        countryFlags: true,
        measures: [{ title: "Revenue", prefix: "$" }],
        dataCSVURL: "BarSample07.csv"
    }

    kyubitTimeCharts.showBarChart("chartDiv", config);
}

Multilingual Options

To display the text of the chart user interface (mostly visible in the chart menu) in a language other than English, utilize the provided properties that allow you to modify specific phrases. This enables you to input your preferred phrases in any language, including English, that best suits your needs. For your convenience, we have provided sets of translated phrases in Spanish, German, French, and Portuguese. You can easily copy these sets into your code for a quick translation of the user interface texts. 

function showChart() {
    let config = {
        title: "Sample 08",
        width: "800",
        height: "600",
        darkMode: true,
        thousandsSeparator: ".",
        decimalSeparator: ",",
        transitionTime: 4,
        countryFlags: true,
        measures: [{ title: "Revenue", prefix: "$" }],
        dataCSVURL: "BarSample07.csv",
        txtOptions: "Opciones",
        txtSpeed: "Velocidad",
        txtImageDownload: "Descarga de imagen",
        txtChartDownload: "Descarga de gráficos",
        txtResetVisuals: "Restablecer",
        txtDownload: "Descargar",
        txtFullscreen: "Pantalla completa",
        txtExitFullscreen: "Salir de pantalla completa",
        txtLegend: "Leyenda",
        txtScale: "Escala",
        txtLogarithmic: "Logarítmico",
        txtAbout: "Acerca de"
    }

    kyubitTimeCharts.showBarChart("chartDiv", config);
}

txtOptions: "Optionen",
txtSpeed: "Geschwindigkeit",
txtImageDownload: "Bild-Download",
txtChartDownload: "Chart-Download",
txtResetVisuals: "Zurücksetzen",
txtDownload: "Herunterladen",
txtFullscreen: "Vollbild",
txtExitFullscreen: "Vollbild beenden",
txtScale: "Skalierung",
txtLogarithmic: "Logarithmisch",
txtAbout: "Um",

Event Handlers

onItemClick

{ e, item }
To catch the event when a user clicks on the chart item (bar) use the onItemClick event handler. It will pass 2 arguments, event object and item object. Item object contains all information about the clicked item. 

function showChart() {
    let config = {
        title: "Sample 09",
        width: "800",
        height: "600",
        thousandsSeparator: ".",
        decimalSeparator: ",",
        transitionTime: 4,
        onItemClick: clickItemHandler,
        measures: [ { title: "Revenue", prefix: "$" }],
        dataCSVURL: "BarSample06.csv"
    }

    kyubitTimeCharts.showBarChart("chartDiv", config);
}

function clickItemHandler(e)
{
    const item = e.item;
    alert(item.item + " is clicked. Measure 2 value is " + item.val2);
}

onSelectionReset

{ chartDivID }
The event is raised when the chart items are unselected. It passes the DIV id attribute of the related chart as an argument.

Get started with Kyubit Charts Library

JavaScript Charts Library Download Begin your journey with the Kyubit Charts Library. Download it now and evaluate the charts using your own data. Seamlessly integrate the Kyubit JavaScript library into your website or web application—it's as simple as adding a single JavaScript file to your page. Get started with stunning chart visualizations! 🚀