We Keep Coding

Highcharts area direction

Is it possible to show gradient area on Highchart over the line?
I need the chart to have the area over the line and not under it. I would be happy for help because i did not find a solution using the Highcharts API.

You can achieve this with the threshold (API) option. For example:
plotOptions: {
area: {
// ... for brevity
threshold: Infinity
}
}
Or see this JSFiddle example of it in action. This utilized the following:
If Infinity or -Infinity, the area between the graph and the corresponing Y axis extreme is filled (since v6.1.0).

Adjust the saturation of a sunburst level - Highcharts

I created a sunburst chart with Highcharts. I would like a way to highlight a level, ideally by adjusting the color saturation, without affecting the color of proceeding levels.
What I've tried so far:
colorVariation(API docs)
my code example
Initially, this looked like what I needed, it adjusts the color brightness of a given level, either darkening or lightening it. Unfortunately, it only takes a to parameter, and no equivalent from, the purpose of colorVariation seems only to graduate the color from the parent color to the given brightness modifier value.
color(API docs)
my code example
color can be used to change the color of a given level, this doesn't quite meet the criteria of what I wanted as it changes each section on a level to the same color. It also causes the child levels to inherit the new color, as seen in the example. Setting colorByPoint doesn't fix this issue either as the child level will cycle through all colors rather than matching the colors set in the level 1 parent.
What I'm trying to achieve:

You can use internal Highcharts brighten method for brightening colors. Below, you can find an example of how to achieve the wanted result in your case:
chart: {
height: "600px",
events: {
load: function() {
Highcharts.each(this.series[0].points, function(p) {
if (p.id[0] === '1' || p.id[0] === '3') {
p.graphic.attr({
fill: Highcharts.color(p.color).brighten(0.3).get()
});
}
})
}
}
},
Live demo: http://jsfiddle.net/BlackLabel/de3mp4tq/

Custom gridLines and Axes Chartjs

I am trying to design a CDF Chart using chartjs to show probabilities in a graph. Basically, I will always have 100 points starting at 0 to some max number which I calculate beforehand and I want to generate the charts as I attached. Smooth and not many gridLines. I tried using chart type "line", yet it is far off.
Could you please help me out to configure the chart correctly.
Examples of what I am looking for:

This is a solution without autoSkip, using gridline colour options to hide unwanted x axis gridlines. (sorry about my British spelling of 'colour'!)
I can't use autoSkip since my time/x axis labels show new Year, Month, Date only once and I couldn't work out how to not skip the particular labels which indicate a new month, for instance. I finally found that you can define gridline colours in an array, so my solution is to create a gridline colour array, setting the chart background colour to the gridlines I want to hide. In my case, I already send a list of labels with empty values for when I don't want a label and gridline, just a datapoint.
var labels = data3json['labels'].split(',');
//set gridline colour to background when label is empty:
var xaxis_gridline_colours = [];
for (var i = 0; i < labels.length; i++) {
if (labels[i].length > 0) {
if (i == 0) {
xaxis_gridline_colours.push("#cccccc"); //x and y axis!
} else {
xaxis_gridline_colours.push("#dddddd"); //visible gridline
}
} else {
xaxis_gridline_colours.push("#ffffff"); //invisible gridline
//or call a chart background colour variable like:
//xaxis_gridline_colours.push(chart_bkg_colour);
}
}
Later in the code:
chart = new Chart(ctx24, {
options: {
scales: {
xAxes: [{
gridLines: {
display: true, //default true
color: xaxis_gridline_colours,
etc

First about the gridLines, you can in your chart options change the stepSize of your xAxes (put it to 10 for instance) so you will have 10 times less vertical grid Lines (since your xAxes stepSize seems to be 1 by default).
If the big points are bothering you, when you create your datasets you can change their pointRadius to 0; this way no points displayed just a smoothline.
Finally you can change the color of the line of each dataset by setting the property borderColor.
Take a look at this page for more customization : http://www.chartjs.org/docs/latest/charts/line.html
Hope this helps.

I have noticed that most of you add the line styles only via code. I just spend 1h looking for the settings, as I change it once, but then I couldn't change it again.
How to do it. Post on Stackoverflow pointed me in the right direction.
Charts grid lines style
Line: this.chart1.ChartAreas[0].AxisX.LineDashStyle.Dot
Go to Properties->Chart->Chart Areas and click on 3 dots (...) next collection.
Properties
In Collection, go to Axes and again click on 3 dots (...) next collection.
Axes Collection
You will have 2 Axis: X and Y. Select each Axis and go to the required section to change properties. Be careful. They are well hidden, but I tried to highlight all the options. Of course, to perform the custom modification, you will have to code it.
Axis Collection Editor

How to change color of particular grid lines of chartist chart

I am rendering the line chart using Chartist.js I am trying to change the color of particular vertical grids but I didn't find any way to do so in the plugin.
So as seen in the image, I would like to darken the 2nd and 9th vertical grid lines. (2nd and 9th is just for an example, I will be getting indexes of the grids to be highlighted dynamically from the backend.)
I am thinking to somehow do this in draw event, but not sure how to do this.
chart.on('draw', function (data) {
if (data.type === 'grid') {
}
});

The easiest way to do this is via CSS. Something like this will work:
.ct-grid.ct-horizontal:nth-of-type(2),
.ct-grid.ct-horizontal:nth-of-type(9) {
stroke-width: 3;
stroke-dasharray: 10px 5px;
}
Obviously you could add a parent class and then just toggle this on the parent element if you need to turn these thicker gridlines on and off.
NOTE - somewhat surprisingly, chartist.js seems to add the class ct-horizontal to the vertical gridlines, and vice versa...
See this fiddle for reference: http://jsfiddle.net/whf5h1yu/2/

Hide x-axis labels but show tooltips in chart.js

I found many answers how to hide every nth label and yet still be able to show it in the tooltip. But there's a catch. If the label is very long, then the chart would be drawn somehow squished to the top of the canvas. It's logical. But is there any way to hide the labels, still show them in the tooltips and yet ignore them while calculating the y-values? So that the line can be drawn from top to bottom of the canvas?
Thank you for any advice!!

You can extend the line chart to do this. Adapted from Hide labels on x-axis ChartJS (which was for bar charts) with some unneeded code removed.
What we do is pretty simple, we first set the labels array to blanks, allow the initialization to happen and finally loop through the points for the (first) dataset and set the labels to the original labels.
Chart.types.Line.extend({
name: "LineAlt",
initialize: function(data){
var originalLabels = data.labels;
data.labels = data.labels.map(function() { return '' });
Chart.types.Line.prototype.initialize.apply(this, arguments);
this.datasets[0].points.forEach(function(bar, i) {
bar.label = originalLabels[i];
});
}
});
It's enough that you set the labels for the first dataset even if you have multiple datasets - when building a multiTooltip, the label is picked from the first dataset.
Fiddle - http://jsfiddle.net/xjchy2dn/