Line Charts

import React from 'react';
import ReactApexChart from 'react-apexcharts';

const BasicExample = () => {
    const options = {

        chart: {
            height: 350,
            type: 'line',
            zoom: {
                enabled: false
            },
        },
        dataLabels: {
            enabled: false
        },
        stroke: {
            curve: 'straight',
            width: 2
        },
        xaxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'oct', 'Nov', 'Dec'],
            axisBorder: {
                show: false,
            },

        }
    };

    const series = [{
        name: "Desktops",
        data: [145, 52, 38, 24, 33, 26, 21, 20, 6, 8, 15, 10]
    }];

  return <ReactApexChart options={options} series={series} type="line"  height={350} />
}

export default BasicExample;

import React from 'react';
import ReactApexChart from 'react-apexcharts';

const LineWithDataLabels = () => {
    const options = {

        chart: {
            height: 350,
            type: 'line',
            dropShadow: {
                enabled: true,
                color: '#000',
                top: 18,
                left: 7,
                blur: 10,
                opacity: 0.2
            },
            toolbar: {
                show: false
            }
        },
        colors: ['#77B6EA', '#545454'],
        dataLabels: {
            enabled: true,
        },
        stroke: {
            curve: 'smooth',
            width: 2
        },
        markers: {
            size: 1
        },
        xaxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'],
            labels: {
                style: {

                },
            },
            title: {
                text: 'Month',
            }
        },
        yaxis: {
            title: {
                text: 'Temperature',
            },
            min: 5,
            max: 40
        },
        legend: {
            show: false,
        }
    };

    const series = [{
        name: "High - 2013",
        data: [28, 29, 33, 36, 32, 32, 33]
    },
    {
        name: "Low - 2013",
        data: [12, 11, 14, 18, 17, 13, 13]
    }
    ];

  return <ReactApexChart options={options} series={series} type="line" height={350} />
}

export default LineWithDataLabels;

import React from 'react';
import ReactApexChart from 'react-apexcharts';

const ZoomableTimeSeries = () => {
    var ts2 = 1484418600000;
    var dates = [];
    for (var i = 0; i < 120; i++) {
        ts2 = ts2 + 86400000;
        var innerArr = [ts2, dataSeries[1][i].value];
        dates.push(innerArr)
    }
    var options = {

        chart: {
            type: 'area',
            stacked: false,
            height: 350,
            zoom: {
                type: 'x',
                enabled: true,
                autoScaleYaxis: true
            },
            toolbar: {
                autoSelected: 'zoom'
            }
        },
        dataLabels: {
            enabled: false
        },
        stroke: {
            width: 2
        },
        markers: {
            size: 0,
        },
        fill: {
            type: 'gradient',
            gradient: {
                shadeIntensity: 1,
                inverseColors: false,
                opacityFrom: 0.5,
                opacityTo: 0,
                stops: [0, 90, 100]
            },
        },
        yaxis: {
            labels: {
                formatter: function (val) {
                    return (val / 1000000).toFixed(0);
                },

            },
            title: {
                text: 'Price'
            },
        },
        xaxis: {
            type: 'datetime',
        },
        tooltip: {
            shared: false,
            y: {
                formatter: function (val) {
                    return (val / 1000000).toFixed(0)
                }
            }
        }
    };

    var series = [{
        name: 'XYZ MOTORS',
        data: dates
    }];

  return <ReactApexChart options={options} series={series} type="area" height={350} />
}

export default ZoomableTimeSeries;

import React from 'react';
import ReactApexChart from 'react-apexcharts';

const SynchronizedChart = () => {
    function generateDayWiseTimeSeries(baseval, count, yrange) {
        var i = 0;
        var series = [];
        while (i < count) {
            var x = baseval;
            var y = Math.floor(Math.random() * (yrange.max - yrange.min + 1)) + yrange.min;

            series.push([x, y]);
            baseval += 86400000;
            i++;
        }
        return series;
    }

    var options3 = {

        chart: {
            id: 'fb',
            group: 'social',
            type: 'line',
            height: 160
        },
        dataLabels: {
            enabled: false
        },
        stroke: {
            curve: 'straight',
            width: 2
        },
        toolbar: {
            tools: {
                selection: false
            }
        },
        markers: {
            size: 6,
            hover: {
                size: 10
            }
        },
        yaxis: {
            tickAmount: 2,
            labels: {
                minWidth: 40
            }
        },
        xaxis: {
            type: 'datetime',
            axisBorder: {
                show: false,
            },
        },
        colors: ['#008FFB'],

    };

    var series3 = [{
        data: generateDayWiseTimeSeries(new Date('11 Feb 2017').getTime(), 20, {
            min: 10,
            max: 60
        })
    }];



    var optionsLine2 = {

        chart: {
            id: 'tw',
            group: 'social',
            type: 'line',
            height: 160
        },
        dataLabels: {
            enabled: false
        },
        stroke: {
            curve: 'straight',
            width: 2
        },
        toolbar: {
            tools: {
                selection: false
            }
        },
        markers: {
            size: 6,
            hover: {
                size: 10
            }
        },
        xaxis: {
            type: 'datetime',
            axisBorder: {
                show: false,
            },
        },
        colors: ['#546E7A'],
        yaxis: {
            labels: {
                minWidth: 40
            }
        }
    };

    var seriesLine2 = [{
        data: generateDayWiseTimeSeries(new Date('11 Feb 2017').getTime(), 20, {
            min: 10,
            max: 30
        }),

    }];



    var optionsArea = {

        chart: {
            id: 'yt',
            group: 'social',
            type: 'area',
            height: 160
        },
        dataLabels: {
            enabled: false
        },
        stroke: {
            curve: 'straight',
            width: 2
        },
        toolbar: {
            tools: {
                selection: false
            }
        },
        markers: {
            size: 6,
            hover: {
                size: 10
            }
        },
        xaxis: {
            type: 'datetime',
            axisBorder: {
                show: false,
            },
        },

        colors: ['#00E396'],
        yaxis: {
            labels: {
                minWidth: 40
            }
        }
    };

    var seriesArea = [{
        data: generateDayWiseTimeSeries(new Date('11 Feb 2017').getTime(), 20, {
            min: 10,
            max: 60
        })
    }];

  return (
    <>
        <ReactApexChart options={options3} series={series3} type="line" height={160} />
        <ReactApexChart options={optionsLine2} series={seriesLine2} type="line" height={160} />
        <ReactApexChart options={optionsArea} series={seriesArea} type="area" height={160} />
    </>
  )
}

export default SynchronizedChart;

import React from 'react';
import ReactApexChart from 'react-apexcharts';

const BrushChart = () => {
    function generateDayWiseTimeSeries(baseval, count, yrange) {
        var i = 0;
        var series = [];
        while (i < count) {
            var x = baseval;
            var y = Math.floor(Math.random() * (yrange.max - yrange.min + 1)) + yrange.min;

            series.push([x, y]);
            baseval += 86400000;
            i++;
        }
        return series;
    }

    var data = generateDayWiseTimeSeries(new Date('11 Feb 2017').getTime(), 185, {
        min: 30,
        max: 90
    })

    var options = {

        series: [{
            data: data
        }],
        chart: {
            type: 'line',
            id: 'chart2',
            height: 230,
            toolbar: {
                autoSelected: 'pan',
                show: false
            }
        },
        colors: ['#546E7A'],
        stroke: {
            width: 2
        },
        dataLabels: {
            enabled: false
        },
        fill: {
            opacity: 1,
        },
        markers: {
            size: 0
        },
        xaxis: {
            type: 'datetime',
            axisBorder: {
                show: false,
            },
        }
    };

    var series4 = [{
        data: data
    }];


    var optionsLine = {

        chart: {
            height: 130,
            id: 'chart1',
            type: 'area',
            brush: {
                target: 'chart2',
                enabled: true
            },
            selection: {
                enabled: true,
                xaxis: {
                    min: new Date('19 Jun 2017').getTime(),
                    max: new Date('14 Aug 2017').getTime()
                }
            },
        },
        colors: ['#008FFB'],
        fill: {
            type: 'gradient',
            gradient: {
                opacityFrom: 0.91,
                opacityTo: 0.1,
            }
        },
        xaxis: {
            type: 'datetime',
            axisBorder: {
                show: false,
            },
            tooltip: {
                enabled: false
            }
        },
        yaxis: {
            tickAmount: 2
        },
    };

    var seriesLine = [{
        data: data
    }];

  return (
    <>
        <ReactApexChart options={options} series={series4} type="line" height={230} />
        <ReactApexChart options={optionsLine} series={seriesLine} type="area" height={130} />
    </>
  )
}

export default BrushChart;

import React from 'react';
import ReactApexChart from 'react-apexcharts';

const GradientLineChart = () => {
    var options5 = {

        chart: {
            height: 350,
            type: 'line',
        },
        stroke: {
            width: 2,
            curve: 'smooth'
        },
        xaxis: {
            type: 'datetime',
            axisBorder: {
                show: false,
            },
            categories: ['1/11/2000', '2/11/2000', '3/11/2000', '4/11/2000', '5/11/2000', '6/11/2000', '7/11/2000', '8/11/2000', '9/11/2000', '10/11/2000', '11/11/2000', '12/11/2000', '1/11/2001', '2/11/2001', '3/11/2001', '4/11/2001', '5/11/2001', '6/11/2001'],
            tickAmount: 10,
        },
        fill: {
            type: 'gradient',
            gradient: {
                shade: 'dark',
                gradientToColors: ['#FDD835'],
                shadeIntensity: 1,
                type: 'horizontal',
                opacityFrom: 1,
                opacityTo: 1,
                stops: [0, 100, 100, 100]
            },
        },
        markers: {
            size: 4,
            colors: ["#FFA41B"],
            strokeColors: "#fff",
            strokeWidth: 2,
            hover: {
                size: 7,
            }
        },
        yaxis: {
            min: -10,
            max: 40,
            title: {
                text: 'Engagement',
            },
        }
    };

    var series5 = [{
        name: 'Likes',
        data: [4, 3, 10, 9, 29, 19, 22, 9, 12, 7, 19, 5, 13, 9, 17, 2, 7, 5]
    }];

  return <ReactApexChart options={options5} series={series5} type="line" height={350} />
}

export default GradientLineChart;

import React from 'react';
import ReactApexChart from 'react-apexcharts';

const DashedLineChart = () => {
    var options = {

        chart: {
            height: 350,
            type: 'line',
            zoom: {
                enabled: false
            },
        },
        dataLabels: {
            enabled: false
        },
        stroke: {
            width: [2, 2, 2],
            curve: 'straight',
            dashArray: [0, 8, 5]
        },

        legend: {
            tooltipHoverFormatter: function (val, opts) {
                return val + ' - ' + opts.w.globals.series[opts.seriesIndex][opts.dataPointIndex] + ''
            }
        },
        markers: {
            size: 0,
            hover: {
                sizeOffset: 6
            }
        },
        xaxis: {
            categories: ['01 Jan', '02 Jan', '03 Jan', '04 Jan', '05 Jan', '06 Jan', '07 Jan', '08 Jan', '09 Jan',
                '10 Jan', '11 Jan', '12 Jan'
            ],
            axisBorder: {
                show: false,
            },
        },
        tooltip: {
            y: [{
                title: {
                    formatter: function (val) {
                        return val + " (mins)"
                    }
                }
            },
            {
                title: {
                    formatter: function (val) {
                        return val + " per session"
                    }
                }
            },
            {
                title: {
                    formatter: function (val) {
                        return val;
                    }
                }
            }
            ]
        },
    };

    var series = [{
        name: "Session Duration",
        data: [45, 52, 38, 24, 33, 26, 21, 20, 6, 8, 15, 10]
    },
    {
        name: "Page Views",
        data: [35, 41, 62, 42, 13, 18, 29, 37, 36, 51, 32, 35]
    },
    {
        name: 'Total Visits',
        data: [87, 57, 74, 99, 75, 38, 62, 47, 82, 56, 45, 47]
    }
    ];

  return <ReactApexChart options={options} series={series} type="line" height={350} />
}

export default DashedLineChart;