With these basic options, this chart is feeling cramped — the 'U.S. Average' plotline label is overlapping the first bar.
Is there a way to add padding to the top and bottom of the plot area, thereby giving a little breathing room for the plotline & its label?
JSFiddle of the problem
Plotline code:
Highcharts.setOptions({
chart: {
style: {
fontFamily: "Oswald, sans-serif",
textTransform: "uppercase"
}
}
});
var chart = new Highcharts.Chart({
"credits": {
"enabled": false
},
"chart": {
"renderTo": "container",
"type": "bar"
},
"title": {
"text": "Percent of Adults Who Binge Drank"
},
"subtitle": {
"text": "2013 | Percent of Adults Who Binge Drank"
},
"xAxis": {
"categories": ["Boston", "Denver", "Miami", "New York", "Phoenix", "San Antonio", "San Jose", "Seattle", "Washington"],
"labels": {
"useHTML": true,
"style": {
"width": "100px",
"min-width": "100px",
"text-align": "right"
}
}
},
"yAxis": {
"title": {
"text": null
},
"plotLines": [{
"color": "#9b9b9b",
"dashStyle": "shortdot",
"value": 26,
"width": 2,
"label": {
"text": "U.S. Average",
"align": "left",
"x": 5,
"rotation": 0,
"zIndex": 1000,
"useHTML": true,
"style": {
"font-size": "10px",
"background-color": "#fff"
}
}
}]
},
"series": [{
"data": [35, 26, 18, 18, 15, 21, 55, 19, 22],
"color": "#e12922"
}],
"exporting": {
"enabled": true,
"buttons": {
"contextButton": {
"menuItems": "buttons"
}
}
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/highcharts-more.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="height:400px;width:600px;margin:1.5em 1em;"></div>
Related
We have upgraded chart.js from version 2 to 3 and now the following is not working. To make a single value, which should be displayed as a line, more readable, the value was simply displayed three times and only a section of the x axis was displayed. As a result, a straight line runs completely from left to right through the whole chart.
Here is an image of what it looked like in V2 vs. now in V3:
Img-Description: left chart with version 2, all lines and areas go from left to right; right chart with version 3, the line starts left but end in the middle and the areas go down after the middle datapoint
We are using the min/max attributes for the x scale. Any ideas?
This is my ChartConfiguration:
const ctx = document.getElementById("ctx").getContext("2d");
const configuration = {
"type": "line",
"data": {
"labels": ["", "2015", ""],
"datasets": [{
"data": [8, 8, 8],
"type": "line",
"label": "Umsatzrentabilität",
"borderColor": "#FF8F00",
"backgroundColor": "#FF8F00",
"fill": false,
"yAxisID": "yRight",
}, {
"data": [18330.47727032784, 18330.47727032784, 18330.47727032784],
"type": "bar",
"label": "Gesamtleistung in TEUR",
"backgroundColor": "rgba(0,152,100,0.8)",
"hoverBackgroundColor": "#009864",
"barPercentage": 0.5,
}, {
"data": [12, 12, 12],
"type": "line",
"label": "Branchenmitte von",
"fill": "+1",
"borderColor": "#dddddd",
"backgroundColor": "rgba(60, 60, 60, 0.06)",
"yAxisID": "yRight",
}, {
"data": [9, 9, 9],
"type": "line",
"label": "Branchenmitte bis",
"fill": "-1",
"borderColor": "#dddddd",
"backgroundColor": "rgba(60, 60, 60, 0.06)",
"yAxisID": "yRight",
}],
}, "options": {
"maintainAspectRatio": false,
"responsive": true,
"scales": {
"x": {
"axis": "x",
"grid": {
"borderColor": "#bbbbbb",
"color": "#f0f0f0",
"display": true,
"drawTicks": true,
"drawBorder": true,
"drawOnChartArea": true,
},
"min": "2015",
"max": "2015",
"type": "category",
"bounds": "data",
"id": "x",
"position": "bottom",
},
"y": {
"axis": "y",
"title": {
"align": "center",
"display": true,
"text": "Gesamtleistung in TEUR",
"color": "#666",
},
"suggestedMax": 21996.572724393405,
"suggestedMin": 0,
"grid": {
"borderColor": "#bbbbbb",
"display": true,
"drawBorder": true,
"drawTicks": true,
"drawOnChartArea": true,
},
"type": "linear",
"id": "y",
"position": "left",
},
"yRight": {
"axis": "y",
"type": "linear",
"display": true,
"position": "right",
"title": {
"align": "center",
"display": true,
"text": "Umsatzrentabilität (%)",
"color": "#666",
},
"suggestedMax": 14.4,
"suggestedMin": 0,
"grid": {
"borderColor": "#bbbbbb",
"color": "#f0f0f0",
"display": true,
"drawBorder": true,
"drawOnChartArea": false,
},
"id": "yRight",
},
},
},
};
new Chart(ctx, configuration);
#ctx {
min-height: 400px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.min.js"></script>
<canvas id="ctx" />
Here is a fiddle with the current version: https://jsfiddle.net/Sue10bach/7q3n6wvb/
I created a chart in Billboard.js which looks like this:
var chart = bb.generate({
"data": {
"type": "line",
"x": "x",
"columns": columns
},
"point": {
"show": false
},
"legend": {
"show": false
},
"axis": {
"x": {
"localtime": false,
"type": "timeseries",
"tick": {
count: 7,
"format": "%b %d, %Y",
"rotate": 45,
"multiline": true
},
"label": {
"text": label,
"position": "outer-center"
},
},
"y": {
"label": {
"text": "Energy (kWh)",
"position": "outer-middle"
},
},
},
"bindto": "#main-chart"
});
Now it looks like the classic style, X axis on the bottom and Y axis on the left. I want to move the Y axis on the right of the table.
I've tried many ways to do it but without success like these ones:
-changing its name from y to y2
-adding the same code but with y2:
"y": {
"label": {
"text": "Energy (kWh)",
"position": "outer-middle"
},
},
"y2": {
"label": {
"text": "Energy (kWh)",
"position": "outer-middle"
},
},
I addied show attribute inside the label like this:
"y": {
"label": {
"show": false,
"text": "Energy (kWh)",
"position": "outer-middle"
},
},
"y2": {
"label": {
"show": true,
"text": "Energy (kWh)",
"position": "outer-middle"
},
},
Any ideas?
Try
var chart = bb.generate({
"data": {
"columns": [
["data1", 30, 200, 100, 400, 150, 250],
["data2", 50, 20, 10, 40, 15, 25]
],
"axes": {
"data1": "y2" // set additional y axis
}
},
"axis": {
"y": {
"show": false // hide default y axis
},
"y2": {
"show": true
}
},
"bindto": "#AdditionalYAxis"
});
I have tried it on their demo from github. There is an option axis where you can simply hide the axis. Hope this helps.
Working Example: https://jsfiddle.net/k3o1ws47/
I think, #Nouphal pointed exactly what to do.
The key point is set data.axes options to bound datas to y2 axis.
https://naver.github.io/billboard.js/release/latest/doc/Options.html#.data:axes
I made working demo with your code(except the data value), so replace it setting with your data and will work.
var chart = bb.generate({
"data": {
"type": "line",
"x": "x",
"columns": [
// replace with your data value
['x', '2017-10-01', '2017-10-02', '2017-10-03', '2017-10-04', '2017-10-05', '2017-10-06'],
["data1", 30, 200, 100, 400, 150, 250],
["data2", 50, 20, 10, 40, 15, 25]
],
"axes": {
"data1": "y2",
"data2": "y2"
}
},
"point": {
"show": false
},
"legend": {
"show": false
},
"axis": {
"x": {
"localtime": false,
"type": "timeseries",
"tick": {
count: 7,
"format": "%b %d, %Y",
"rotate": 45,
"multiline": true
},
"label": {
"text": "label",
"position": "outer-center"
},
},
"y": {
"show": false
},
"y2": {
"show": true,
"label": {
"text": "Energy (kWh)",
"position": "outer-middle"
},
},
},
"bindto": "#main-chart"
});
<!doctype html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/billboard.js/dist/billboard.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/billboard.js/dist/billboard.min.css">
</head>
<body>
<div id="main-chart"></div>
</body>
</html>
I have a Funnel chart from https://www.amcharts.com/demos/funnel-chart/?theme=none. It works fine.
I would like to set a fixed height for the segments, but I don't know how.
There isn't a way to set fixed height segments directly in the config, but you can fake it using your data by setting fake values for the area/height of the segments but display the real values in a separate property in your balloonText and labelText, for example:
"dataProvider": [ {
"title": "Website visits",
"areaValue": 30, //value used for segment height/area
"realValue": 300
}, {
"title": "Downloads",
"areaValue": 30,
"realValue": 123
}, // ...
],
// ...
"valueField": "areaValue", //use the area value for visual purposes
"balloonText": "[[title]]:<b>[[realValue]]</b>", //reference the actual value through the realValue
"labelText": "[[title]]: [[realValue]]",
Demo below with segments with identical height:
var chart = AmCharts.makeChart("chartdiv", {
"type": "funnel",
"theme": "none",
"dataProvider": [{
"title": "Website visits",
"areaValue": 30,
"realValue": 300
}, {
"title": "Downloads",
"areaValue": 30,
"realValue": 123
}, {
"title": "Requested prices",
"areaValue": 30,
"realValue": 98
}, {
"title": "Contacted",
"areaValue": 30,
"realValue": 72
}, {
"title": "Purchased",
"areaValue": 30,
"realValue": 35
}, {
"title": "Asked for support",
"areaValue": 30,
"realValue": 25
}, {
"title": "Purchased more",
"areaValue": 30,
"realValue": 18
}],
"titleField": "title",
"marginRight": 160,
"marginLeft": 15,
"labelPosition": "right",
"funnelAlpha": 0.9,
"valueField": "areaValue",
"balloonText": "[[title]]:<b>[[realValue]]</b>",
"labelText": "[[title]]: [[realValue]]",
"startX": 0,
"neckWidth": "40%",
"startAlpha": 0,
"outlineThickness": 1,
"neckHeight": "30%",
"export": {
"enabled": true
}
});
#chartdiv {
width: 100%;
height: 500px;
}
<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/funnel.js"></script>
<script src="https://www.amcharts.com/lib/3/plugins/export/export.min.js"></script>
<link rel="stylesheet" href="https://www.amcharts.com/lib/3/plugins/export/export.css" type="text/css" media="all" />
<script src="https://www.amcharts.com/lib/3/themes/none.js"></script>
<div id="chartdiv"></div>
I created a simple graph with amcharts and set a title.
Is it possible to change its position? In my case I want the title to be on the left of the graph, maybe even in an angle of 90 degree:
This is an extract of the code:
var chart = AmCharts.makeChart("chartdiv", {
"type": "serial",
//..
, "titles": [{
"text": "My Chart Title"
}, {
"text": "My Chart Sub-Title",
"bold": false
}]
});
Here is a fiddle.
Why don't you just use label functionality instead?
Contrary to titles, labels can be any text placed anywhere in the chart area, rotated, etc.
"allLabels": [{
"text": "My Chart Title",
"bold": true,
"x": 10,
"y": "50%",
"rotation": 270,
"width": "100%",
"align": "middle"
}, {
"text": "My Chart Sub-Title",
"bold": false,
"x": 30,
"y": "50%",
"rotation": 270,
"width": "100%",
"align": "middle"
}]
The only downside is that you will need to manually adjust chart's margins to accommodate for them. The chart does not auto-adjust margins as with titles.
Since you want the labels on the left side, the same as value axis, setting marginLeft will be ignored because the axis will try to auto-calculate the margin needed for the axis' labels. (not counting in the labels)
To fix that set ignoreAxisWidth on the value axis to true.
Here's your Fiddle updated.
As said #Lara_Belle you can modify this with css hack.
You can add css transform for move your text. I used nth-child for assign css on subtitle. Please try below.
var chart = AmCharts.makeChart("chartdiv", {
"type": "serial",
"theme": "light",
"marginRight": 70,
"dataProvider": [{
"country": "USA",
"visits": 3025,
"color": "#FF0F00"
}, {
"country": "China",
"visits": 1882,
"color": "#FF6600"
}, {
"country": "Japan",
"visits": 1809,
"color": "#FF9E01"
}, {
"country": "Germany",
"visits": 1322,
"color": "#FCD202"
}, {
"country": "UK",
"visits": 1122,
"color": "#F8FF01"
}, {
"country": "France",
"visits": 1114,
"color": "#B0DE09"
}, {
"country": "India",
"visits": 984,
"color": "#04D215"
}, {
"country": "Spain",
"visits": 711,
"color": "#0D8ECF"
}, {
"country": "Netherlands",
"visits": 665,
"color": "#0D52D1"
}, {
"country": "Russia",
"visits": 580,
"color": "#2A0CD0"
}, {
"country": "South Korea",
"visits": 443,
"color": "#8A0CCF"
}, {
"country": "Canada",
"visits": 441,
"color": "#CD0D74"
}],
"valueAxes": [{
"axisAlpha": 0,
"position": "left",
"title": "Visitors from country"
}],
"startDuration": 1,
"graphs": [{
"balloonText": "<b>[[category]]: [[value]]</b>",
"fillColorsField": "color",
"fillAlphas": 0.9,
"lineAlpha": 0.2,
"type": "column",
"valueField": "visits"
}],
"chartCursor": {
"categoryBalloonEnabled": false,
"cursorAlpha": 0,
"zoomable": false
},
"categoryField": "country",
"categoryAxis": {
"gridPosition": "start",
"labelRotation": 45
},
"export": {
"enabled": true
}, "titles": [{
"text": "My Chart Title"
}, {
"text": "My Chart Sub-Title",
"bold": false
}]
});
#chartdiv {
width: 100%;
height: 500px;
}
.amcharts-export-menu-top-right {
top: 10px;
right: 0;
}
text{
margin: 50px;
}
.amcharts-title{
transform: translate(145px,30px)
}
.amcharts-title:nth-child(2){
transform: translate(134px, 10px)
}
<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/serial.js"></script>
<script src="https://www.amcharts.com/lib/3/plugins/export/export.min.js"></script>
<link rel="stylesheet" href="https://www.amcharts.com/lib/3/plugins/export/export.css" type="text/css" media="all" />
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script>
<div id="chartdiv"></div>
UPADATE
You can just modify the transform property.
ex:
.amcharts-title{
transform: translate(145px,30px)
}
.amcharts-title:nth-child(2){
transform: translate(134px, 10px)
}
Please try now
I am working on TreeMap where I am able to give borderColor on Hover of a particular datapoint. The same in this fiddle link --> http://jsfiddle.net/vgnshs/z8ncv2d5/.
But I am in need of requirement where I should get same kind of borderColor on click of a particular dataPoint (saying to user that the Point is selected) and borderColor should persist until I click on the same point again or somewhere outside plotArea. (I see this feature is available in Bubble chart, same needed in TreeMap). Also I should be able to select multiple points and all selected points should have the same borderColor.
Currently, TreeMap's select event fills the entire point with a different color which I don't want to. Only borderColor should be changed. How can I achieve this in TreeMap?
$(function () {
$('#container').highcharts({
"chart": {
"width": 640,
"height": 480
},
"colorAxis": {
"minColor": "#202020",
"maxColor": "#B0B0B0"
},
"title": {
"text": "Datalabel Sample"
},
"subtitle": {
"text": null
},
"credits": {
"enabled": false
},
"tooltip": {
"enabled": false
},
"plotOptions": {
"series": {
"states": {
"hover": {
"borderColor": "#0000FF",
"borderWidth": 1
}
}
}
},
"legend": {
"align": "right",
"layout": "vertical",
"verticalAlign": "middle",
"symbolHeight": 380,
"enabled": true
},
"series": [{
"type": "treemap",
"layoutAlgorithm": "squarified",
"allowDrillToNode": true,
"dataLabels": {
"enabled": false
},
"levels": [{
"level": 1,
"dataLabels": {
"enabled": true,
"color": "#FFFFFF",
"allowOverlap": false,
"align": "center",
"style": {
"fontWeight": "normal",
"fontSize": "24px",
"fontStyle": "normal",
"fontFamily": "'Open Sans', Arial, Helvetica, sans-serif",
"textShadow": null
},
"overflow": false
},
"borderWidth": 1
}],
"data": [ {
"id": "Apparel",
"name": "Apparel",
"value": 130.1,
"colorValue": 130.1,
"expanded": false,
"canexpand": false
}, {
"id": "Footwear",
"name": "Footwear",
"value": 90.7,
"colorValue": 90.7,
"expanded": false,
"canexpand": true
}, {
"id": "Accessories",
"name": "Accessories",
"value": 180.5,
"colorValue": 180.5,
"expanded": false,
"canexpand": true
}]
}]
});
});
#container {
min-width: 300px;
max-width: 600px;
margin: 0 auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/heatmap.js"></script>
<script src="http://code.highcharts.com/modules/treemap.js"></script>
<div id="container"></div>
You can set select state and configure color as false. Next step is configure datalabels, by setting useHTML as true and zIndex as 30.
Example: http://jsfiddle.net/z8ncv2d5/3/