Charts

Chart component is a small wrapper for ChartJS (opens new window).

Note

By default ChartJS.defaults.global.legend.display is set to false in demo project

You don't need to use this component and if you want you can create your own custom chart components with different libraries.

In order to use Chart component. Provide a ChartJS (opens new window) compatible configuration object to config prop. Optionally you can provide height prop to define fixed height of chart.

Example

Total sessions 54'965

Growth +27%

Compared to last year

Sessions by month

Configuration object of above chart:

{
type: 'line',
data:{
    labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
    datasets:[
        {
            data:[923,1032,1123,1211,1352,1936,1758,1801,1799,1965,2043,1876],
            pointBorderColor:'#6246ea',
            pointBackgroundColor:'#fff',
            backgroundColor: 'rgba(98,70,234,0.1)',
            borderColor: '#6246ea',
            pointBorderWidth:2,
            pointHoverBorderWidth:2,
            pointHoverRadius:6,
            pointRadius:4,
            borderWidth:2,
        },
        {
            data:[123,165,237,589,234, 121,90,211,298, 429, 685, 899],
            pointBorderColor:'#4e4e4e',
            pointBackgroundColor:'#fff',
            backgroundColor: 'rgba(78,78,78,0.1)',
            borderColor: '#4e4e4e',
            pointBorderWidth:2,
            pointHoverBorderWidth:2,
            pointHoverRadius:6,
            pointRadius:4,
            borderWidth:2,
        }
    ]
},
options:{
    tooltips:{
        mode:'nearest',
        intersect: false,
        displayColors:false,
        callbacks:{
            label(tooltipInterface, data){
                return `${tooltipInterface.value} Sessions`;
            },
            // Title is
            title(tooltipInterface, data){
                tooltipInterface = tooltipInterface[0];
                let year = (new Date).getFullYear() - (tooltipInterface.datasetIndex+1)*1;
                return `${tooltipInterface.label} ${year}`;
            }
        }
    },
    scales:{
        yAxes:[
            {
                gridLines:{
                    display:false,
                },
                ticks:{
                    beginAtZero:true,
                }
            }
        ]
    }
}
}

Props

name	required	type
config	true	Object
height	false	Number