Is it possible to create a highcharts legend with sub headers instead of just a legend title?
example:
standard legend looks like:
**countries**
- series A
- series B
- series C
- series D
I would like to be able to create something like:
**countries**
- series A
- series B
**regions**
- series C
- series D
This seems like an easy task to do, but cant find anything in the API documentation that would allow me to do this, thanks for your help/advice
It's not possible to have subtitles but the way I have done this in the past is to use a fake series:
Set up a fake series for each subtitle with no data
Hide the symbols in the legend by setting marker: { radius: 0 } and lineWidth: 0 on each of the subtitle series
Remove the onclick (show/hide series) events from each of the subtitle items
See JSFiddle example: http://jsfiddle.net/zzella/ac575ur5/3/
Your issue will then be pulling your subtitles to the left (if you want them to appear left aligned with the symbols rather than text). I've shown an example of how to do that in the fiddle but obviously you'll have to change it so it's not hardcoded or come up with a cleaner way of doing it!
Of course, you could also just create your own custom HTML legend to replace the default Highcharts one and not have this problem!
Related
How do you bring segments in morris.js bar chart close to each other? Below, the left one is what morris.js offers by default, but I would like to have the one on the right where segments are close to each other. The documentation doesn't specify such option. Do you know how I can achieve this?
According to the source of Morris.js, you can use the option barGap. Its default value is 3, you can try with a lower value. Also you can use the option barSizeRatio (default value: 0.75) in order to adjust width between 2 rows of data.
I'm not sure if this is possible, but I have separate, stacked highcharts. I'd like to keep them on the same graph, but stacked on top of each other, resetting the y axis to 0 each time. Here is a Fiddle of them all separate:
I've also attached an example graph of what I am imagining. The blue horizontal lines represent each new chart series's 0 point.
Sample graph example
//random line so it will let me post the fiddle. Ignore this
You can also achieve a similar effect using different height of multiple yAxis.
Example:
http://jsfiddle.net/6b9prwjc/
You are making highchart for each series in the array seriesAll by looping through it and that is causing it to create seperate charts for each series. If you just create 1 highchart and give it the series array, it will plot all the series on the same chart. Here is a modified version of your code to give you what your looking for.
https://codepen.io/Nasir_T/pen/zdzdrW
Also please check out the docs of highcharts and it will give you all the information you need. E.g. here is the combined charts link:
https://www.highcharts.com/docs/chart-and-series-types/combining-chart-types
[Edit for stacking option]
You can also stack them on top of each other by setting the plotOption > series > stacking properties. e.g.
plotOptions: {
series: {
stacking: 'normal'
}
}
Learn more on stacking in the following doc link.
http://api.highcharts.com/highcharts/plotOptions.area.stacking
Hope this helps.
I'm using highcharts and I know that the yAxis labels are automatically generated.
The thing is I've got this 3D graph in which apart from the data, there's a fixed 'goal' line on which we compare which data set is over or under it.
Since 3D graphs don't render lines very well, I used a plotLine and it works marvelous. The problem comes when I try to show how much this 'goal' is, because even though it's at the right position, it would be nice to display this goal amount.
What I want to do is display at the left of the graph the value of this line, so that whoever sees it is able to know how much the goal is for that particular data set.
Here's a screenshot of the graph, and circled the place I want to add the custom label:
Graph screenshot
Inside the red circle is where I want to add this custom string (which should be a percentage number).
I appreciate any help you guys can provide. Thanks!
You should be able to use renderer.text for adding custom text in your chart.
http://api.highcharts.com/highcharts/Renderer.text
load: function() {
var chart = this,
yAxis = chart.yAxis[0],
plotLine = yAxis.plotLinesAndBands[0],
pLPath = plotLine.svgElem.d;
chart.renderer.text('CUSTOM LABEL', parseFloat(pLPath.split(' ')[7]) - 100, parseFloat(pLPath.split(' ')[8])).addClass('cT').attr({
fill: 'red'
}).add();
},
In the code above I am using plotLine's path.
Live example how your chart may work:
http://jsfiddle.net/0hyaevax/2/
I'm working on a project using dc.js and I don't want the crossfilter to render unless data is selected. Currently, it is possible to do something like this
Is there a way to avoid this from happening? I want at least one bar to have to be selected to crossfilter.
I found the answer. you need to add the following two lines to your bar chart:
.round(dc.round.floor)
.alwaysUseRounding(true)
If your bar chart has the property .centerBar(true), you should use the following instead:
.round(function(n) { return Math.floor(n) + 0.5 })
.alwaysUseRounding(true)
By default flot was generated legend block (table) like this ([#] - color box):
_________________
|_[#]_|_label_1_|
|_[#]_|_label_2_|
|_..._|_......._|
I wanna have horizontal legend like this:
______________________________.______________________________
|_[#]_|_My_long_label_1_______|_[#]_|_My_another_label_2____|
|_[#]_|_Trololo_label_here____|_[#]_|_hell,_yeah!___________|
.............................................................
I've been tried use labelFormatter() but have failed =(
I was added order number to each series element and can use it in labelFormatter() (like ...if(series.num % 2 == 0) { ...next row... }
Try Following,
legend: {
show: true,
noColumns:2,
container:$("#graph_legend")
}
Unfortunately, it doesn't work that way...
Flot only lets you manage how the labels look, not the structure of the whole legend itself. See the source for how it builds the table.
In there you'll notice that it just builds an html table and includes your labels in the appropriate cell.
Your best bet, given that information is to just make your own by hand, and suppress the generation of the default legend entirely (show:false). You could pretty easily take the insertLegend function from the flot source and make your own version of it that stacks them horizontally.