Line Chart Hover Style 3

by duarteleao

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/require.js/2.1.19/require.min.js"></script>
<script src="//webdetails.github.io/ccc/charts/lib/amd/require.config.js"></script>
<script src="//webdetails.github.io/ccc/charts/lib/q01-01.js"></script>
<div id="cccExample" />

JavaScript

require([
  "ccc/pvc", 
  "ccc/def", 
  "ccc/protovis"
], function(pvc, def, pv) {

    new pvc.LineChart({
        canvas: "cccExample",
        width:  500,
        height: 400,

        // Data source
        crosstabMode: false,

        // Interaction
        animate:    false,
        selectable: false,
        hoverable:  true,

        // Line plot
        line_strokeStyle: pvc.finished(function(scene) {  
            var c = this.delegate();
            return scene.isActive || 
                   scene.isActiveSeries() ||    
                   !scene.anyActive()
                ? c
                : c.alpha(0.3);
        }),

        // Cartesian axes
        baseAxisBandSizeRatio: 0.5
    })
    .setData(relational_04)
    .render();
});