How do you remove the underlined data labels for a drilldown pie chart in Highcharts? Adding:
textDecoration: 'none'
to the dataLabels doesn't seem to work
Style for active axis label is set through drilldown.activeAxisLabelStyle
$('#container').highcharts({
drilldown: {
activeAxisLabelStyle: {
textDecoration: 'none',
...
API: http://api.highcharts.com/highcharts#drilldown.activeAxisLabelStyle
Demo: http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/drilldown/labels/
text {
text-decoration: none !important;
}
will work.
here's your fiddle: http://jsfiddle.net/jkn79qut/
Edit: This answer is better by the way - if you can avoid polluting your css with !important, you should.
Actually, it's "activeDataLabelStyle" the parameter to change.
drilldown: {
activeAxisLabelStyle: {
textDecoration: 'none',
fontStyle: 'italic'
},
activeDataLabelStyle: {
textDecoration: 'none',
fontStyle: 'italic'
},
series: [{.....
jsfiddle
Regards,
I don't know to do it the "highcharts" way, but you can do it in CSS with this:
text {
text-decoration: none !important;
}
The chart has inline code giving it text-decoration: underline;, so you need the !important hack to override it, in this case.
Updated JSFiddle
Here's an embedded example:
$(function () {
// Create the chart
$('#container').highcharts({
chart: {
type: 'pie'
},
title: {
text: 'Browser market shares. January, 2015 to May, 2015'
},
subtitle: {
text: 'Click the slices to view versions. Source: netmarketshare.com.'
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
format: '{point.name}: {point.y:.1f}%'
}
}
},
tooltip: {
headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}%</b> of total<br/>'
},
series: [{
name: "Brands",
colorByPoint: true,
data: [{
name: "Microsoft Internet Explorer",
y: 56.33,
drilldown: "Microsoft Internet Explorer"
}, {
name: "Chrome",
y: 24.03,
drilldown: "Chrome"
}, {
name: "Firefox",
y: 10.38,
drilldown: "Firefox"
}, {
name: "Safari",
y: 4.77,
drilldown: "Safari"
}, {
name: "Opera",
y: 0.91,
drilldown: "Opera"
}, {
name: "Proprietary or Undetectable",
y: 0.2,
drilldown: null
}]
}],
drilldown: {
series: [{
name: "Microsoft Internet Explorer",
id: "Microsoft Internet Explorer",
data: [
["v11.0", 24.13],
["v8.0", 17.2],
["v9.0", 8.11],
["v10.0", 5.33],
["v6.0", 1.06],
["v7.0", 0.5]
]
}, {
name: "Chrome",
id: "Chrome",
data: [
["v40.0", 5],
["v41.0", 4.32],
["v42.0", 3.68],
["v39.0", 2.96],
["v36.0", 2.53],
["v43.0", 1.45],
["v31.0", 1.24],
["v35.0", 0.85],
["v38.0", 0.6],
["v32.0", 0.55],
["v37.0", 0.38],
["v33.0", 0.19],
["v34.0", 0.14],
["v30.0", 0.14]
]
}, {
name: "Firefox",
id: "Firefox",
data: [
["v35", 2.76],
["v36", 2.32],
["v37", 2.31],
["v34", 1.27],
["v38", 1.02],
["v31", 0.33],
["v33", 0.22],
["v32", 0.15]
]
}, {
name: "Safari",
id: "Safari",
data: [
["v8.0", 2.56],
["v7.1", 0.77],
["v5.1", 0.42],
["v5.0", 0.3],
["v6.1", 0.29],
["v7.0", 0.26],
["v6.2", 0.17]
]
}, {
name: "Opera",
id: "Opera",
data: [
["v12.x", 0.34],
["v28", 0.24],
["v27", 0.17],
["v29", 0.16]
]
}]
}
});
});
text {
text-decoration: none !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/data.js"></script>
<script src="http://code.highcharts.com/modules/drilldown.js"></script>
<div id="container" style="min-width: 310px; max-width: 600px; height: 400px; margin: 0 auto"></div>
<!-- Data from www.netmarketshare.com. Select Browsers => Desktop share by version. Download as tsv. -->
<pre id="tsv" style="display:none">Browser Version Total Market Share
Microsoft Internet Explorer 8.0 26.61%
Microsoft Internet Explorer 9.0 16.96%
Chrome 18.0 8.01%
Chrome 19.0 7.73%
Firefox 12 6.72%
Microsoft Internet Explorer 6.0 6.40%
Firefox 11 4.72%
Microsoft Internet Explorer 7.0 3.55%
Safari 5.1 3.53%
Firefox 13 2.16%
Firefox 3.6 1.87%
Opera 11.x 1.30%
Chrome 17.0 1.13%
Firefox 10 0.90%
Safari 5.0 0.85%
Firefox 9.0 0.65%
Firefox 8.0 0.55%
Firefox 4.0 0.50%
Chrome 16.0 0.45%
Firefox 3.0 0.36%
Firefox 3.5 0.36%
Firefox 6.0 0.32%
Firefox 5.0 0.31%
Firefox 7.0 0.29%
Proprietary or Undetectable 0.29%
Chrome 18.0 - Maxthon Edition 0.26%
Chrome 14.0 0.25%
Chrome 20.0 0.24%
Chrome 15.0 0.18%
Chrome 12.0 0.16%
Opera 12.x 0.15%
Safari 4.0 0.14%
Chrome 13.0 0.13%
Safari 4.1 0.12%
Chrome 11.0 0.10%
Firefox 14 0.10%
Firefox 2.0 0.09%
Chrome 10.0 0.09%
Opera 10.x 0.09%
Microsoft Internet Explorer 8.0 - Tencent Traveler Edition 0.09%</pre>
Related
I have built a website that includes a number of graphics and maps from HighCharts. All of them work great on Firefox, Safari, Chrome, Opera, Microsoft Edge and on cell phones, but for some reason none of them will render on any version of Internet Explorer. I am actually hoping to just get it to render on IE 11 and not worry about the rest as they are no longer supported by Microsoft, but so far, I am unable to find the problem. I have attached the code for one of the simpler graphics I'm using for folks to review.
I have tried some of the common recommendations I have found online; namely, I have set it up so that there are no duplicates of the required HighCharts and jQuery scripts for any given page, and I have the following meta tag in the head of each page on the site.
<meta http-equiv="X-UA-Compatible" content="IE=edge">
I would be grateful for any help figuring out how to resolve this problem. Here's a link to the site in question: http://165.22.82.145
Here are the scripts I'm using for this particular example, which are located on each page under Header Scripts (this is a WordPress site):
<script src="https://code.highcharts.com/highcharts.src.js"></script>
<script src="https://code.highcharts.com/modules/drilldown.js"></script>
<script
src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"></script>
Here is the code for the graphic:
Highcharts.chart('container-2', {
chart: {
backgroundColor: '#f3f7fa',
type: 'column'
},
title: {
text: ''
},
subtitle: {
text: ''
},
xAxis: {
categories: ['ciudadanos', 'instituciones', 'social', 'económica', ],
title: {
text: null
}
},
yAxis: {
min: 1,
title: {
text: 'Total'
},
max: 10,
endOnTick: false,
labels: {
overflow: 'justify'
}
},
tooltip: {
valueSuffix: ''
},
plotOptions: {
bar: {
dataLabels: {
enabled: true
}
}
},
credits: {
enabled: false
},
exporting: {
buttons: {
contextButton: {
align: 'center',
x: 0
}
},
chartOptions: {
chart: {
events: {
load: function() {
this.renderer.image('#',
275, // x
20, // y
75, // width
40, // height
).add();
}
}
}
}
},
series: [{
name: '2019',
showInLegend: false,
color: '#6497b1',
data: [5.512, 7.592, 0.628, 0.894]
}, {
name: '2018',
showInLegend: false,
color: '#dc005a',
data: [6.553, 5.319, 0.499, 1.495]
}]
});
<script src="https://code.highcharts.com/highcharts.src.js"></script>
<script src="https://code.highcharts.com/modules/drilldown.js"></script>
<script
src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"></script>
<h2 class="doubletab">Title here <br>2018 - 2019</h2>
<div class="ranking-graphic-wrapper">
<div id="container-2" style="width:100%; height:450px">
</div>
</div>
I tested the issue on Internet Explorer, and the console shows an error in this bit of code :
load: function() {
this.renderer.image('#',
275, // x
20, // y
75, // width
40, // height
).add();
The error can come from the last trailing comma after 40, which is a syntax that is not supported by Internet Explorer : Trailing commas
I am using HighCharts and I want to be able to use comma values as data input.
The standard approach of Highcharts is to create a Piechart by using for example the following datapoints:
data: [{
name: 'Microsoft Internet Explorer',
y: 0.1
}, {
name: 'Chrome',
y: 0.5
}]
Via an external source I retrieve my data (dutch annotation instead of US-us) as follows:
data: [{
name: 'Microsoft Internet Explorer',
y: 0,1
}, {
name: 'Chrome',
y: 0,5
}]
This wil not work because Highcharts can not handle this because it interperates the y points as two values.
Does anyone knows a solution how I could use comma as data y input points perhaps by using a formatter?
For a demo see this JSFIDDLE
You could replace the comma value with a dot value by using replace and parsing it into a float:
y: parseFloat(('1,5').replace(/\,/g, '.'))
http://jsfiddle.net/y30ktm2a/
Hi I am not sure what is your aim if you would like see on tooltip than you set below code before initialize chart you can find Internationalization
Highcharts.setOptions({
lang: {
decimalPoint: ','
}
});
Edited for working code
Highcharts.setOptions({
lang: {
decimalPoint: ','
}
});
Highcharts.chart('container', {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
title: {
text: 'Browser market shares January, 2015 to May, 2015'
},
series: [{
name: 'Brands',
data: [{
name: 'Microsoft Internet Explorer',
y: parseFloat(('1,5').replace(/\,/g, '.'))
}, {
name: 'Chrome',
y: parseFloat(('4').replace(/\,/g, '.'))
}]
}]
});
I want to create a chart that displays some values in form of a pie. For that I took the Library chart.js. But there is something wrong
I've following JS-Code:
$(function(){
var ie = 12,
firefox = 7,
chrome = 15,
safari = 13,
opera = 4,
chart = $('#chart')[0];
var charObj = new Chart(chart, {
data: {
datasets: [{
data: [
firefox,
safari,
ie,
opera,
chrome
],
backgroundColor: [
"#FF6384",
"#4BC0C0",
"#FFCE56",
"#000",
"#36A2EB"
],
label: 'Browser' // for legend
}],
labels: [
"Firefox",
"Safari",
"Internet Explorer",
"Opera",
"Chrome"
]
},
type: 'polarArea'
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.4/Chart.bundle.min.js"></script>
<canvas id="chart" width="700px" height="700px"></canvas>
Why is my Opera Value not being displayed? And when clicking on Opera (at the legend) it hides my Firefox value in the chart?
It looks that your version of chart.js have some bugs. Try using latest version. Example on jsfiddle. Current version of chart.js is 2.5.0
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.bundle.min.js"></script
When I enable the crosshair feature in my chart, everything works OK in Chrome 56, but when I upgraded Chrome to 57 (even chrome 58 and ZingChart 2.6.0 now), The CPU usage is always above 25% when hovering the chart such as to see a crosshair. When I have 2 charts, CPU usage goes up to 99% and the browser slows and crashes soon after.
I tried disabling all features to see what was the cause of this issue, and when I disable the crosshair, CPU usage is normal again. And if I disable everything but the crosshair feature, the same CPU hogging effect is observed.
The only way to free the resources is by terminating the tab.
Here is my code:
var dataChart = {
id: "ShSDbePYhAxC",
data: {
type: "area",
"crosshair-x": {
"plot-label": {
text: "The %t Series has a value of %v."
}
},
gui: {
behaviors: [
{
id: "Reload",
enabled: "none"
}
],
contextMenu: {
customItems: [
{
function: "zingAlert()",
id: "zingAlert",
text: "zing Alert"
}
]
}
},
item: {
angle: -30
},
legend: {
"background-color": "white",
"border-color": "black",
"border-radius": "5px",
"border-width": 2,
layout: "1xauto",
padding: "10%",
x: "12%",
y: "90%"
},
plot: {
alphaArea: 1,
aspect: "spline",
"bar-width": "15px",
"contour-on-top": false,
lineWidth: "2px",
stacked: true,
marker: {
visible: false
},
tooltip: {
visible: false
}
},
plotarea: {
"margin-bottom": "23%",
"margin-left": "dynamic"
},
"scale-x": {
item: {
angle: -30
},
labels: [
"Name0", "Name1", "Name2", "Name3", "Name4"
]
},
"scale-y": {
label: {
"font-size": "15%",
text: "Number Of Visitors"
}
},
series: [
{
text: "Text A",
values: [11111, 222222, 3333333, 444444, 55555]
},
{
text: "Text B",
values: [6666, 777777, 88888, 99999, 12121212]
}
]
},
height: 550,
output: "canvas",
width: "100%",
}
So we have been leaning to believe this may be a chrome and Angular issue. To confirm this can you revert your zingchart version to an older version like v2.2.2. You can reach this version through the cdn at the following links
Root directory:
http://cdn.zingchart.com/2.2.2/
ZingChart.min:
http://cdn.zingchart.com/2.2.2/zingchart.min.js
Modules:
http://cdn.zingchart.com/2.2.2/modules/
If the problem still happens its a browser and Angular issue and we know where to focus our efforts. If the problem goes away it's directly a ZingChart issue.
I searched a lot but i am not finding any suitable solution to my problem. I am using HighChart plugins to create pie chart as well as bar chart.
My problem is, after hovering on any bar chart or pie chart default tool-tip appears, in that i want to use css property word-break & white-space in that tooltip. Right now the text getting cut if it goes outside of container width.
I tried overwriting the .highcharts-tooltip css but is not working.
See in example, hover on blue & black slice you will get to know the issue i am facing.
.highcharts-tooltip {
word-break: break-word !important;
white-space: normal !important;
}
Here is JsFiddle
Any help is Appreciated.
Thanks In Advance
To be able to customize your tooltip like this you will have set the tooltip option useHtml to true:
tooltip: {
useHTML: true
}
From Higcharts documentation:
useHTML: BooleanSince 2.2
Use HTML to render the contents of the tooltip instead of SVG. Using HTML
allows advanced formatting like tables and images in the tooltip.
Then you need to set the CSS attribute to the span element of the .highcharts-tooltip (I also added a fixed width):
.highcharts-tooltip span {
width: 140px;
white-space:normal !important;
}
Working Fiddle
Just enable the useHTML property for the tooltip and you can style your own tooltip (incl. word-break and white-space.
tooltip: {
useHTML: true,
formatter: function() {
return "<div class='tooltip-key'><span>" + this.key + "</span></div>"
}
},
Check out the fiddle or run the snippet below
$(function() {
$('#container').highcharts({
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
title: {
text: 'Browser market shares January, 2015 to May, 2015'
},
tooltip: {
useHTML: true,
formatter: function() {
return "<div class='tooltip-key'><span>" + this.key + "</span></div>"
}
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
showInLegend: false,
dataLabels: {
enabled: false
},
}
},
series: [{
name: 'Brands',
colorByPoint: true,
data: [{
name: 'Microsoft Internet Explorer Microsoft Internet Explorer Microsoft Internet Explorer Microsoft Internet Explorer Microsoft Internet Explorer Microsoft Internet Explorer Microsoft Internet Explorer Microsoft Internet Explorer',
y: 56.33
}, {
name: ' Chrome Chrome Chrome Chrome Chrome Chrome Chrome Chrome Chrome Chrome Chrome Chrome Chrome Chrome Chrome',
y: 24.03,
sliced: true,
selected: true
}, {
name: 'Firefox',
y: 10.38
}, {
name: 'Safari',
y: 4.77
}, {
name: 'Opera',
y: 0.91
}, {
name: 'Proprietary or Undetectable',
y: 0.2
}]
}]
});
});
.tooltip-key {
width: 300px;
word-break: break-word;
white-space: normal;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharttable.org/master/jquery.highchartTable-min.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div>
Source: http://www.highcharts.com/docs/chart-concepts/tooltip#formatter