Change color of Multibar chart in Django - javascript

I am using Highcharts to represent some data and I've got stuck at this point:
I have the following chart:
How can I change the colors of each point of a bar ? ( e.g: instead of orange to set up 'red' ). Also, can I modify the color depending on the value of the point? (e.g: if the value is > 2.5k to transform that into another color).
My class looks like this:
class _TimeSeriesChart(_Chart):
def get_options(self, series):
return {
'title': {
'text': self.title,
},
'xAxis': {
'type': 'datetime',
},
'yAxis': {
'min': 0,
},
'plotOptions': {
'series': {
'animation': True,
},
'column': {
'stacking': 'normal',
#'colorByPoint': True,
},
},
'credits': {
'enabled': False
},
'series': series,
}
If colorByPoint is uncommented, I'll have each bar transformed in only one color.

Colors can be set per point.
series: [{
data: [{y: 1, color: '#ff0072'},
...
Example: http://jsfiddle.net/sbphxhfs/
Other option is to set negativeColor and threshold
series: [{
negativeColor: 'red',
threshold: 3,
...
Example: http://jsfiddle.net/sbphxhfs/1/
Colors can be also set for series (using color setting), or whole chart (using colors array).
Example: http://jsfiddle.net/sbphxhfs/2/

Related

Highchart / Highstock how to set color of individual ohlc or candle?

I have set up a highstock ohlc with angular 2. But can not set the up and down color for OHLC chart type, for example, green when hclose is increasing and red when it is decreasing. is there any API reference for that or any way to implement? like this below image I want my chart to look like..
I found a way like this and its working :-)
plotOptions: {
ohlc: {
color: 'red',
upColor: 'green'
}
},
series : [{
type: 'ohlc',
name : 'Stock Price',
data : [],
yAxis : 0,
}, {
type: 'column',
name : 'volume',
data : [],
yAxis : 1,
}]
You can use these to change the colors for down line and up line colors as well.
plotOptions: {
candlestick: {
color: 'red',
upColor: 'green'
lineColor: 'red',
upLineColor: 'green'
}
}

Bar graph colors based on value in c3.js

I have the following bar chart in c3.js (here's a fiddle):
var chart = c3.generate({
data: {
x: 'Letter',
columns:
[
['Letter', 'A','B','C','D'],
['value', 25,50,75,100]
],
type: 'bar',
colors: {
value: '#FF0000'
},
},
axis: {
x: {
type: 'category'
}
},
legend: {
show: false
}
});
This sets all the bars to red. What I would like is the colors of the bars to be this gradient from FF0000 to 10FF00, which I believe is just in increments of adding 4096 to the decimal value of the color.
I'd like the gradient to start at 50 and end at 100 (that is, anything green and below would be solid red FF0000, and 100 would be green 10FF00).
I was trying to follow this example to set the color of a data point on a c3.js graph based on its value. In the example, the value of data3 is darkened as its value goes up. I've been trying to modify the color: function (color, d), but I can't seem to get it to do anything that I want it to.
Any help would be appreciated. Thanks!
I'm not sure what you did inside color: function, but it is the correct way to set it up. Regarding your desired gradient, it cannot be achieved by just increasing its hex value because going from yellow to green requires decreasing the value. The following example goes from red to yellow:
var chart = c3.generate({
data: {
x: 'Letter',
columns:
[
['Letter', 'A','B','C','D'],
['value', 25,50,75,100]
],
type: 'bar',
colors: {
value: function(d) {
return '#'+(0xff0000+(d.value-25)*256*3).toString(16);
}
},
},
axis: {
x: {
type: 'category
}
},
legend: {
show: false
}
});
fiddle
you can adding in your css like a
.c3-bar-0 {
fill:rgb(204, 0, 102)!important;
}
.c3-bar-1 {
fill:rgb(51, 153, 255)!important;
}
.c3-bar-2 {
fill: rgb(0, 255, 204)!important;
}

Highstock Column Chart - data grouping causes data to scroll independently of axis

I am attempting to make a stacked column chart representing events on a timeline. I need evenly-spaced bars, that scroll left/right with their respective ticks. Currently upon scrolling, the columns remain in place and their data is updated to reflect the new timespan they represent (I assume).
For example: when scrolling one "step" to the right, I note these differences:
The column remains in place with updated data and the axis tick moves to the left. This results in a 'graphic equalizer'-like effect when scrolling. (See fiddle)
What I need is to have the column represent the same data for the life of the chart, and to scroll left/right with its tick mark.
I suspect I'm misunderstanding something in the configuration. Any help/direction would be very much appreciated.
(As a side note: is there any easy way to style/color data from the past (with an xAxis datetime value of < today) differently to normal data?)
chart: {
alignTicks: false,
backgroundColor: '#eeeeee',
events: {
load: function (e) {
this.xAxis[0].setExtremes(1390943153305, 1400015153305);
}
},
ignoreHiddenSeries: true,
renderTo: $('#chart')[0]
},
colors: ['#89f1a4','#68d9f7','#9eb9ef','#c49eef'],
credits: {enabled: false},
legend: {
enabled: true,
shadow: true
},
rangeSelector: {selected: 1},
title: {text: 'Global Events'},
navigator: {
height: 40,
xAxis: {
gridLineWidth: 1
},
series: {type: 'column'}
},
plotOptions: {
series: {
showInLegend: true,
stacking: 'normal',
dataGrouping: {
enabled: true,
forced: true,
units: [
['millisecond', [604800000]], // Attempting to force data into weekly groups, throws error if this is null
['second', [604800]],
['minute', [10080]],
['hour', [168]],
['day', [7]],
['week', [1]], // Expected this to be the only required option if I only want weekly grouping...
['month', null],
['year', null]
]
}
}
},
xAxis: {ordinal: false},
series: data
If you want just weekly grouping, then only that one set, see: http://jsfiddle.net/s6BmC/2/
I think that resolves your issue, right?
plotOptions: {
series: {
showInLegend: true,
stacking: 'normal',
dataGrouping: {
enabled: true,
forced: true,
units: [ [ 'week', [1] ]]
}
}
},
Regarding additional question:
- yes you can set specific color for each point, but you need to determine on your own what color should be set:
data: [{ x: timestamp, y: value, color: color }, { x: timestamp, y: value, color: color }... ]
Another solution is to wrap setting color for column. Something similar I have done for candlestick: http://jsfiddle.net/79WZM/ (this solution requires much more knowledge of Highcharts).

Highcharts : Display the labels (min, max, median etc.) in boxplot

I have created a basic boxplot using highcharts and it shows me the values for maximum, max quartile, median, min quartile and minimum when I hover the mouse over the box plot. I want to somehow display these values in the plot itself beside each of the lines.
I checked out the api and found that "dataLabel" would help but this is not supported for the boxplot. Could someone enlighten me on how to achieve this?
Thanks.
Not possible out of the box, but as mentioned by Steve Gu achievable by scatter. You can even ignore the formatter and disable the marker alltogether:
{
series: [
{
type: 'scatter',
tooltip: {
enabled: false
},
dataLabels: {
format: '{key}',
enabled: true,
y: 0,
},
data: [{ x: 0, y: 975, name: '975'}],
marker: {
enabled: false,
}
}
]
}
just disable marker and set format to key.
Add another data series, which is a type of "Scatter" and apply the data labels to this series using Marker. The trick is to use the same fill color as your background color and 0 line width so the marker will not be visible and only the label will be shown.
{
name: 'Outlier',
color: 'white',
type: 'scatter',
data: [ // x, y positions where 0 is the first category
{
name: 'This is my label for the box',
x:0, //box index. first one is 0.
y:975 //it will be bigger than the maximum value of of the box
}
],
dataLabels : {
align: 'left',
enabled : true,
formatter : function() {
return this.point.name;
},
y: 10,
},
marker: {
fillColor: 'white',
lineWidth: 0,
lineColor: 'white'
}
}
Unfortunately this option is not supported, only what you can do is use renderer to add custom text inside chart, but I'm aware that it can be not comfortable solution. http://api.highcharts.com/highcharts#Renderer.text()
Obviosuly you can reqest your suggestion in our user voice system http://highcharts.uservoice.com/

Disable hover on HighCharts

I have building a pie chart using HighCharts library, and here is my chart:
// http://jsfiddle.net/t2MxW/20890/
var chart = new Highcharts.Chart({
colors: ['#0072BC', '#BFDAFF', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4'],
credits: { enabled: false },
chart: {
renderTo: 'container',
backgroundColor: 'rgba(255, 255, 255, 0.1)',
type: 'pie',
margin: [0, 0, 0, 0],
spacingTop: 0,
spacingBottom: 0,
spacingLeft: 0,
spacingRight: 0
},
title: { text: null },
plotOptions: {
pie: {
allowPointSelect: false,
size: '100%',
dataLabels: { enabled: false }
}
},
series: [{
showInLegend: false,
type: 'pie',
name: 'Pie Chart',
data: [
['Mobile', 65], // first half of pie
['Other', 35] // second half of pie
]
}]
});
But the problem is that I don't want appearing tooltip on mouse over...
Is it possible to disable tooltip on hover?
Disabling tooltip just disables the tooltip but the hover effect is still present. To disable the hover effect, add the following to your plotOptions:
plotOptions: {
series: {
states: {
hover: {
enabled: false
}
}
}
},
You need to set the tooltip attribute to false, like so:
tooltip: { enabled: false },
jsFiddle here
Here's the full code for your case:
var chart = new Highcharts.Chart({
colors: ['#0072BC', '#BFDAFF', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4'],
credits: { enabled: false },
tooltip: { enabled: false },
chart: {
renderTo: 'container',
backgroundColor: 'rgba(255, 255, 255, 0.1)',
type: 'pie',
margin: [0, 0, 0, 0],
spacingTop: 0,
spacingBottom: 0,
spacingLeft: 0,
spacingRight: 0
},
title: { text: null },
plotOptions: {
pie: {
allowPointSelect: false,
size: '100%',
dataLabels: { enabled: false }
}
},
series: [{
showInLegend: false,
type: 'pie',
name: 'Pie Chart',
data: [
['Mobile', 65], // first half of pie
['Other', 35] // second half of pie
]
}]
});
You might alternatively want to disable all mouse tracking in general, both tooltip and hover effects:
(copy and paste link) http://api.highcharts.com/highcharts#series.enableMouseTracking
http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/plotoptions/series-enablemousetracking-false/
plotOptions: {
series: {
enableMouseTracking: false
}
}
The title of the question is about disabling hovering, so in case anyone else finds themselves here for that purpose, I'll elaborate on #SergeyB's answer.
There are a few options that affect how mouse hovering changes a series' styling. They each have different effects depending on the series type. I'll talk about line and pie series here, but generally, you can look under plotOptions.<seriesType>.states.hover for styling applied to the currently hovered series and plotOptions.<seriesType>.states.inactive for styling applied to the non-hovered series (e.g. plotOptions.pie.states.hover). None of these options affect the tooltip styling.
plotOptions.series.states.inactive
plotOptions.series.states.inactive affects the styling applied to all series that aren't currently being hovered over. To prevent them from fading into the background, set plotOptions.series.states.inactive.opacity to 1.
var chartOptions = {
// ...
plotOptions: {
series: {
states: {
inactive: {
opacity: 1,
},
},
},
},
}
jsFiddle for line
jsFiddle for pie
plotOptions.series.states.hover
plotOptions.series.states.hover affects the styling applied to the series that's being hovered over. For example, for a line series, the default is to thicken the line width and apply a halo to the nearest point.
To disable any styling of a currently hovered line series, set plotOptions.series.states.hover.enabled to false.
var chartOptions = {
// ...
chart: {
type: "line",
},
plotOptions: {
series: {
states: {
hover: {
enabled: false,
},
},
},
},
}
jsFiddle
Unfortunately, if we set this on a pie series, this will make the hovered slice fade into the background with the rest of the inactive slices (see this jsFiddle for an example). If we want to remove all hover styling without affecting the inactive styling, we can set plotOptions.series.states.hover.halo.size to 0 (which removes the halo) and plotOptions.pie.states.hover.brightness to 0 (which removes the brightening effect). Note that since brightness is specific to pie series, it's documented under plotOptions.pie instead of plotOptions.series (though it worked for me even when I added it under plotOptions.series).
var chartOptions = {
// ...
chart: {
type: "pie",
},
plotOptions: {
series: {
states: {
hover: {
halo: {
size: 0,
},
// this worked for me even though it's not
// documented under plotOptions.series:
//brightness: 0,
},
},
},
pie: {
states: {
hover: {
brightness: 0,
},
},
},
},
}
jsFiddle
plotOptions.series.stickyTracking
If you're using a line or area series, you may have noticed that as soon as you hover over the chart, even if you're not touching a series, the nearest series will receive hover styling and the rest will receive inactive styling. This is because plotOptions.series.stickyTracking is true by default for line and area series. If you set plotOptions.series.stickyTracking to false, hover and inactive styling will only be applied while you're hovering over a line.
var chartOptions = {
// ...
chart: {
type: "line",
},
plotOptions: {
series: {
stickyTracking: false,
},
},
}
jsFiddle
plotOptions.series.enableMouseTracking
As #ninedozen noted, you can completely disable all responsive interactions based on mouse movement by setting plotOptions.series.enableMouseTracking to false. Note that this will also disable tooltips in addition to hover/inactive styling.
Options scope
To apply these options to all series in the entire chart, place them under plotOptions.series. To apply them only to certain series types (or if the option is specific to a certain series), place them under plotOptions.<seriesType>. To apply them to a specific series, place them inside that series' options.
var chartOptions = {
series: [
{
name: "series1",
type: "line",
data: [...],
// these options will only apply to series1, not series2 or series3
states: {...},
},
{
name: "series2",
type: "line"
data: [...],
},
{
name: "series3",
type: "pie"
data: [...],
}
],
plotOptions: {
// these options will apply to all series in the chart
series: {states: {...}},
// these options will only apply to series of type line
// i.e. series1 and series2
line: {states: {...}}
}
}
You can simply turn them of using the following:
tooltip: {
enabled: false
},
plotOptions: {
series: {
states: {
inactive: {
opacity: 1,
},
},
}
}
I did this to display multiple line charts on hover.
In order to completely turn off tooltip and hover effects on a chart,
it is needed to turn off the tooltip, disable hover state and set inactive data opacity to 100%.
This answer is based on previous answers and shows a complete solution to the problem.
This is the configuration which turns off the hover and tooltip effects:
series: {
states: {
hover: {
enabled: false
},
inactive: {
opacity: 1,
}
}
},
tooltip: {
enabled: false
}
you can simply disable it by setting the option
tooltip:{
enabled: false
}
I usually just disable the style in css so I can still access the hover event in JS if needed...
.highcharts-tooltip {
display: none;
}
As specified in the accepted answer, you need to set
tooltip: { enabled: false }
Note - you must specify this as a property of your Highcharts.Options object (i.e. your chart options object, not a property of your series). So, either specify it in the JSON that you pass into your Highcharts.Chart object, or specify it as a property of a Highcharts.Options object that you explicitly create, before you pass it to you Highcharts.Chart
See https://api.highcharts.com/highcharts/tooltip.enabled

Categories