How to set plot area width and height in Highcharts? - plot

I'm plotting a map made by a series of points in HighCharts. I want that map to be properly scaled and be a perfect square.
Thus, i've set the chart height and width at the same value:
$(function () {
$('#map-container').highcharts({
chart: {
type: 'scatter',
zoomType: 'xy',
height: 225,
width: 225
},
title: {
text: null
},
subtitle: {
text: null
},
yAxis: {
gridLineWidth: 0,
minorGridLineWidth: 0,
lineColor: 'transparent',
minorTickLength: 0,
tickLength: 0,
min: <?php echo $lat_bon_min; ?>,
max: <?php echo $lat_bon_max; ?>,
labels: {
enabled: false
},
title: {
text: null
}
},
xAxis: {
gridLineWidth: 0,
minorGridLineWidth: 0,
lineColor: 'transparent',
minorTickLength: 0,
tickLength: 0,
min: <?php echo $lon_bon_min; ?>,
max: <?php echo $lon_bon_max; ?>,
labels: {
enabled: false
},
title: {
text: null
}
},
tooltip: {
enabled: false,
},
plotOptions: {
series: {
marker: {
enabled: true,
symbol: 'circle',
radius: 2
}
}
},
series: [{
showInLegend: false,
type: 'scatter',
color: 'rgba(223, 83, 83, .5)',
data: map_data,
keys: ['time', 'x', 'y']
}]
});
});
The problem is that the chart container is a square, but the plot area is not.
I made a screenshot of the result. Red line is the map, black square is the chart container (which is a perfect square), blue rectangle is the plot area which you can see is not a square.
How can i set plot area size in order to make it a perfect square?

You can extend Highcharts with new function. Here you can find information about extending Highcharts:
http://www.highcharts.com/docs/extending-highcharts/extending-highcharts
As you will see in my demo, I wrapped setChartSize function and give them possibility to use parameters from your chart options:
chart: {
plotAreaWidth: 300,
plotAreaHeight: 200
},
Function is also positioning your plot area in the middle of chart container.
example:
http://jsfiddle.net/izothep/eph5secj/2/

In your chart default values of spacing are used and the biggest is a bottom spacing with value of 15 while others are of value 10 each. When setting all spacing to 15 you will get a square (196 x 196 px).
Example: http://jsfiddle.net/5825mzLs/

You might want to use marginLeft, marginRight, marginTop and marginBottom properties.
The margin options (marginLeft, marginTop etc) give the margin to the actual plot area and does not apply to other elements on the chart (labels, legend etc)
See example in Hightscharts Docs: https://www.highcharts.com/docs/chart-design-and-style/design-and-style

Related

Amcharts 5 CSS Element

I'm using Amchart 5, I trying to customize the colors, labels and other stuffs using CSS. But Amchart 5 only shows the charts as Canvas not as individual element like amchart 4.
amchart Canvas - Inspect Panel
If someone have solution please let me know, it'll be very helpful.
Thank you in advance.
I'm expecting a code to enables the css in the chart.
You cannot use CSS this way with amCharts 5 because, contrary to amCharts 4, it uses the Canvas API instead of SVG. There is an exception when you need HTML content, though...
Canvas API is generally way faster than SVG, however it paints outside DOM tree, which means you can't target individual chart elements via JavaScript or CSS.
Migrating from amCharts 4 – amCharts 5 Documentation
To customize chart elements, you have to define settings in your JS code. A label, for instance, can be configured like this:
am5.Label.new(root, {
text: "Title",
fill: am5.color("#ff0000"),
fontSize: 25,
fontWeight: "500",
fontStyle: "italic",
textAlign: "center",
x: am5.percent(50),
centerX: am5.percent(50),
dy: -60
// ...
});
You can find a complete list of settings there: Label – amCharts 5 Documentation
Here is a basic example:
am5.ready(() => {
let root = am5.Root.new("chartdiv");
let chart = root.container.children.push(am5xy.XYChart.new(root, {
paddingTop: 50
}));
// ========================= HERE =========================
chart.children.unshift(am5.Label.new(root, {
text: "Title",
fill: am5.color("#ff0000"),
fontSize: 25,
fontWeight: "500",
fontStyle: "italic",
textAlign: "center",
x: am5.percent(50),
centerX: am5.percent(50),
dy: -50
}));
// ==================================================
let xAxis = chart.xAxes.push(am5xy.CategoryAxis.new(root, {
categoryField: "category",
renderer: am5xy.AxisRendererX.new(root, {})
}));
let yAxis = chart.yAxes.push(am5xy.ValueAxis.new(root, {
renderer: am5xy.AxisRendererY.new(root, {})
}));
let series = chart.series.push(am5xy.ColumnSeries.new(root, {
name: "Series",
xAxis: xAxis,
yAxis: yAxis,
categoryXField: "category",
valueYField: "value"
}));
let data = [{
category: "Category 1",
value: 10
}, {
category: "Category 2",
value: 20
}, {
category: "Category 3",
value: 15
}];
xAxis.data.setAll(data);
series.data.setAll(data);
});
#chartdiv {
width: 100%;
height: 350px;
}
<script src="https://cdn.amcharts.com/lib/5/index.js"></script>
<script src="https://cdn.amcharts.com/lib/5/xy.js"></script>
<div id="chartdiv"></div>

React-Chartjs-2: How do I add gradients in the doughnut chart?

I want to create this:
Aspiration
So far, I have managed to create this:
crap
I want to move the color label descriptions that are appearing above the chart to the left side.
Here's my code:
const data = {
datasets: [
{
data: [20, 30, 50],
backgroundColor: ["#EB6262", "#39BDE7", "#0B8878"],
borderWidth: 8,
borderColor: theme.palette.white,
hoverBorderColor: theme.palette.white,
},
],
labels: ["Pending", "In Process", "Completed"],
};
<Doughnut data={data} />

Echart Dragging points with more than 1 graphical element issue

I have created a chart with 3 points. I have added two graphical elements as circle and rectangle (line) for dragging the points.
Circle dragging should apply for all three points in the graph as in the expected behavior screenshot below.
Line dragging is a vertical shift for graph to move it vertically.
Circle dragging does not apply for all 3 points when I return both graphical elements in the elements array as in the code. It just applies only for 1st point.
When I return one graphical element at a time it works.
Current Behaviour
image of how chart works now
Below I have included the code which returns graphic elements
myChart.setOption({
graphic: data.map(function (item, dataIndex) {
let rec = {
type: 'group',
left: 'center',
position: myChart.convertToPixel('grid', item),
draggable: 'vertical',
ondrag: function (dx, dy) {
onPointDraggingLine(dataIndex, [this.x, this.y]);
},
children: [
{
type: 'rect',
top: '200x',
shape: {
width: 470,
height: 0
},
style: {
stroke: 'gray',
lineWidth: 5,
lineDash: [6]
},
cursor: 'move'
}
]
};
let onlyCrc = {
type: 'circle',
position: myChart.convertToPixel('grid', item),
draggable: true,
ondrag: function (dx, dy) {
onPointDragging(dataIndex, [this.x, this.y]);
},
shape: {
cx: 0,
cy: 0,
r: symbolSize / 2
},
invisible: false,
z: 100,
cursor: 'move'
};
return { elements: [rec, onlyCrc] };
})
});
I have tried to return graphical elements as array of objects .And I have tried by giving a condition for dataIndex while mapping. but didn't work. Expected behavior is as below.
Expected Behavior.
image of how chart should work
Below I have attached the whole code I tried in Codepen.
Link to Minimal Reproduction
https://codepen.io/rushaidrilaf/pen/bGKONRj
I was able to Solve this. Started to resolve it by pointing the dragging function to 2nd point in the graph and updating the position of circular graphical element while dragging the horizontal line.
solution can be viewed from this link
https://codepen.io/rushaidrilaf/pen/bGKONRj
enter code here

change the legend.y property on browser resize

we use the highchart control with Angular and bootstrap.
To adjust the vertical space between the chart and the legend (both are rendered by highchart as svg elements), we set the y property of the legend on page load (in the controller) like this:
$scope.chartContracts = {
options: {
chart: {
type: 'pie',
marginBottom: 50
},
legend : {
layout: 'horizontal',
align: 'center',
verticalAlign: 'bottom',
x: 0,
y: 4,
Now in one of the Bootstraps layouts, the spacing (y) should be -10 in stead of 4 because for some reason an extra spacing is added.
So it should be based on media query or something similar I guess?
The question is how to do this... I tried with css but I can't seem to style SVG elements (they are called <g>)?
You can check window width and then return correct value.
var wWidth = $(window).width(),
value;
if(wWidth < 400) {
value = 5;
} else {
value = 10;
}
//scope
y: value

Put dots and style the chart

I would like to place orange dots like such on a highcharts:
http://www.dev2one.com/econometering/highcharts/graph-conso.jpg
Any suggestion how to make them ? and style them too
Thanks alot
Regards
The first place to look is the Highcharts API which you can find here:
http://api.highcharts.com/highcharts
To remove the lines and format the marker, you need to look at the plotOption.line. In your fiddle, you have added the lineWidth: 0, to the marker but you should have added it to the series like this:
plotOptions: {
series: {
marker: {
fillColor: '#F27D00',
},
lineWidth: 0,
}
},
http://jsfiddle.net/dqepok9d/1/

Resources