I want to reduce the gap between plot area and actual chart in gauge chart,
i have used
HighchartsOptionFactory highchartsFactory = new
JsoHighchartsOptionFactory();
ChartOptions options = highchartsFactory.createChartOptions();
options.chart().type("solidgauge");
options.chart().marginTop(0).marginLeft(0).marginBottom(0).marginRight(0);
options.chart().spacingLeft(0).spacingTop(0).spacingRight(0).spacingBottom(0);
but still there is so much of waste space between plot area and actual chart.
Can somebody help me.
You have to also set up a pane size and its outer radius.
The example in js, but the wrapper API should be the same.
pane: {
size: '100%',
background: {
outerRadius: '100%'
}
},
example: http://jsfiddle.net/ct3pm5op/1/
Related
Already I have created a normal yAxis plotline with label styles.But now I want to create a yAxis plotline with some CSS styles. Any Suggestions?
This is what i have tried so far
This is my code
var chart = $('#tv_chart_container').highcharts();
chart.yAxis[0].removePlotLine('hori_line');
data = chart.series[0].data;
var test = data.length;
var value = data[999].y;
chart.yAxis[0].addPlotLine({
value: value, // Value of where the line will appear
width: 2 ,
color: '#248EC6',
// dashStyle: 'dash',
id: 'hori_line',
label: {
text: value,
align: 'right',
style: {
color: '#FFFFFF',
fontWeight: 'bold',
}
}
});
Here is the sample.What i actually need
I worked up a proof-of-concept that gets pretty close to what you're asking. This is using all code within Highcharts, and not anything dealing with outside CSS.
Plot lines can't possess the data label formatting you're seeking, so I used a scatter plot series to serve as the line instead. Plus, this also gives you the (default) Highcharts animation when you move over a new point in your line graph.
I did a few things here:
I added the scatter plot line as a separate "dummy" series that the user won't see in the legend and won't be able to interact with.
I formatted the data label for the last (second) point of the scatter plot line to show the blue background and white numerals as in your example.
I set a marker on the last (second) point of the scatter plot line with a diamond shape. Together with the data label settings, this gives you the marker example you showed above. Now, there is a shape: 'callout' option for data labels, but the carats only point up or down for this kind of series.
I updated your mouseOver event to update the value of the scatter plot line, rather than adding and removing plot lines.
Here's the proof-of-concept fiddle: http://jsfiddle.net/brightmatrix/tzu3khp1/. You can also see a screenshot of the result below.
I hope all of this information is helpful for you. Please let me know if you have any questions; I'll be glad to update this answer to elaborate.
I am new to Highcharts, but I feel it is so powerful and like it very much.
I am doing a multiple series chart. Here is what I have for the legend:
legend: {
enabled: true,
verticalAlign: 'bottom',
align:'center',
}
But I got too much space above and below the legend. See the picture. How can I reduce it?
Update
It seems I can use positive y value in
legend { y: number }
to move legend down, but I cannot seem to be able to reduce the space above the legend. I tried padding and margin without any success.
Thanks and regards.
Use the chart.marginBottom instead
chart: {
marginBottom: 60
}
#jsFiddle to demonstrate margin between chart and legends
If real estate is a concern, also evaluate the option of the making the legends floating
I am experimenting with the legend; trying to get as result, a panel where I display data about the chart.
I am planning to add the last value, and min and max.
Looking for some examples, and I found one that use a function called labelFormatter, altho I am not having luck in understanding how does it works.
I need to have values with different text color and different size, so I am not even sure if I can use the title of the legend for this purpose, or if I should hide the legend and create directly a label (altho the issue then is related to moving and resizing, right? Since the legend update its position if the chart window is resized).
Which is the best way to do what I am planning to do? a label or the legend?
If you are considering adding HTML elements into the chart plot area then you will have to use Highcharts Renderer API.
You can refer this JSFIDDLE working demo
it works like:
var chart = new Highcharts.Chart({
....
.....
......
}, function(chart) { // on complete
chart.renderer.text('This text is <span style="color: red">styled</span> and linked', 150, 80)
.css({
color: '#4572A7',
fontSize: '16px'
})
.add();
});
Is there any way to draw icon/images/triangle anything inside the chart plot?
Like that image, this example, check the green triangle (the red mark is just to show). Is there any way to draw something like that inside?
I tried to using the legends, but it's kind hard to add a new one just for it.
Thanks
Edit:
I tried using the API, but if I resize the page, the chart resize and the the image stays on the same, that's not good at all, I would like the image to remain on the side of the chart. Like the legend.
Does anyone know nice solution for it?
Use either labels or Renderer.
Add the following code at the end:
, function (chart) {
chart.renderer.text('▲', 0, 0)
.attr({
align: 'right',
zIndex: 8
})
.css({
color: '#73903B',
fontSize: '48px'
})
.add()
.align({
align: 'right',
x: -10,
verticalAlign: 'bottom',
y: -40
});
});
DEMO : http://jsfiddle.net/2PNCG/ (Fixed position when resize, bottom right / lower right)
Reference:
http://code.highcharts.com/highcharts.src.js (credits part)
Other possible approaches:
Use chart.plotWidth, chart.plotLeft, chart.plotHeight with marginRight
Use left, top in labels
Related Questions:
Adding a line of words towards the bottom of chart (Bottom Left / Lower left)
How do you add text to the bottom center of legend and bottom center of chart under legend? (Bottom center)
Highcharts - change font size of text on chart (Fixed position)
Move images rendered on highcharts on resize (Fixed position)
This is the kind of thing easily found in the API.
With Highcharts 3.0 it is possible to create charts with type 'bubble', whereas prior to 3.0 it was necessary to use a 'scatter' chart and modify marker size to make bubble charts. The nice thing about the old way is you had complete control over the visible pixel radius of each bubble--the new bubble charts automatically resize the bubbles so they are sized relative to each other. Is there any way to turn off this behavior or set bubble radius manually?
I am having a hard time seeing how a bubble chart, where the bubbles are not sized relative to each other, would be of any use.
You should be able to use the minSize and maxSize options, however, to control them the way that you need to:
bubble: {
minSize:2,
maxSize:50
}
{{edit:
I don't see them in the docs either, actually. But you can see an example here: http://jsfiddle.net/fXzke/13/ use either number as pixel value, or string with percent of chart height
}}
I found that adding an "empty" bubble to the series helps keep the size of all bubbles in the chart relative to each other:
name: '',
data: [{x:0,y:0,z:0}],
showInLegend: false,
color: 'transparent',
enableMouseTracking: false
Here's a sample on JSFiddle: http://jsfiddle.net/9bebT/2/. The legend, color, and mouse tracking variables each help keep the item in the series but otherwise invisible to the user. If you simply remove the empty bubble or set its visibility to "false," the chart doesn't register the empty bubble's z axis (diameter) as the minSize.