I want to just remove the number 33 from this, I want it to just show series-4
what to do to hide it from tooltip?
You can customize the tooltip by providing formatters. In this case, you'll want to override both the title (seriesName) and the y value label. In place of the y value, return a blank string.
You'll need to provide a formatter for the title as well because not doing so will default to the series title being shown followed by a colon.
tooltip: {
y: {
formatter: function(val) {
return ''
},
title: {
formatter: function (seriesName) {
return seriesName
}
}
}
}
Related
How can we return an HTML element like anchor element using formatter function.
xAxis: {
data: xAxisData,
axisLabel: {
formatter: function (value) {
return "{<a href='https://www.google.com'>" + value + "</a>}";
}
}
is this even possible with eCharts?
For this labels it's not supporting. For formatting you can use rich text but if you want to bind some actions on label's click check my previous answer.
I'm using Chart.js (doughnut chart) and I would like to ask if is there any choice to highlight area programmatically? I mean - when I click on a button, then the specific area will be highlighted.
Thanks for your reply.
Just loop through the doughnut segments, match based on label and swap / restore the fill color.
function highlight(label) {
myDoughnutChart.segments.forEach(function (segment, i) {
if (segment.label == label) {
if (segment.fillColor == segment.highlightColor)
segment.restore(["fillColor"]);
else
segment.fillColor = segment.highlightColor;
myDoughnutChart.render();
}
})
}
Fiddle - http://jsfiddle.net/35of1Lzg/
I've disabled tooltips and the tooltip highlight by setting tooltipEvents = [], but if you want them back you can always remove it from the options, but then hover / mouseout and the button click will do the same thing.
To popup the tooltip too when highlighting use this
function highlight(label) {
myDoughnutChart.segments.forEach(function (segment) {
if (segment.label == label) {
if (segment.fillColor == segment.highlightColor)
segment.restore(["fillColor"]);
else
segment.fillColor = segment.highlightColor;
myDoughnutChart.render()
}
})
var activeSegements = [];
myDoughnutChart.segments.forEach(function (segment) {
if (segment.fillColor === segment.highlightColor) {
activeSegements.push(segment)
}
});
myDoughnutChart.showTooltip(activeSegements, true)
}
http://jsfiddle.net/jdr5381e/
FYI the fiddles are no longer working, you'll need to replace the links to the Chart.min.js
I used these to get them working: https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.1.1/Chart.js
I need display in tooltip title series chart. I have many series in my chart.
I try this:
->add series to chart<-
addSeries("Title1", new dojox.charting.StoreSeries(store, {query: {}}, {x: "time", y: "tzewn", text: "Title1"})).
I get data from json file. But text: isn't in my store data.
->tooltip<-
new dojox.charting.action2d.Tooltip(chartT, "default"
,{text: function(e) {
var tooltiptext = e.y +", "+e.text;
return tooltiptext;
}
}
);
but I get: (e.y) the correct value and undefined (e.text),
How I can display name series in tooltip?
Your StoreSeries is defined to look for a property named "Title1" in each object that comes from the store and assign that value to "text".
If you want the name of the series in your tooltip text, then try using e.run.name in your tooltip text function:
new dojox.charting.action2d.Tooltip(chartT, "default", {
text: function(e) {
return e.y.y + ", " + e.run.name;
}
});
I need to create a pie chart with labels indicating what each area means, but also another info overimposed over each area. If I use both data labels and a legend, they'll show the same text. How can I have both with different texts, or emulate that effect?
A mock of what I'd like to get:
Using the format or formatter config properties of the dataLabels, you can make them say whatever you want.
pie: {
dataLabels: {
enabled: true,
formatter: function(){
return 'Y Value: ' + this.y; // y value
}
},
showInLegend: true
}
Quick example.
So I have an editable line of text on my website. Whenever the text is changed and is above a certain length, I truncate the text.
Simplified jsfiddle here - http://jsfiddle.net/3kwCr/1/
On subsequent clicks on the text to edit, the truncated value with ellipsis is picked up. How do I get jEditable to pick up the actual value which is present as an attribute in the div?
data: function() { $('.editable-value').attr('value') }
will not work as I have several of these editable lines of text
I need something like
data: function() { this.attr('value') }
where this would the div object to which .editable has been applied to.
Just wrap this into jQuery object so you can use jQuery methods on it. Below is updated code. I also updated the example jsFiddle.
$('.editable').editable(function(value, settings) {
$(this).attr('value', value);
if (value.length > 10) {
return(value.slice(0,10)) + '...';
} else {
return(value);
}
}, {
data : function(value) { return($(this).attr('value')); },
type : 'text',
submit : 'OK'
});