I've drawn a column chart with gradient Highcharts library .
that you can see here
$(function() {
$('#container').highcharts({
chart: {
type: 'column',
spacingBottom: 0,
spacingTop: 0,
spacingLeft: 0,
spacingRight: 0,
events: {
load: function() {
this.xAxis[0].setExtremes(0, 5);
}
}
},
title: {
text: ''
},
subtitle: {
text: ''
},
xAxis: {
categories: [
'S1',
'S2',
'S3',
],
crosshair: false,
gridLineWidth: 0,
tickWidth: 0
},
yAxis: {
min: 0,
max: 100,
title: {
text: ''
},
labels: {
enabled: false
},
gridLineWidth: 0,
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: [{
name: 'S1',
data: [30, 50, 100],
color: {
linearGradient: {
x1: 0,
x2: 0,
y1: 0,
y2: 1
},
stops: [
[0, 'red'],
[1, 'green']
]
}
}]
});
});
<script src="https://code.jquery.com/jquery-3.6.1.js" integrity="sha256-3zlB5s2uwoUzrXK3BT7AX3FyvojsraNFxCc2vC/7pNI=" crossorigin="anonymous"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" ></div>
The problem is about gradient ,
I have three bars here
the first column value is 30
the second is 50
and last is 100
but gradient is the same for all !
(all of the have green and red )
and it is not right !
I want a gradient in order that
the first column to be in green zoon
something like this
How can I achieve it ?
From docs:
Note that linear gradients can be differently defined (as an array or
an object). Also, start/end positions might be calculated differently
depending on the gradientUnits property (this property can only be set
in linear gradient declared as object).
gradientUnits values:
userSpaceOnUse Default when gradient declared as an array. Start and end positions have to be declared as pixels on the chart.
objectBoundingBox Default when gradient declared as an object. Start and end positions are in the range of 0 to 1 as described above.
Using this might sometimes result in the disappearance of the coloured
element.
So, instead of object for linearGradient, use array (which has values in pixels).
color: {
linearGradient: [0, 0, 0, 400],
stops: [
[0, 'red'],
[1, 'green']
]
}
Live demo: https://jsfiddle.net/BlackLabel/tfxLpck1/
Docs: https://www.highcharts.com/docs/chart-design-and-style/colors
Related
My yAxis section looks like this:
yAxis: {
title: {
text: 'Height of tide<br>in feet.'
},
gridLineColor: '#197F07',
gridLineWidth: 0,
lineWidth:1,
plotLines: [{
color: '#FF0000',
width: 1,
value: 0
}]
},
How to I change the color of the line (to red) for y = <0?
You can use the negativeColor property to change the colors.
The color for the parts of the graph or points that are below the threshold. Default threshold is 0.
Highcharts.chart('container', {
series: [{
data: [-6.4, -5.2, -3.0, 0.2, 2.3, 5.5, 8.4, 8.3, 5.1, 0.9, -1.1, -4.0],
negativeColor: '#FF0000'
}]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 400px"></div>
API Reference: https://api.highcharts.com/highcharts/plotOptions.line.negativeColor
Note that the x-axis here means the horizontal line which corresponds the 0 value, i.e. the desired result is:
However, I can only achieve this.
This is the relevant piece of code:
xAxis: {
lineColor: 'black',
lineWidth: 2
},
How to decide which horizontal line to be bolded?
You can draw a line on the Y-axis at position 0. This causes for a horizontal line to be drawn at value '0'. This is done by the highcharts option plotLines
Highcharts.chart('container', {
yAxis: {
min: -1,
max: 4,
plotLines: [{
value: 0,
color: 'black',
width: 2,
zIndex: 3
}],
},
series: [{
data: [1, 2, 3]
}]
});
I am using chart.js library and I am having a issue. I want the years axis to start from 0. Right now its starting from the negative value(-50 in my case).
Currently its coming like this-
What I want-
What I am trying-
var config = {
type: 'bar',
data: {
labels: ["Year 0", "Year 1", "Year 2", "Year 3", "Year 4", "Year 5", "Year 6"],
datasets: [{
type: 'line',
label: 'Accumulative Flow',
data: [0, -50, 20, 30, 40, 50],
borderColor: 'red',
fill: false,
lineTension: 0,
borderJoinStyle: 'miter',
xAxes: [{
barPercentage: 0.4
}]
}, {
type: 'bar',
label: 'Benifit(One time)',
backgroundColor: "#005998",
data: [40, 50, 60, 80, 50, 60],
}, ]
},
options: {
title: {
display: true,
text: 'Custom Chart Title'
},
scales: {
xAxes: [{
time: {
displayFormats: {
quarter: ' YYYY'
}
},
beginAtZero: true,
barPercentage: 0.3,
id: 'x-axis-label',
position: 'bottom',
scaleStartValue: 20,
gridLines: {
display: false
},
}],
yAxes: [{
id: 'y-axis-label',
ticks: {
max: 300,
min: -50,
stepSize: 50,
},
position: 'left',
gridLines: {
display: false
},
}]
},
legend: {
position: 'right'
},
maintainAspectRatio: false,
scaleBeginAtZero: true
}
};
var ctx = document.getElementById("myChart").getContext("2d");
new Chart(ctx, config);
.GraphContain {
max-height: 500px;
position: relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.0/moment.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.bundle.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<div class="GraphContain">
<canvas id="myChart" width="400" height="400"></canvas>
</div>
Is there any parameter to do this ?
Thanks In advance!
After reading thru the core scale source, I was able to come up with a way to configure your chart to get pretty dang close to your desired behavior.
It requires that we manually set gridline colors as well as manipulate the internal scale instance ticks array (which is used by the scale draw method to paint on the canvas).
First, in order to hide some gridlines but show others, I used the gridLines.color property and passed in an array of colors where the first index color is the default gridline color and all others are white (the first index is used to color the "zero" gridline). Note, since we are later going to manipulate the internal scale ticks array, you must add an extra index to the color array with a color of white. Here is an example of what I mean.
gridLines: {
// since we only want to show the "zero line" gridline (chart.js
// uses the color of the first index to paint this line), we
// set the first index to the default color and all others to white
// note, later we add a "dummy" tick (explained later) so the length
// of this array has to be 1 greater than the number of gridlines you
// want displayed
color: [
"rgba(0, 0, 0, 0.1)", // this is for the zero line
"rgb(255, 255, 255)",
"rgb(255, 255, 255)",
"rgb(255, 255, 255)",
"rgb(255, 255, 255)",
"rgb(255, 255, 255)",
"rgb(255, 255, 255)",
"rgb(255, 255, 255)",
"rgb(255, 255, 255)",],
}
}
Next, we use the afterTickToLabelConversion scale callback configuration property to manipulate the internal scale ticks array to force the gridlines to display like you want. Here is the implementation that works for your use case.
// we will use this callback to manipulate the ticks array
// before they are drawn on the canvas
afterTickToLabelConversion: function(scaleInstance) {
// the top gridline (which is at index 0) is always shown
// so to overcome this we add a "dummy" tick at index 0
scaleInstance.ticks.unshift(null);
// we have to do the same this to this tick array as well
// because it uses the values in this array to map to the data
scaleInstance.ticksAsNumbers.unshift(null);
// since we have added an extra tick, we need to move the
// zero line index to point to the new index of 0
scaleInstance.zeroLineIndex++
}
So putting it all together you end up with a chart that looks like this.
Check out this codepen for a working example (note, I left the other attempts to solve this...so see option 3 at the bottom).
Hey I need to convert zamel code to JavaScript Code. One of the controllers of zamel, allows monitoring of Scada alerts. I have the following controller:
The way this controller works:
we have 20 alerts on board, each alert has 3 states:
Ok State - color with green.
Alert state - color with yellow.
Danger state - color with red.
I need to build a controller using Highcharts API, The controller need to deal with real time data(update on live). The controller need to be responsive and collapsible.
Can I achieve this goals using HighCharts API , If so how.
I would be glad for any initial help in build this controller.
I think that in your case the best idea will be to use simple heatmap chart. It will give you a possibility of changing the data, resizing the chart, using tooltip etc.
Here you can find code that may help you:
$('#container').highcharts({
chart: {
type: 'heatmap',
marginTop: 40,
marginBottom: 80,
},
xAxis: {
visible: false
},
yAxis: {
visible: false
},
title: {
text: 'Example'
},
colorAxis: {
stops: [
[0, 'green'],
[0.5, 'green'],
[0.49, 'yellow'],
[0.9, 'yellow'],
[0.9, 'red']
],
min: 0,
max: 1
},
legend: {
enabled: false
},
series: [{
borderWidth: 10,
borderColor: 'white',
keys: ['x', 'y', 'value', 'name'],
data: [
[0, 0, 1, 'name1'],
[0, 1, 0, 'name2'],
[0, 2, 0.5, 'name3'],
[0, 3, 0.5, 'name4'],
[0, 4, 0, 'name5'],
[1, 0, 1, 'name6'],
[1, 1, 0, 'name7'],
[1, 2, 1, 'name8'],
[1, 3, 0, 'name9'],
[1, 4, 0, 'name10']
],
dataLabels: {
enabled: true,
color: '#000000',
formatter: function() {
return (this.key)
}
}
}]
});
I have used 3 values: 0 for 'ok', 0.5 for 'alert' and 1 for 'danger'.
Here you can see an example how it can work: http://jsfiddle.net/d7zt64v4/1/
I'd like to achieve time series, zoomable highcharts,like following picture, on ruby.
http://www.highcharts.com/demo/line-time-series
I've achieved the following line chart using lazy_high_charts However I have no idea how to get the time series chart. Could you tell me how to solve the problem?
def show
#graph = LazyHighCharts::HighChart.new('graph') do |f|
f.title(text: 'A/B Price')
f.xAxis(categories: #date_array)
f.plotOptions(line: {marker: {enabled: false}})
f.series(name: 'A/B', data: #rate_array)
end
end
Two things:
1) f.xAxis(categories: #date_array) - creates an array of categories, while you need f.xAxis(:type=> "datetime") instead. Also, #rate_array should be an array of arrays, like this:
[ [date_1, value_1], [date_2, value_2], ... ]
2) Change type from line to area, for example:
f.series(:type=> "area", :name=> 'A/B', :data=> #rate_array)
You need to add some area attributes to your plotOptions. A very simple example would be:
f.plotOptions(line:{marker: {enabled: false}}, area: {fillColor: '#000000'})
A more complex example is link on http://www.highcharts.com/demo/line-time-series:
area: {
fillColor: {
linearGradient: {
x1: 0,
y1: 0,
x2: 0,
y2: 1
},
stops: [
[0, Highcharts.getOptions().colors[0]],
[1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
]
},
marker: {
radius: 2
},
lineWidth: 1,
states: {
hover: {
lineWidth: 1
}
},
threshold: null
}
By writing as following, I've got the chart like attached picture.
#graph = LazyHighCharts::HighChart.new('graph') do |f|
f.title(text: 'A/B')
f.xAxis(categories: #date_array)
f.yAxis(title: {text: 'Exchange rate'})
f.chart(
type: "area",
zoomType: 'x'
)
f.plotOptions(
area: {
fillColor: {
linearGradient: {
x1: 0,
y1: 0,
x2: 0,
y2: 1
},
stops: [
[0, "rgb(255, 255, 255)"],
[1, "rgb(240, 240, 255)"]
]
},
marker: {
radius: 1
},
lineWidth: 1,
states: {
hover: {
lineWidth: 1
}
},
threshold: nil
}
)
f.series(name: 'A/B', data: #rate_array)