Unable to render legend in word cloud in highcharts
Refer the jsfiddle link : http://jsfiddle.net/znm6f89r/115/
series: [{
type: 'wordcloud',
data: profit,
name: 'Profit',
color:'blue'
}],
legend: {
enabled: "true"
}
Is there any way to achieve this?
Related
Can we have multiple callout in timeline chart for single bar?
for reference please look into attached spac[multiple callout spac][1]
[1]: https://i.stack.imgur.com/zJpug.png
You can add the second label as an annotation and customize&style it for your needs.
Demo: https://jsfiddle.net/BlackLabel/yx68cd91/
annotations: [{
labelOptions: {
shape: 'connector',
align: 'right',
},
labels: [{
point: 'test',
text: 'test of the annotation'
}],
}],
API: https://api.highcharts.com/highcharts/annotations
Using highcharts, how can I plot a column chart that color individual columns depending on value and display legend based on value? See example on the image below
Use chart with multiple column series and x-axis with category type:
Highcharts.chart('container', {
chart: {
type: 'column'
},
xAxis: {
categories: [...]
},
series: [{
color: 'red',
data: [...]
}, {
color: 'green',
data: [...]
}, {
color: 'blue',
data: [...]
}]
});
Live demo: http://jsfiddle.net/BlackLabel/57yzefq4/
API Reference:
https://api.highcharts.com/highcharts/series
https://api.highcharts.com/highcharts/xAxis.categories
I'm using Highchart to generate a line chart with data labels. Here is an example of what I'm doing:
Highcharts.chart('container', {
title: {
text: 'Chart without categories'
},
xAxis: {
categories: ['a','b'],
},
series: [{
data: [1,2]
}]
});
This code generates the following chart: As you can see, there is a space between the line and and the borders of the chart.
Without using categories, there is no space:
What can I do to remove this spaces?
That is a default behavior of category axis type. Please check this example: http://jsfiddle.net/BlackLabel/wuqxb2cy/ with a more visible distribution into categories.
As a solution you can set xAxis.tickmarkPlacement and series.pointPlacement to 'on':
xAxis: {
categories: [...],
tickmarkPlacement: 'on'
},
series: [{
data: [...],
pointPlacement: 'on'
}]
Live demo: http://jsfiddle.net/BlackLabel/qkezc3mx/
API Refefence:
https://api.highcharts.com/highcharts/xAxis.tickmarkPlacement
https://api.highcharts.com/highcharts/series.line.pointPlacement
I am trying all kinds of permutations to make data labels on the spline chart but I just dont know what I am doing wrong.
Any help would be appreciated.
JsFiddle here
plotOptions: {
line: {
dataLabels: {
enabled: true
},
enableMouseTracking: false
}
},
series: [{
name: 'Value',
data: [
[Date.UTC(2005,9,01), 2.02],[Date.UTC(2006,8,30), 7.56],[Date.UTC(2007,8,29), 5.22],[Date.UTC(2008,8,27), 6.57],[Date.UTC(2009,9,03), -4.48],[Date.UTC(2010,9,02), 5.29],[Date.UTC(2011,9,01), 7.44],[Date.UTC(2012,8,29), 3.39],[Date.UTC(2013,8,28), 6.54],
]
}]
Under plotOptions, you are setting the dataLabels option for line charts, not spline charts. They have to match:
plotOptions: {
spline: { // has to say spline here
dataLabels: {
enabled: true
},
enableMouseTracking: false
}
},
Updated fiddle.
After a couple of weeks working with Highcharts, we are facing problems to generate charts that fit to out data structure. Would be nice if somebody can give us a hint.
Here is the problem:
We want to create a stacked area chart for 2 or more series.
Since our x-values have irregular intervals we tried to set up value pairs for each data point [x,y]
However, the area chart does not stack our y-values. Any suggestions?
Here is an example of our problem: link to jsFiddle
Thanks for your help!
$(function () {
$('#container').highcharts({
chart: {
type: 'area'
},
title: {
text: 'Irregular point intervalls stacked area'
},
yAxis: {
title: {
text: 'value'
}
},
plotOptions: {
area: {
dataLabels: {
enabled: true
},
stacked: 'normal'
}
},
series: [{
name: 'test 1',
data: [[0, 7.0], [1, 6.9], [1.5, 9.5], [3, 14.5]]
}, {
name: 'test 2',
data: [[0, 3.9],[1, 4.2], [1.5, 5.7], [3, 8.5]]
}]
});
});
you have to use stacking not stacked in plotOptions-> area
stacking: 'normal',
updated you fiddle at http://jsfiddle.net/FX7XE/2/
hope this will be useful for you