I am trying to plot a line chart and a column chart on separate y-axes in highstock using react. However, the line chart is hidden behind the column chart. Could I have the line chart on the column chart as shown in their example dual chart - https://www.highcharts.com/demo/combo-dual-axes?
I've added a link to my chart to clarify my problem.
const chart_options= {
chart: {
zoomType: 'x'
},
title: {
text: ""
},
tooltip:{
split: false,
shared:true,
valueDecimals: 2
},
legend: {
enabled: true,
layout: 'horizontal'
},
series: [
{
name: 'ABC',
type: 'line',
data: this.props.data1,
yAxis:1,
color:'grey',
lineWidth: 3
},
{
name: 'DEF',
type: 'line',
data: this.props.data2,
yAxis:0,
},
{
name: 'GHI',
type: 'column',
data: this.props.data3,
yAxis:0,
color: '#ffd699',
dataGrouping:{
enabled: false
},
pointWidth: 1
},
],
xAxis: {
type: 'datetime',
gridLineWidth:1,
title: {
text: 'Time'
},
tickPixelInterval: 5
},
yAxis: [
{
labels: {
format: '{value:.0f}%',
},
opposite: false,
tickPixelInterval: 20
},
{
title: {
labels: {
format: '{value:.2f}',
},
tickPixelInterval: 20
},
],
}
Could someone please help?
Thanks.
You can set zIndex propert for the series:
series: [{
zIndex: 1,
...
}, {
zIndex: 0,
...
}]
Live demo: https://jsfiddle.net/BlackLabel/x5aefpLv/
API Reference: https://api.highcharts.com/highstock/series.column.zIndex
Related
I am using react-Echart for drawing some charts.
but I stucked some problems.
From what I read in the document, If I set proper dimension in series props, I can also use value of that dimensions in labels using formatter props.
However, even if I try many times, the formatter doesn't work properly.
Attached is the option data I used. Please check it out and give me an answer.
const option:EChartsOption = {
title: {
show: false
},
xAxis: {
show: false,
type: 'time'
},
yAxis: {
type: 'value',
position: 'right'
},
// ...
dataset:
{
dimensions: [
'date', 'randomV', 'dailyIncome', 'dailyOutcome', 'percent'
],
source: fakeLineGraphData // [{date:string, randomV:number, dailyIncome: number, dailyOutcome:number , percent: number}]
},
series: [{
dimensions: ['date', 'randomV'],
type: 'line',
symbol: 'none',
showSymbol: false,
markPoint: {
itemStyle: {
color: '#74d527'
},
data: [
{
type: 'max',
name: 'Max',
symbol: 'triangle',
symbolSize: 10,
symbolRotate: 180,
symbolOffset: [0, -20],
label: {
position: 'right',
formatter: `max {c} ({#percent}%)`, // don't works!
color: 'gray'
}
},
{
type: 'min',
name: 'Min',
symbol: 'triangle',
symbolSize: 10,
symbolOffset: [0, 20],
label: {
position: 'right',
formatter: `최저 {c} (-${#percent}%)`, // don't works!
color: 'gray'
}
}
]
},
//...
]
};
Doc which I refered : https://echarts.apache.org/en/option.html#series-line.markPoint.label.formatter
I am trying to create a chart like this. Below is my chart code. However, I am unable to set a different color in the second bar. The first color in the first bar gets set in the second bar.
self.chart = {
type: 'horizontal-bar',
options: {
responsive: true,
maintainAspectRatio: false,
tooltips: {
enabled: true,
callbacks: {
label: function (tooltipItem, _) {
return $filter('number')(tooltipItem.xLabel);
}
}
},
events: ['click', 'mousemove'],
hover: {
onHover: function(item, chartElement) {
item.target.style.cursor = chartElement[0] ? 'pointer' : 'default';
}
},
scales: {
xAxes: [{
scaleLabel: {
stacked: true,
display: true,
labelString: "Test"
},
ticks: {
stacked: true,
beginAtZero: true,
maxRotation: 0,
minRotation: 0,
callback: function (value) {
return $filter('number')(value);
}
}
}]
}
},
data: [[2,12], [5]],
labels: labels,
colors: [chartBlue, chartGreen],
datasetOverride: [{ stack: 1, fill: false }, { stack: 1, fill: false }]
}
This is the result I am getting.
I need to set a different color (for example yellow) in the second bar.
With colors you define the colors for datasets. With two colors you define two datasets. With your two arrays in data you have two datasets, that's why you can't see an additional color.
You need a third dataset for a third color, with 0 at the labels where you don't want a bar.
Check out the following example (Working example at JSBin):
var config = {
type: 'bar',
data: {
labels: ["January", "February", "March"],
datasets: [{
label: 'Dataset 1',
backgroundColor: 'black',
data: [0, 8, 4]
}, {
label: 'Dataset 2',
backgroundColor: "red",
data: [6, 2, 8],
}, {
label: 'Dataset 3',
backgroundColor: "blue",
data: [3, 0, 0]
}]
},
options: {
scales: {
xAxes: [{
stacked: true
}],
yAxes: [{
stacked: true
}]
}
}
};
var ctx = document.getElementById("myChart").getContext("2d");
new Chart(ctx, config);
Have you tried to add more data?
data: [[2,12], [5], [1], [4], [3]],
labels: labels,
colors: [chartBlue, chartGreen],
Try it and see what happens to the chart :)
I am drawing several pie charts using chart.js in the same page. All pie charts have the same legend. The following code is used to draw the pie-chart with the legend for each pie-chart.
$scope. drawFunction = function()
{
new Chart(canvasVal, {
type: 'bar',
data: {
labels: ["1900", "1950", "1999", "2050"],
datasets: [{
label: "Europe",
type: "line",
borderColor: "#8e5ea2",
data: [408,547,675,734],
fill: false
}, {
label: "Africa",
type: "line",
borderColor: "#3e95cd",
data: [133,221,783,2478],
fill: false
}, {
label: "Europe",
type: "bar",
backgroundColor: "rgba(0,0,0,0.2)",
data: [408,547,675,734],
}, {
label: "Africa",
type: "bar",
backgroundColor: "rgba(0,0,0,0.2)",
backgroundColorHover: "#3e95cd",
data: [133,221,783,2478]
}
]
},
options: {
title: {
display: true,
text: 'Population growth (millions): Europe & Africa'
},
legend: { display: true}
}
});
}
HTML
<canvas id="pie-chart" width="800" height="450"></canvas>
Currently the same legend is displayed for each chart. Can I display one common legend for all drawn pie-charts?
UPDATE
I am extremely sorry for tangling the code. Please find the below code snippet
$scope.drawFunc = function()
{
new Chart(document.getElementById("pie-chart"), {
type: 'pie',
data: {
labels: ["Africa", "Asia", "Europe", "Latin America", "North America"],
datasets: [{
label: "Population (millions)",
backgroundColor: ["#3e95cd", "#8e5ea2","#3cba9f","#e8c3b9","#c45850"],
data: [2478,5267,734,784,433]
}]
},
options: {
title: {
display: true,
text: 'Predicted world population (millions) in 2050'
},
legend: {
display: true
}
}
});
}
Instead of hard coding the boolean value for display property of legend I passed its value as a parameter each time the draw function is called.
$scope.drawFunc = function( legendBoolValue)
{
new Chart(document.getElementById("pie-chart"), {
type: 'pie',
data: {
labels: ["Africa", "Asia", "Europe", "Latin America", "North America"],
datasets: [{
label: "Population (millions)",
backgroundColor: ["#3e95cd", "#8e5ea2","#3cba9f","#e8c3b9","#c45850"],
data: [2478,5267,734,784,433]
}]
},
options: {
title: {
display: true,
text: 'Predicted world population (millions) in 2050'
},
legend: {
display: legendBoolValue
}
}
});
}
i have trying to create a chart like
this. I have tried with highchart.js and chart.js but result is not like expected. Is there any plugin to create a chart like this? Or any other way to stack like this in highchart.js or in chart.js? Thank you.
You can use highcharts Fixed placement columns that is inverted. Check the demo posted below.
HTML:
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container"></div>
JS:
Highcharts.chart('container', {
chart: {
type: 'column',
inverted: true
},
xAxis: {
categories: [
'Seattle HQ',
'San Francisco',
'Tokyo'
]
},
yAxis: [{
min: 0,
title: {
text: 'Employees'
}
}, {
title: {
text: 'Profit (millions)'
},
opposite: true
}],
legend: {
shadow: false
},
tooltip: {
shared: true
},
plotOptions: {
column: {
grouping: false,
shadow: false,
borderWidth: 0
}
},
series: [{
name: 'Employees',
color: 'rgba(165,170,217,1)',
data: [150, 73, 20],
pointPadding: 0,
groupPadding: 0.15,
pointPlacement: 0
}, {
name: 'Employees Optimized',
color: 'rgba(126,86,134,.9)',
data: [140, 90, 40],
pointPadding: 0.2,
pointPlacement: 0
}]
});
Demo:
https://jsfiddle.net/BlackLabel/g0b9uev5/1/
I want to put a legend, but I don´t know why it doesn´t appear. Also, I want to put the database in the fragments of my pie charts.
myapp.controller('myctrl', function ($scope) {
var data = [
['APP Android', 45.0],
['APP Ios', 26.8],
]
$scope.highchartsNG = {
options: {
chart: { type: 'pie'}
},
legend: {
enabled: true
},
series: [ {
name: 'Avisos',
innerSize: '50%'
},
{
name: 'Plataforma',
size: '80%',
innerSize: '65%',
showInLegend: false,
data: data
}],
loading: false
}
});
This example is public in http://jsfiddle.net/Cp73s/2038/
Check this out
var myapp = angular.module('myapp', ["highcharts-ng"]);
myapp.controller('myctrl', function($scope) {
var data = [
['APP Android', 45.0],
['APP Ios', 26.8],
['Widget Web', 12.8],
['MTC BAckoffice', 8.5],
['Correo electrónico', 6.2],
['Facebook', 6.2],
['Twitter', 6.2],
['Teléfono', 6.2],
['Presencial', 6.2],
]
$scope.highchartsNG = {
options: {
chart: {
type: 'pie'
},
plotOptions: {
pie: {
dataLabels: {
distance: -25 //adjust this value to change label distance
}
}
},
},
title: {
text: '550<br>AVISOS',
align: 'center',
verticalAlign: 'middle'
},
legend: {
enabled: true
},
series: [{
name: 'Avisos',
innerSize: '50%'
}, {
name: 'Plataforma',
size: '80%',
innerSize: '65%',
showInLegend: true,
data: data
}],
loading: false
}
});
Fiddles
fiddle with updated label
Fiddle with updated legend display