# 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%
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