I'm using Highcharts 5 in styled mode, when I create a radar chart in this mode I get a circle around the outside of the chart.
Styled Mode Example
<script src="https://code.highcharts.com/js/highcharts.js"></script>
<script src="https://code.highcharts.com/js/highcharts-more.js"></script>
<script src="https://code.highcharts.com/js/modules/exporting.js"></script>
<link rel="stylesheet" href="http://code.highcharts.com/css/highcharts.css">
<div id="container" style="min-width: 310px; max-width: 400px; height: 400px; margin: 0 auto"></div>
$(function() {
Highcharts.chart('container', {
"chart": {
"polar": true,
},
"exporting": {
"enabled": true,
"filename": "bar",
"url": "http://export.highcharts.com",
"chartOptions": {
"chart": {
"backgroundColor": "white"
}
}
},
"plotOptions": {
"pie": {
"dataLabels": {
"enabled": true
}
}
},
"series": [{
"data": [
[1379790000],
[1330780000],
[324897000],
[260581000],
[206927000],
[194772000],
[86987000],
[161401000],
[146727405],
[126693000]
],
"id": "series-7"
}],
"xAxis": {
"categories": ["China", "India", "United States", "Indonesia", "Brazil", "Pakistan", "Nigeria", "Bangladesh", "Russia", "Japan"],
"title": {},
"labels": {
"rotation": 0,
"enabled": true
},
"lineWidth": 0,
"tickmarkPlacement": "on"
},
"yAxis": {
"title": {},
"gridLineInterpolation": "polygon",
"lineWidth": 0
},
"title": {
"text": "Population of Countries"
},
"subtitle": {
"text": "Bar Chart"
},
"loading": false
});
});
http://jsfiddle.net/8pv79gy9/
However if I run the same configuration in the normal mode used by Highcharts previously I don't get the circle round the outside.
http://jsfiddle.net/fex0hnoy/
Any suggestions or solution welcome, this maybe a Highcharts 5 issue.
In a styled mode lineWidth property is replaced by css stroke-width.
If you want to set axis line width to 0, then you have to use css for axis line class (by default it is 1)
.highcharts-xaxis .highcharts-axis-line {
stroke-width: 0;
}
example: http://jsfiddle.net/8pv79gy9/1/
Or can use yaxis as Circle:
"yAxis": {
"title": {},
"gridLineInterpolation": "circle",
"lineWidth": 0
},
http://jsfiddle.net/8pv79gy9/2/
Related
I am trying to create sunburst chart in d3.js. What I want is if the value is positive I should get green arc. and when the the value is negative the arc should be red. Another issue I am facing is whenever I enter negative value that arc/slice just hide. I also want to show my that slice with negative value.
<style>
html,
body,
#container {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
background: #562F34;
background: #33573D;
}
</style>
<script src="https://cdn.anychart.com/releases/8.9.0/js/anychart-core.min.js"></script>
<script src="https://cdn.anychart.com/releases/8.9.0/js/anychart-sunburst.min.js"></script>
<script src="https://cdn.anychart.com/releases/8.9.0/js/anychart-data-adapter.min.js"></script>
<div id="container"></div>
<script>
file2 = [
{
"name": "KES100",
"fill": "#33573D",
"children": [
{
"name": "TEXTILE",
"id": "textileId",
"children": [
{
"continent": "textileId",
"name": "COST",
"value": "10",
"points": "30"
},
{
"continent": "textileId",
"name": "COOT",
"value": "10",
"points": "30"
},
{
"continent": "textileId",
"name": "AHTM",
"value": "10",
"points": "30"
}
]
},
{
"name": "OIL",
"id": "oilId",
"children": [
{
"continent": "oilId",
"name": "PSO",
"value": "20"
},
{
"continent": "oilId",
"name": "BYCO",
"value": "20"
},
{
"continent": "oilId",
"name": "MPCL",
"value": "10"
}
]
}
]
}
]
anychart.onDocumentReady(function () {
anychart.data.loadJsonFile('file2.json',
function (data) {
var color1 = [255, 0, 0];
var color2 = [0, 0, 255];
anychart.color.blend(color1, color2, 0.2);
var chart = anychart.sunburst(data, "as-tree");
chart.calculationMode("parent-independent");
chart.labels().format('{%Name}\n{%Value}');
console.log(chart.labels())
chart.tooltip().format('{%Name}:{%Value}');
chart.container("container");
chart.draw();
});
});
</script>
The "value" should always be positive as it affects the size of the node directly. You can provide negative values in the data and then preprocess it. Copy the positive/negative value to another custom field of the item data, and leave the absolute value in the "value" field. Then you can apply condition coloring by a callback function in fill() chart method. For details, check the sample based on your snippet.
I am currently trying to display errorBars with a column chart which is working for the most part. The problem is the ordering of the error bars. They are back to font.
I have used the same data on a line chart which works fine for me.
This is my setup for my HighCharts options:
"chart": {
"type": "column",
"renderTo": {}
},
"title": {
"text": "Line chart",
"style": {
"color": "#000",
"fontFamily": "Arial, Helvetica, sans-serif",
"fontSize": "1.1rem",
"fontWeight": "bold"
}
},
"subtitle": {
"text": "Browser market share data 2019-2020",
"style": {
"color": "#000",
"fontFamily": "Arial, Helvetica, sans-serif",
"fontSize": "0.9rem",
"fontWeight": "regular"
}
},
"xAxis": [
{
"categories": [
"Chrome",
"Internet Explorer\n ",
"Firefox\n ",
"Edge\n ",
"Safari\n ",
"Sogou Explorer\n ",
"Opera\n ",
"QQ\n ",
"Other\n "
],
"title": {},
"accessibility": {
"description": "Line chart"
}
}
],
"tooltip": {
"shared": true
},
"plotOptions": {
"series": {
"showInLegend": true,
"events": {}
},
"column": {
"maxPointWidth": 75
}
},
"legend": {
"enabled": true,
"itemStyle": {
"font": "Arial, Helvetica, sans-serif",
"color": "#000"
},
"itemHoverStyle": {
"color": "gray"
}
},
"accessibility": {
"description": null
},
"series": [
{
"name": "2019",
"yAxis": 0,
"data": [
61.41,11.84,10.85,1,1,1.64,1.6,1,2.61
]
},
{
"name": "2020",
"yAxis": 0,
"data": [
50,40,20,15,14,12,6,4,3
]
},
{
"name": "Confidence interval",
"type": "errorbar",
"yAxis": 0,
"data": [
[55,65],
[5,15],
[7,25],
[1,2],
[1,2],
[1,4],
[1,3],
[1,2],
[2,4]
],
"tooltip": {
"pointFormat": "<strong>2019 error range</strong>: {point.low}-{point.high}<br/>"
}
},
{
"name": "Confidence interval",
"type": "errorbar",
"yAxis": 0,
"data": [
[45,55],
[30,50],
[15,30],
[10,20],
[10,20],
[6,18],
[4,8],
[1,6],
[1,6]
],
"tooltip": {
"pointFormat": "<strong>2020 error range</strong>: {point.low}-{point.high}<br/>"
}
}
],
"credits": {
"enabled": false
},
"exporting": {
"enabled": false
},
"colors": [
"#b2182b",
"#d6604d",
"#f4a582",
"#fddbc7",
"#d1e5f0",
"#92c5de",
"#4393c3",
"#2166ac"
]
}
And this is the result:
As you can see from the hover state that the labels are displaying correctly but on the chart the error bars don't match each column. They are in reverse and misaligned. Also they are slightly different shape from each other.
I have used this HighCharts guide for reference, mine doesn't look much different from the example https://www.highcharts.com/demo/error-bar/grid-light
The difference here is because the chart differently places the columns and error bars, especially it is visible with multiple columns.
After simplifying the demo, I was able to add one property called pointPlacement to the error series with the number to shift that series to a proper place.
API: https://api.highcharts.com/highcharts/series.errorbar.pointPlacement
Live demo: https://jsfiddle.net/BlackLabel/L3xwoe92/
I've created a stacked column chart using highchart it works fine. but when I toggle the visibility of a particular legend the column overlaps each other.
Highcharts.chart('container', {
"chart": {
"type": "column",
"zoomType": "x",
"panning": true,
"panKey": "shift",
"shadow": true,
"style": {
"fontFamily": "RotisSemiSans"
}
},
"title": {
"text": ""
},
"subtitle": {},
"xAxis": {
"type": "datetime"
},
"yAxis": [
{
"title": {
"text": "some value"
},
"opposite": false,
"type": "column"
}
],
"tooltip": {},
"plotOptions": {
"series": {
"stacking": "normal"
},
"line": {
"marker": {
"enabled": false
}
},
"area": {
"marker": {
"enabled": false
}
},
"pointRange": 1
},
"legend": {
"itemWidth": 150,
"maxHeight": 65
},
"credits": {
"enabled": false
},
"series": [
{
}],
});
Tried setting stack name but that too didn't work. setting the pointRange doesn't work either.
see it the JSFiddle
Your idea of using pointRange is a good way of dealing with it, you just misplaced it a bit. You have:
"plotOptions": {
"series": {
"stacking": "normal"
},
// ...
"pointRange": 1
},
Instead do (JSFiddle demonstration):
"plotOptions": {
"series": {
"stacking": "normal"
"pointRange": 5 * 60 * 1000
},
// ...
},
My example above uses 5 minutes, since that appears to be your interval. I am unsure of why it fails in the first place, but this should resolve the overlapping issue.
I'm trying to use an HTML title with a very large tooltip. However I can't seem to get the tooltip background to appear above the title.
Here's my code:
var chart = new Highcharts.Chart({
"chart": {
"type": "gauge",
"renderTo": "chart-2-container",
"marginTop": 60
},
"series": [{
"data": [{
"y": 55.6,
"name": "Area",
"tooltip": "Area: 50.6 %<br/>Minimum: 50.6<br/>3rd quartile: 57.1<br/>2nd quartile: 59.4<br/>1st quartile: 64.7<br/>Maximum: 75.7"
}],
"name": "%"
}],
"tooltip": {
"borderColor": "#E2E2E2",
"borderRadius": 5,
"backgroundColor": "white",
"style": {
"color": "#454545",
"fontSize": 14,
"fontFamily": "Arial, sans-serif",
"zIndex": 9999,
"lineHeight": 14 * 1.4
},
"formatter": function() {
return this.point.tooltip;
}
},
"title": {
"floating": true,
"useHTML": true,
"style": {
"zIndex": 1,
},
"text": "This is some link as a very long title which will probably wrap a couple of lines"
},
"yAxis": {
"title": null,
"tickPixelInterval": 72,
"tickLength": 10,
"minorTickLength": 8,
"minorTickWidth": 1,
"min": 50.6,
"max": 75.7,
"plotBands": [{
"from": 50.6,
"to": 57.1,
"color": "#ee2c34",
"thickness": 15,
}, {
"from": 57.1,
"to": 59.4,
"color": "#f07627",
"thickness": 15,
}, {
"from": 59.4,
"to": 64.7,
"color": "#a88735",
"thickness": 15,
}, {
"from": 64.7,
"to": 75.7,
"color": "#2c876d",
"thickness": 15,
}]
},
"pane": {
"startAngle": -150,
"endAngle": 150
}
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='chart-2-container' style="width: 400px; height: 300px;">
</div>
(also as a fiddle https://jsfiddle.net/d6q1gt4m/)
The problem is that the background is always behind the title. I could switch to non-html title but then I have the problem that only the 1st line is actually a URL if the title is wrapping (and I need to reapply all my link styles).
Does anyone know how I can get the svg tooltip to appear on top of HTML ?
Note: I would like to avoid having to set useHTML for the tooltip if possible as that opens up another can of worms for me.
With CSS and updating tooltip and tooltip formatter the problem is fixed.
For reference check tooltip
Updated tooltip
"tooltip": {
"backgroundColor": "rgba(255,255,255,0)",
"borderWidth": 0,
"borderRadius": 1,
"shadow": false,
"useHTML": true,
"style": {
"color": "#454545",
"fontSize": 14,
"fontFamily": "Arial, sans-serif",
"zIndex": 9999,
"lineHeight": 1.8
},
"formatter": function() {
return "<div>" + this.point.tooltip + "</div>";
}
},
css
.highcharts-tooltip {
z-index: 9998;
}
.highcharts-tooltip div {
background-color: white;
border: 1px solid #E2E2E2;
opacity: 1;
z-index: 9999!important;
padding: 5px
}
Fiddle demo
I am using AmCharts for my website, I would like to make it full size. FOr example, I have this code:
<style>
#chartdiv {
width : 50%;
height : 500px;
float : left;
}
</style>
<script>
var chart = AmCharts.makeChart( "chartdiv", {
"type": "pie",
"theme": "light",
"autoMargins": false,
"marginTop": 2,
"marginBottom": 2,
"marginLeft": 2,
"marginRight": 2,
"fontSize": 14,
"dataProvider": [
{
"type": "Open Issues",
"number": op
},
{
"type": "Closed Issues",
"number": cl
},
{
"type": "Deferred Issues",
"number": df
},
{
"type": "Vendor Issues",
"number": ve
},
{
"type": "FAQ Issues",
"number": fq
}
],
"valueField": "number",
"titleField": "type",
"export": {
"enabled": true,
"libs": {
"path": "http://www.amcharts.com/lib/3/plugins/export/libs/"
}
}
} );
</script>
<div id="chartdiv"></div>
I want to make the charts expand fully. Is that possible? I referred to their site help. It said to use margins as 0 and set automargins as false, I have tried that but doesn't work.
Try this
width : 100%;
height : 100%;
Make sure you don't have any parent div above chart div.