dvxCharts - Interactive Charts for JavaScript

dvxCharts Examples

This sample demonstrates how to specify the chart data points highlighting appearance.

For detailed implementation, please take a look at the HTML code tab.

 
<!DOCTYPE html>
<html>
<head>
    <title>Highlighting Example - JavaScript Chart by dvxCharts</title>
    <link rel="stylesheet" type="text/css" href="../../css/dvxCharts.chart.min.css" />
    <link rel="stylesheet" type="text/css" href="../../themes/base/styles.css" />
    <script src="../../js/dvxCharts.chart.min.js" type="text/javascript"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <style>
        .example-container {
            width: 100%;
            max-width: 500px;
            height: 300px;
        }
    </style>
    
    <style>
        .mySeries .dvx-chart-series-item:hover {
            fill: red;
            stroke: black;
            stroke-width: 1px;
            cursor: pointer;
        }
    </style>
    <script lang="javascript" type="text/javascript">
        var chart = new dvxCharts.Chart({
            title: 'Highlighting',
            legend: {
                title: 'Legend'
            },
            animation: {
                duration: 1
            },
            series: [
                {
                    type: 'column',
                    class: 'mySeries',
                    title: 'Column',
                    data: [['A', 46], ['B', 35], ['C', 68], ['D', 30], ['E', 27], ['F', 85], ['D', 43], ['H', 29]]
                }
            ]
        });
        chart.write('container');
    </script>

</head>
<body>
    <div>
        <div id="container" class="example-container">
        </div>
    </div>
</body>
</html>