Develop Reference

HighCharts - Set default Axis options for my extension

Im trying to create a vertical solid gauge chart with highcharts. It should be really simple, just like a solid gauge but as a vertical bar.
For doing so, I am creating a new series type and extending it from the column chart.
If I set all the options for columns, e.g. hiding the Y Axis labels, hiding the X axis labels, etc. it works more or less like I want to. But, as I am wrapping this into a plugin, I don't think it make sense that the user who defines a chart as a lineargauge should have to worry about setting this informations right. Thus, I need a way to set some default properties to my custom series and I cant find the way to do it.
I have tried wrapping the render and drawGraph function. I have tried setting it on the overriden draw functions of my chart. None of these worked.
You can check my progress on this fiddle: http://jsfiddle.net/w8ou4byv/1/
What I want, for instance, is that the user of my plugin should not have to set:
//...
yAxis: {
labels: { enabled: false },
}
It should be the default value (although it is not the default for the column chart that I am inheriting from).
Thanks!

You use Highcharts.extendClass for creating a new series type. Highcharts provides a dedicated function for this called seriesType: https://api.highcharts.com/class-reference/Highcharts#seriesType
seriesType accepts default options of a new series as an argument - that's the solution for your problem.

Highcharts + add sub headers / group in legend

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!

Highcharts: Add ONE custom label to yAxis

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/

Use a jquery type slider to iterate through a csv and display one bar at a time in a d3.js bar chart

So I'm generating bar chart in D3.js with a csv file a la the basic columns example. What I want to do is show just one bar at a time for each row of data. A JQuery-like slider will iterate over the csv rows and update the chart. For the user, it'll just look like the single bar's height is changing but the x axis should update with the date as well.
Here's an example of the data that I'll be feeding into it:
DATE,INFLOW (CF),OUTFLOW (CF),STORAGE (CF)
20120101,950400,28857600,11084277600
20120102,60912000,28771200,11099959200
20120103,56505600,28857600,11130451200
20120104,55900800,28771200,11158765200
20120105,55987200,28771200,11189692800
20120106,56419200,28771200,11220620400
20120107,55123200,28684800,11246756400
The only thing I actually want to show is DATE and STORAGE (CF). So I'll probably have to do some parsing of the CSV somewhere to get it in the best shape.
I've attempted this and would post some code but all of my attempts are a mess. I can generate a plausible bar chart with all of the rows at once, but when I attempt to show a single one, everything breaks. Here are the challenges that I could use some guidance one:
How to splice or filter my csv with a slider so that only a single row is selected
Best way to generate a bar chart that only has a single bar from a single row in a csv (every time I try to do this I have trouble with axes and accessing the array values correctly)
Best way to update the bar, changing only height but also updating the x axis ticks
Also any examples would be very helpful! Have been googling like mad but am mostly finding sliders that affect range and scale

There are many pieces to this...parsing and slicing the data, setting up the x axis, etc. Here is one segment of the code.
d3.select("#slider")
.on("input", function() {update(+this.value);});
function update(row) {
viewdata = data.slice((row-1), row);
redraw();
}
Here is a complete PLUNK with the solution. NOTE: I have placed comments in several parts of the code, for orientation. I strongly suggest you fork this plunk so that it will not be lost if I inadvertently delete it.

draw vertical lines using jquery

I have the following json and I need to create a grid and also above the grid need to show vertical lines based on the values :
var arr = [];
arr= [
{"Measure":"Air Pollution","Rank":"1","Value":"15.5"},
{"Measure":"Water Pollution","Rank":"2","Value":"13.5"},
{"Measure":"Soil Erosion","Rank":"3","Value":"10.5"}
]
Now I need to create a grid and above the grid, need to create vertical bars based on the "Value". There will be 3 bars created since there are 3 Values. Now when 1st row in the grid is selected, the first vertical bar needs to be highlighted . Similarly, when the 1st vertical bar is selected, the 1st row in the grid to be selected. Creating the grid is not a problem since I am using KendoUI grid but to create the vertical bars and the selection is the one where I am stuck . Any views ?
Thanks.

Based on #Bogdan M.'s suggestion on using div elements, I've set up a jsFiddle demonstrating vertical bars built using jQuery. It relays on the input of values as an array of numbers, and converts those to DOM elements, setting their height accordingly.
This demo can be very easily updated to use the OP's supplied data structure, and selection behavior functionality can be added as well.
This final version (contains the complete solution, both for building the component and for assigning it with selection behavior) can be seen in the full demo on jsFiddle.
All that's left now is to assign handlers for the selection functionality - as cell / row listeners - to the KendoUI grid.

I see that you aim to visualize your data as a bar-chart. If so, don't re-invent the wheel. there are a lot of good JS libraries designated for that purpose.
I've had a good experience using HighCharts, try it out.
Disclaimer: This may be an overkill, but is a suited solution should the component be generic (for future compatibility with flexible data)