We Keep Coding

Override auto generated Y axis plot area values in Highcharts

I have certain requirement where I need to override the auto calculated values for Y axis in highcharts. For eg.
Here, the gridlines plot area is equally divided into 100. I wanted to override this so that the negative plot area should be at a max of let's say 50 and the positive ones can remain the same. Even if I try the max, min, softMax, softMin, ceiling and floor properties, the result is the same. I was thinking of using a secondary axis but then there is only one data in the series which would render the second one useless. I don't think using setExtremes() will be helpful either. I'm hoping to avoid modifying the library itself to add a certain option but it'll be helpful if such an option already exists in highcharts. Any suggestions?

Use tickPositions or tickPositioner property:
yAxis: {
tickPositions: [-50, 0, 100, 200, 300, 400]
}
Live demo: http://jsfiddle.net/BlackLabel/6m4e8x0y/4883/
API Reference:
https://api.highcharts.com/highcharts/yAxis.tickPositions
https://api.highcharts.com/highcharts/yAxis.tickPositioner

Dynamic colours in chartJS based on entries in the array

I have an issue trying to color my bar chart dynamically based on a JSON response.
I know this has been asked a number of times before but none of the answers I've found or tried to work thorugh have got me any closer to a solution.
I've created a quick JSfiddle to show the issue.
I have a number of other charts which are all generated from different JSON strings so have cut this down a lot to try and isolate the issue. I don't have the same problem with the other charts as the number of entries in the Label array in consistent with the number of colours. The offending piece of code is this;
DT_Labels.forEach(function(DT_LABELS, x) {
data.datasets.push({
label: DT_LABELS,
backgroundColor: backgroundColor[x],
data: JSON.parse(DT_Values[x]).map(Number)
});
});
DT_Labels only contains a single entry as the chart is a summarised list - In theory, this would work if I counted the number of DT_Values but if I do that, I can't get the correct data in the chart.
Any ideas how I can reformat this to generate the colours counter based on the number of Values instead of Labels?

Change:
backgroundColor: backgroundColor[x],
to:
backgroundColor: backgroundColor,
Result:
Why does this work?
The backgroundColor property can be specified in a number of ways. Typically it's set to a string, e.g. #abcdef but it can also be set to an array. In this case Chart.js itself will pick the colour from the array based on the index of the data point it is drawing.

Javascript charts, custom step amount, but equally divided over available space

I'm looking for a javascript chart library where I can set custom step size.
I want a bar chart, where certain values are more important than others.
I'd like to have the ticks like [0, 50, 90, 99, 100]. And have the space between those values the same. I've tried Google Charts and Chartist, but they all put 99 and 100 very close to eachother, but I want it equally divided.
This is the idea:
Anyone ideas how to achieve this?

If these are your domain values, then provide them as strings instead of numbers. Then they will be evenly distributed.
But if these are your target or range values, you'll have to do something trickier. You'll have to use integer values like 0 through 4, and then use the explicit ticks option for the vAxis to specify both the values and how to display them.

Strange tooltip behavior with long series in highcharts

I'm using Highcharts for a project in which I have to display two series with about a thousand points each. The x-axis represents a date, and the y-axis a quantity. In addition, each point has an associated list of namesMy data is day-by-day without gaps, with a structure such as
var mydata = [ ...
{x: theDate, y: theValue, names: theNames},
... ]
where theNames is an array of strings. I can access these in the tooltip formatter through this.points.point.names, given that the range displayed on the chart is small enough. If I change the x-axes so that the start date and end date are more than roughly a year apart, then the tooltip is not rendered at all.
One of the possible avenues that I have tried but failed with so far is setting the turboThreshold limit to the length of the longest series plus 1. Setting this lets me at least display a graph when mydata.length > 1000 (the default value). However, this only displays the tooltip if the x-axis range is less than 261. Otherwise, the tooltip disappears entirely, as does the point.data object where I'm getting the name from.
I'm also not great at JavaScript, but I was wondering if there were a way to separate the names of the points from the array containing them (in my examples, myData1 and myData2) and somehow access those names from the tooltip function without going through the current point.
Here is the link to the jsFiddle demonstrating this issue.
All help is appreciated!

The problem is in dataGrouping, when disabled works fine: http://jsfiddle.net/34tfg/1/
DataGrouping is method in Highcharts to approximate points and display them when width of the chart is not enough, e.g. how to display 10 000points in a chart of width 1 000px -> 10 points in a one pixel..? And when dataGrouping is used, new points are created, so all your custom options like 'names' etc. are lost (at least not accessible).
Code:
plotOptions: {
line: {
dataGrouping: {
enabled: false
},
turboThreshold: 10000
}
},

Rounding y-value labels with Morris.js charts

I have plotted some JSON data using Morris.js. The graph works fine, however I'm trying to tweak the labels along the y-axis in a line chart.
Currently, the yLabels are being automatically generated by morris.js using the JSON data's range of values (where x-axis is time). In my example JSON, values range from 54 to -47, so the yLabels being generated are 54, 29, 4, -22, -47. Instead, however, I'd like to round these values to -50, -25, 0, 25, and 50. I would also like the "0" line to stand out, hopefully with a different colour.
As I'm dynamically creating the data, these won't be fixed, in another chart the values may range between -2.5 and +2.5 (in which case I'd want the labels along the y axis to be -2.5, -1.25, 0, 1.25, 2.5).
How would I round the labels morris.js is creating and make the "0" line red?
I have tried creating an array of yLabels (yLabels: ['-50','-25','0','25','50'],), but it didn't work, and even if it had I don't want to "hard-code" values because as I said, each chart will be different and dynamically generated.
Any help is greatly appreciated.
UPDATE
In the first example, I have been able to get what I want putting ymin and ymax of -50 and 50 respectively, but like I mentioned, I don't want to hard-code these values as the ymin/max will vary depending on the JSON being parsed. Is there a way I can always ensure the middle line is always 0, and morris determines the two y values above and below it?

I't cannot be done using Morris options. You will have to go into source and change drawGrid() function in morris.grid.coffee file.

I upped the numLines property of the gridDefaults in morris.js and was able to get everything in my Y-Axis to display. Perhaps you could play around with that property to display your Y-Axis differently.