Adjust the saturation of a sunburst level - Highcharts - javascript

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/

Related

How to highlight cells and yaxis ticks on highcharts heatmap hover

I have a large heatmap, and because it's so large, I'm trying to highlight the cell when someone mouses over it, and I'd also like to highlight the y-axis tick as a time reference because of the large width of the chart. I've seen some examples of this, but my heatmap is not responding with hover effects.
I've used this example to highlight the cells red, but it's not working. http://jsfiddle.net/937twae7/ I've also researched this method for highlighting tick values, but it's probably not working for similar reasons. https://jsfiddle.net/sjapdya6/1/
In the "series" section of code, I've done this:
...
states: {
hover: {
color: 'red'
}
}
...
Here's my chart: https://jsfiddle.net/civilsurfer/Lhysx2vg/1/
Nothing happens as I hover on the cells.
Thanks for any assistance.
You used the boost module which increases performance, but causes some limitations - for example, the inability to change color in states.
To highlight an axis label you need to adjust the findTick function:
function findTick(point, ticks) {
for (var tickValue in ticks) {
if (tickValue == point.y) {
return ticks[tickValue]
}
}
}
Live demo: https://jsfiddle.net/BlackLabel/agcper18/
Docs: https://www.highcharts.com/docs/advanced-chart-features/boost-module

How to apply styles in Amchart-Stockchart

I am trying to apply various Styles in my own Amchart-Stockchart, one such can be viewed in https://codepen.io/Volabos/pen/xywPdb
However I failed to apply below 2 stylings :
I want to fill the area under line till the x-axis with light Alpha value. I found one option with fillAlpha, however I couldnt not be able to apply this option.
In the Zoom option, I want to apply different styles e.g. different background color for different zoom options, Fonts etc. I was wondering if I could warp them within various Divs and place them in other suitable spaces in the Webpage.
Is it possible to achieve them? Any pointer will be highly appreciated.
The property is called fillAlphas - you're missing the s at the end:
stockGraphs: [{
// ...
fillAlphas: .5
},
// ...
]
This is also the case setting the fill color - the property is fillColors with an s. You'll need to set useDataSetColors to false if you want to use a different color than the one specified in the dataSet.
You can't wrap the periodSelector zoom options in a div and move them around like you can with legends. You can style the the periodSelector components by setting addClassNames to true and apply the desired CSS to the elements associated with the period selector using the classes listed here. Note that you can position the periodSelector by setting its position property to "top", "left", "right" or "bottom".
Here's a demo illustrating fillAlphas and addClassNames.

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/

format axis tick labels

I'm using a map chart where area's are colored based on a percentage. The legend shows a mapping between the colors and their percentages. But the legend only shows numbers, not percentages. It should be obvious that these numbers are percentages. So there should be a % symbol after each number or a % symbol at the top of the chart.
It seems there is such a thing as chart tick formatting but I cannot find a way to change it. Maybe this could be done with stacklabels I would expect something like this with d3.js. I tried this with highCharts, but it seems to ignore these properties.
I also tried changing the format properties of several other objects. Changing it on the legend object get's you closest, but it's only one text on the wrong position.
Edit: something that complicates this is that I don't think the chart has an x or y-axis. Instead there's a colorAxis object. Maybe it's possible to add text with CSS3 with the itemStyle property.
Its pretty simple, all you need to do is use formatter
xAxis: {
labels: {
formatter: function() {
return this.value+"%";
}
},
}

D3.js: how to decide both the area and the color of each square by the size of each content in treemap?

I met a problem in treemap. I have an example much like this:
https://secure.polisci.ohio-state.edu/faq/d3/zoomabletreemap.htm
You can see from the demo, the area of each square in the treemap is decided by the content size. While, each square has the same color. So I plan to add the feature: add different shades to each square, which can also be decided by the content size. And also, you can try and fix in this link:
http://jsfiddle.net/srvikram13/cR35x/9/
My solution is binding the color coding style of each square with the each size, then they can show different shades, just like
`.style("background-color", function(size) { return rgb() or something......})`
Thanks in advance!
To just focus on your original question, how to make fill colours dependent on the data:
What you want is a function to convert a numerical data value (the value associated with the size of your treemap rectangles) into a colour value, in such a way that colours form a smooth transition between two extremes representing the extremes of the data.
The ordinal colour scales don't do this, they're intended to create distinct colour values for contrast.
To create a linear relationship to the data, you'll need a linear scale to convert the data values into an appropriate range for the colour functions, and then you'll need a function to create the actual colour value that varies according to that number.
There are three sets of functions within d3 that create variations on colour:
The colour interpolator functions, which are used internally when you specify a transition for a colour property, are initialized with a start colour and an end colour, and return a function that will take values between 0 and 1 and return a colour the appropriate distance between the start and end values.
The create colour functions take three numbers as either a RGB, HSL, or L*a*b colour definition, and return the hex value; you can specify any of these numbers with a linear scale to create a scale of colours that vary only one that one dimension (hue, lightness, redness, whatever).
The brighter/darker colour functions, which are initialized with one colour value and then can be used to create modifications of it. However, they can only modify the brightness, not the hue.
The colour interpolator functions are much more flexible, so that's what I'd recommend using. There are different versions depending on whether you want the interpolation to vary according to RGB colour space or HSL or L*a*b colour space. I'd recommend using HSL for intuitive transitions that won't ever stray outside of visible colours.
Again, the interpolator function will expect a value between 0 and 1, so you'll need to use a linear scale to convert your data values to that range.
var colourScale = d3.scale.linear()
.domain([0, maxArea])
.range([0,1]);
var colourInterpolator = d3.interpolateHsl("blue", "red")
//colours can be specified as any CSS colour string
function colourFunction(d) {
return colourInterpolator( colourScale( d.area ) );
}
/* and then later */
rect.attr("fill", colourFunction);
If the rectangle's area is equal to the maximum, the scale will convert that to a value of 1, and the colour interpolator will convert that to the final colour of the transition, red. If the area is almost zero, the scale value will be almost zero, and the colour will be almost blue.

Categories