CODEWITHSUNDEEP
javascriptjqueryhtmlcsshighcharts
dliv
dliv

Reputation: 685

Highcharts.js: scrollable innterText?

Based on the code of this Highchart example, I would like to display some text in the center of the donut circle, when a certain tile is clicked. Is it now possible, to make the displayed text scrollable when it doesn't fit nicely into the circle's inner area?

What I have so far

$(function () {
    var colors = ['#8d62a0', '#ceb3d8', '#d5dddd'];
    var chart = new Highcharts.Chart({
        chart: {
            renderTo: 'vacation-time-chart',
            type: 'pie',
            height: 300,
            width: 300,
            borderRadius: 0
        },
        credits: {
            enabled: false
        },
        title: false,
        tooltip: {
      formatter: function() {
                     return '<b>'+this.y+'</b>';
                    }
                },
        plotOptions: {
            pie: {
                borderWidth: 6,
                startAngle: 90,
                innerSize: '75%',
                size: '100%',
                shadow: true,
                // {
                //     color: '#000000',
                //     offsetX: 0,
                //     offsetY: 2,
                //     opacity: 0.7,
                //     width: 3
                // },
                dataLabels: false,
                stickyTracking: false,
                states: {
                    hover: {
                        enabled: false
                    }
                },
                point: {
                events: {

                    click: function(){
                        this.series.chart.innerText.attr({text: this.txt});
                    }
                }
                }
            }
        },

        series: [{
            data: [
                {y:40, color: colors[0], txt: 'yoyo'},
                {y:10, color: colors[1],  txt: 'dada'},
                {y:60, color: colors[2],  txt: 'this is a longer text that I would like to be scrollable. this is a longer text that I would like to be scrollable. this is a longer text that I would like to be scrollable. this is a longer text that I would like to be scrollable. this is a longer text that I would like to be scrollable.this is a longer text that I would like to be scrollable. this is a longer text that I would like to be scrollable.'}
            ]
            // data: [
            //     ['Firefox',   44.2],
            //     ['IE7',       26.6],
            //     ['IE6',       20],
            //     ['Chrome',    3.1],
            //     ['Other',    5.4]
            // ]
        }]
    },
     function(chart) { // on complete

        var xpos = '50%';
        var ypos = '53%';
        var circleradius = 102;
        var boundingBox;
        var series = chart.series[0];
        var zones;

    // Render the text
    chart.innerText = chart.renderer.label('Articles mentioning XY', 135, 125).add();
    boundingBox = chart.innerText.getBBox();
    chart.innerText.css({
            display:"inline-block",
            position:"absolute",
            top:"1px",
            width: "150px",
            height:"30px",
            color: '#4572A7',
            fontSize: '12px',
            overflow: 'auto',
            textAlign: 'block'

      }).attr({
            // why doesn't zIndex get the text in front of the chart?
            x: series.center[0] - boundingBox.width / 2 + chart.plotLeft / 2,
            y: series.center[1] + boundingBox.height / 2 + chart.plotTop,
            zIndex: 999
        }).add();
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <script src="http://code.highcharts.com/highcharts.js"></script>
</head>
<body>

<div id="vacation-time-chart" style="min-width: 300px; height: 300px; margin: 0 auto"></div>
<script src="testfile.js"></script>

</body>
</html>

Could anyone please help me with this? Adding overflow: auto (or scroll) to the innterText.css properties doesn't seem to be the solution here.

Upvotes: 0

Views: 61

Answers (1)

Sajeetharan
Sajeetharan

Reputation: 222720

You can do this,

function defineInnerData(name, y, obj) { // on complete
        var chart=$("#container").highcharts();       
        $( "#pieChartInfoText" ).remove();       
        var textX = chart.plotLeft + (chart.plotWidth  * 0.5);
        var textY = chart.plotTop  + (chart.plotHeight * 0.5);
        var span = '<span id="pieChartInfoText" style="position:absolute; text-align:center;left: 235px;top:210px;width: 130px;">';
        span += '<span style="font-size: 15px">'+ y +'</span><br>';
        span += '<span style="font-size: 12px">'+ name +'</span>';
        span += '</span>';

        $("#addText").append(span);
        span = $('#pieChartInfoText');
        span.css('left', textX + (span.width() * -0.5));
        span.css('top', textY + (span.height() * -0.5)); 

    }
    defineInnerData("", "Tap the slices of this chart to see more");

And call it inside,

series: {
        cursor: 'pointer',
        point: {
          events: {
            mouseOver: function() {
              console.log(this)
              defineInnerData(this.name, this.y, this);
            }
          }
        },

DEMO

Upvotes: 1

Related Questions