tooltip is cut in pie chart











up vote
-1
down vote

favorite












I need to create a pie chart with the tooltips must be show always. I use thos library chartjs-plugin-piechart-outlabels



In my option I put this code:



plugins: {
legend: true,
outlabels: {
text: '%l %p',
color: 'white',
stretch: 20,
font: {
resizable: true,
minSize: 12,
maxSize: 18
}
}
}


and the result is this:



enter image description here



the blue color is correct because show the tooltip but with the other color the tooltip is not showed. Anyone can help me?



EDIT:
the chart is showed in this way,when I use go on link and it does an hover it shows the chart. Thi is my html component:



<div class="pieChart">
<div style="padding-bottom:50px;"></div>
<canvas baseChart
[data]="pieChartData"
[labels]="pieChartLabels"
[options]="pieChartOptions"
[chartType]="pieChartType"
</canvas>

</div>


This is my css file:



.pieChart {
position:absolute;
border:1px solid #000;
width:300px;
height:300px;
background: #ECE8E8;
}









share|improve this question
























  • You mean that the pink one should be at the top of the pie, since the small pink area is at the top?
    – Jacopo Sciampi
    Nov 9 at 14:37










  • @JacopoSciampi yeah! If you zoom image the is a pink point at the top but it cut.
    – Doflamingo19
    Nov 9 at 14:39










  • Perfect, just a question before starting to understand this plugin: did you imported its css files?
    – Jacopo Sciampi
    Nov 9 at 14:56










  • @JacopoSciampi I edit my question, yeah there is a css class that I use in the chart!
    – Doflamingo19
    Nov 9 at 15:04















up vote
-1
down vote

favorite












I need to create a pie chart with the tooltips must be show always. I use thos library chartjs-plugin-piechart-outlabels



In my option I put this code:



plugins: {
legend: true,
outlabels: {
text: '%l %p',
color: 'white',
stretch: 20,
font: {
resizable: true,
minSize: 12,
maxSize: 18
}
}
}


and the result is this:



enter image description here



the blue color is correct because show the tooltip but with the other color the tooltip is not showed. Anyone can help me?



EDIT:
the chart is showed in this way,when I use go on link and it does an hover it shows the chart. Thi is my html component:



<div class="pieChart">
<div style="padding-bottom:50px;"></div>
<canvas baseChart
[data]="pieChartData"
[labels]="pieChartLabels"
[options]="pieChartOptions"
[chartType]="pieChartType"
</canvas>

</div>


This is my css file:



.pieChart {
position:absolute;
border:1px solid #000;
width:300px;
height:300px;
background: #ECE8E8;
}









share|improve this question
























  • You mean that the pink one should be at the top of the pie, since the small pink area is at the top?
    – Jacopo Sciampi
    Nov 9 at 14:37










  • @JacopoSciampi yeah! If you zoom image the is a pink point at the top but it cut.
    – Doflamingo19
    Nov 9 at 14:39










  • Perfect, just a question before starting to understand this plugin: did you imported its css files?
    – Jacopo Sciampi
    Nov 9 at 14:56










  • @JacopoSciampi I edit my question, yeah there is a css class that I use in the chart!
    – Doflamingo19
    Nov 9 at 15:04













up vote
-1
down vote

favorite









up vote
-1
down vote

favorite











I need to create a pie chart with the tooltips must be show always. I use thos library chartjs-plugin-piechart-outlabels



In my option I put this code:



plugins: {
legend: true,
outlabels: {
text: '%l %p',
color: 'white',
stretch: 20,
font: {
resizable: true,
minSize: 12,
maxSize: 18
}
}
}


and the result is this:



enter image description here



the blue color is correct because show the tooltip but with the other color the tooltip is not showed. Anyone can help me?



EDIT:
the chart is showed in this way,when I use go on link and it does an hover it shows the chart. Thi is my html component:



<div class="pieChart">
<div style="padding-bottom:50px;"></div>
<canvas baseChart
[data]="pieChartData"
[labels]="pieChartLabels"
[options]="pieChartOptions"
[chartType]="pieChartType"
</canvas>

</div>


This is my css file:



.pieChart {
position:absolute;
border:1px solid #000;
width:300px;
height:300px;
background: #ECE8E8;
}









share|improve this question















I need to create a pie chart with the tooltips must be show always. I use thos library chartjs-plugin-piechart-outlabels



In my option I put this code:



plugins: {
legend: true,
outlabels: {
text: '%l %p',
color: 'white',
stretch: 20,
font: {
resizable: true,
minSize: 12,
maxSize: 18
}
}
}


and the result is this:



enter image description here



the blue color is correct because show the tooltip but with the other color the tooltip is not showed. Anyone can help me?



EDIT:
the chart is showed in this way,when I use go on link and it does an hover it shows the chart. Thi is my html component:



<div class="pieChart">
<div style="padding-bottom:50px;"></div>
<canvas baseChart
[data]="pieChartData"
[labels]="pieChartLabels"
[options]="pieChartOptions"
[chartType]="pieChartType"
</canvas>

</div>


This is my css file:



.pieChart {
position:absolute;
border:1px solid #000;
width:300px;
height:300px;
background: #ECE8E8;
}






javascript angular charts chart.js ng2-charts






share|improve this question















share|improve this question













share|improve this question




share|improve this question








edited Nov 12 at 5:42









Aroon

396214




396214










asked Nov 9 at 14:23









Doflamingo19

1188




1188












  • You mean that the pink one should be at the top of the pie, since the small pink area is at the top?
    – Jacopo Sciampi
    Nov 9 at 14:37










  • @JacopoSciampi yeah! If you zoom image the is a pink point at the top but it cut.
    – Doflamingo19
    Nov 9 at 14:39










  • Perfect, just a question before starting to understand this plugin: did you imported its css files?
    – Jacopo Sciampi
    Nov 9 at 14:56










  • @JacopoSciampi I edit my question, yeah there is a css class that I use in the chart!
    – Doflamingo19
    Nov 9 at 15:04


















  • You mean that the pink one should be at the top of the pie, since the small pink area is at the top?
    – Jacopo Sciampi
    Nov 9 at 14:37










  • @JacopoSciampi yeah! If you zoom image the is a pink point at the top but it cut.
    – Doflamingo19
    Nov 9 at 14:39










  • Perfect, just a question before starting to understand this plugin: did you imported its css files?
    – Jacopo Sciampi
    Nov 9 at 14:56










  • @JacopoSciampi I edit my question, yeah there is a css class that I use in the chart!
    – Doflamingo19
    Nov 9 at 15:04
















You mean that the pink one should be at the top of the pie, since the small pink area is at the top?
– Jacopo Sciampi
Nov 9 at 14:37




You mean that the pink one should be at the top of the pie, since the small pink area is at the top?
– Jacopo Sciampi
Nov 9 at 14:37












@JacopoSciampi yeah! If you zoom image the is a pink point at the top but it cut.
– Doflamingo19
Nov 9 at 14:39




@JacopoSciampi yeah! If you zoom image the is a pink point at the top but it cut.
– Doflamingo19
Nov 9 at 14:39












Perfect, just a question before starting to understand this plugin: did you imported its css files?
– Jacopo Sciampi
Nov 9 at 14:56




Perfect, just a question before starting to understand this plugin: did you imported its css files?
– Jacopo Sciampi
Nov 9 at 14:56












@JacopoSciampi I edit my question, yeah there is a css class that I use in the chart!
– Doflamingo19
Nov 9 at 15:04




@JacopoSciampi I edit my question, yeah there is a css class that I use in the chart!
– Doflamingo19
Nov 9 at 15:04

















active

oldest

votes











Your Answer






StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});


}
});














 

draft saved


draft discarded


















StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53227535%2ftooltip-is-cut-in-pie-chart%23new-answer', 'question_page');
}
);

Post as a guest















Required, but never shown






























active

oldest

votes













active

oldest

votes









active

oldest

votes






active

oldest

votes
















 

draft saved


draft discarded



















































 


draft saved


draft discarded














StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53227535%2ftooltip-is-cut-in-pie-chart%23new-answer', 'question_page');
}
);

Post as a guest















Required, but never shown





















































Required, but never shown














Required, but never shown












Required, but never shown







Required, but never shown

































Required, but never shown














Required, but never shown












Required, but never shown







Required, but never shown







Popular posts from this blog

How to pass form data using jquery Ajax to insert data in database?

National Museum of Racing and Hall of Fame

Guess what letter conforming each word