This is my code.How to render highcharts in react page. Included highcharts.js & variable-pie.js files. Is this code right ?? Once we load the chart, we didn't get any error. And we are only using two highchart library only. without using any other highchart react packages. Is this code is enough to display or render highcharts for reactjs?
componentDidMount() {
const options = this.highchartsOptions();
this.chart = Highcharts.chart('pie-chart-profile', options);
}
highchartsOptions() {
const options = {
chart: {
// renderTo: 'container',
type: 'variablepie',
margin: [0, 0, 0, 0],
// marginLeft: -100,
events: {
load: function() {
this.renderer
.circle(
this.chartWidth / 2,
this.plotHeight / 2 + this.plotTop,
this.plotHeight / 4,
)
.attr({
fill: 'rgba(0,0,0,0)',
stroke: '#2ec277',
left: -100,
'stroke-width': 1,
})
.add();
},
},
},
colors: ['#2ec277', '#2db799', '#b7e886', '#6d5494', '#0077b4'],
title: {
text: null,
},
legend: {
align: 'right',
verticalAlign: 'top',
layout: 'vertical',
x: 20,
y: 100,
itemMarginTop: 5,
itemMarginBottom: 5,
itemStyle: {
font: '17pt Trebuchet MS, Verdana, sans-serif',
color: '#333333',
},
},
plotOptions: {
series: {
stacking: 'normal',
dataLabels: {
enabled: false,
},
showInLegend: true,
size: 185,
},
},
series: [
{
minPointSize: 10,
innerSize: '27%',
zMin: 0,
name: 'Job Match',
data: [
{
name: 'Job Title Match 99%',
y: 100,
z: 99,
},
{
name: 'Industry Match 98%',
y: 100,
z: 98,
},
],
},
],
};
return options;
}
return (
<div
className="chart-toggle-display"
id="pie-chart-profile"
style={style}
/>
)
I recommend you to use highcharts-react-official wrapper: https://github.com/highcharts/highcharts-react#readme
It will allow you to simply use Highcharts with React. Example: https://codesandbox.io/s/ovx6kqokqq
However, here you can find a working example without the wrapper: https://codesandbox.io/s/v6rrn7n745
import React from "react";
import { render } from "react-dom";
// Import Highcharts
import Highcharts from "highcharts/highstock";
import variablePie from "highcharts/modules/variable-pie.js";
variablePie(Highcharts);
class App extends React.Component {
constructor(props) {
super(props);
}
componentDidMount() {
const options = this.highchartsOptions();
this.chart = Highcharts.chart("pie-chart-profile", options);
}
highchartsOptions() {
const options = {
chart: {
// renderTo: 'container',
type: "variablepie",
margin: [0, 0, 0, 0],
// marginLeft: -100,
events: {
load: function() {
this.renderer
.circle(
this.chartWidth / 2,
this.plotHeight / 2 + this.plotTop,
this.plotHeight / 4
)
.attr({
fill: "rgba(0,0,0,0)",
stroke: "#2ec277",
left: -100,
"stroke-width": 1
})
.add();
}
}
},
colors: ["#2ec277", "#2db799", "#b7e886", "#6d5494", "#0077b4"],
title: {
text: null
},
legend: {
align: "right",
verticalAlign: "top",
layout: "vertical",
x: 20,
y: 100,
itemMarginTop: 5,
itemMarginBottom: 5,
itemStyle: {
font: "17pt Trebuchet MS, Verdana, sans-serif",
color: "#333333"
}
},
plotOptions: {
series: {
stacking: "normal",
dataLabels: {
enabled: false
},
showInLegend: true,
size: 185
}
},
series: [
{
minPointSize: 10,
innerSize: "27%",
zMin: 0,
name: "Job Match",
data: [
{
name: "Job Title Match 99%",
y: 100,
z: 99
},
{
name: "Industry Match 98%",
y: 100,
z: 98
}
]
}
]
};
return options;
}
render() {
return <div className="chart-toggle-display" id="pie-chart-profile" />;
}
}
render(<App />, document.getElementById("root"));
I believe #pie-chart-profile should already be there in render() i.e the last return inside render()
componentDidMount() {
const options = this.highchartsOptions();
this.chart = Highcharts.chart('pie-chart-profile', options);
}
highchartsOptions() {
const options = {
chart: {
// renderTo: 'container',
type: 'variablepie',
margin: [0, 0, 0, 0],
// marginLeft: -100,
events: {
load: function() {
this.renderer
.circle(
this.chartWidth / 2,
this.plotHeight / 2 + this.plotTop,
this.plotHeight / 4,
)
.attr({
fill: 'rgba(0,0,0,0)',
stroke: '#2ec277',
left: -100,
'stroke-width': 1,
})
.add();
},
},
},
colors: ['#2ec277', '#2db799', '#b7e886', '#6d5494', '#0077b4'],
title: {
text: null,
},
legend: {
align: 'right',
verticalAlign: 'top',
layout: 'vertical',
x: 20,
y: 100,
itemMarginTop: 5,
itemMarginBottom: 5,
itemStyle: {
font: '17pt Trebuchet MS, Verdana, sans-serif',
color: '#333333',
},
},
plotOptions: {
series: {
stacking: 'normal',
dataLabels: {
enabled: false,
},
showInLegend: true,
size: 185,
},
},
series: [
{
minPointSize: 10,
innerSize: '27%',
zMin: 0,
name: 'Job Match',
data: [
{
name: 'Job Title Match 99%',
y: 100,
z: 99,
},
{
name: 'Industry Match 98%',
y: 100,
z: 98,
},
],
},
],
};
return options;
}
render() {
return (
<div
className="chart-toggle-display"
id="pie-chart-profile"
style={style}
/>
)
}
Related
this is how my chart.js is looks like.... This is static chart bar And i Have to make this chat dynamic
(function($) {
// "use strict";
var dlabChartlist = function()
{
var screenWidth = $(window).width();
let draw = Chart.controllers.line.__super__.draw;
var chartBar = function()
{
var options =
{
series: [
{
name: 'Project',
data: [50, 58, 70, 40, 10, 70, 20],
// radius: 12,
},
// {
// name: 'Cycling',
// data: [80, 40, 55, 20, 45, 30, 80]
// },
],
chart: {
type: 'bar',
height: 400,
toolbar: {
show: false,
},
},
plotOptions: {
bar: {
horizontal: false,
columnWidth: '57%',
endingShape: "rounded",
borderRadius: 12,
},
},
states: {
hover: {
filter: 'none',
}
},
colors:['#FFA26D'],
dataLabels: {
enabled: false,
},
markers: {
shape: "circle",
},
legend: {
show: false,
fontSize: '12px',
labels: {
colors: '#000000',
},
markers: {
width: 18,
height: 18,
strokeWidth: 10,
strokeColor: '#fff',
fillColors: undefined,
radius: 12,
}
},
stroke: {
show: true,
width: 4,
curve: 'smooth',
lineCap: 'round',
colors: ['transparent']
},
grid: {
borderColor: '#eee',
},
xaxis: {
position: 'bottom',
categories: ['Project1', 'Project2', 'Project3', 'Project4', 'Project5', 'Project6', 'Project7'],
labels: {
style: {
colors: '#787878',
fontSize: '13px',
fontFamily: 'poppins',
fontWeight: 100,
cssClass: 'apexcharts-xaxis-label',
},
},
crosshairs: {
show: false,
}
},
yaxis: {
labels: {
offsetX:-16,
style: {
colors: '#787878',
fontSize: '13px',
fontFamily: 'poppins',
fontWeight: 100,
cssClass: 'apexcharts-xaxis-label',
},
},
},
fill: {
type: 'gradient',
gradient: {
shade: 'white',
type: "vertical",
shadeIntensity: 0.2,
gradientToColors: undefined, // optional, if not defined - uses the shades of same color in series
inverseColors: true,
opacityFrom: 1,
opacityTo: 1,
stops: [0, 50, 50],
colorStops: []
}
},
tooltip: {
y: {
formatter: function (val) {
return val + " Days"
}
}
},
};
var chartBar1 = new ApexCharts(document.querySelector("#chartBar"), options);
chartBar1.render();
}
And this is where im showing index.html where i m showing this chart
<div class="tab-pane fade active show" id="monthly">
<div id="chartBar" class="chartBar"></div>
</div>
I don't have enough knowledge about js and i want this chart bar dynamic.....
and i m using mysql
how can i convert it into dynamic chart
I have setup highchart in my vue.js template. I noticed that when i open the browser console or resize the browser, the highchart tends to move up. But right after refreshing the page with that browser size, it aligns perfectly in the centre.
Here is my code
<template>
<highcharts :options="chartOptions"></highcharts>
</template>
<script>
import { Chart } from "highcharts-vue";
export default {
name: "CustomGuage",
components: {
highcharts: Chart
},
props: ["data", "title", "name", "min", "max", "format", "text", "x", "y", "target",
"targetFormat"],
data() {
return {
chartOptions: {
chart: {
type: "solidgauge",
style: {
fontFamily: 'Segoe UI Light',
fontSize :'22px',
},
// plotBackgroundColor: null,
// plotBackgroundImage: null,
// plotBorderWidth: 0,
// plotShadow: false,
marginBottom: 190
},
title: {
text: this.title,
align: "left"
},
pane: {
center: ["50%", "85%"],
startAngle: -90,
endAngle: 90,
size: 200,
background: {
innerRadius: "60%",
outerRadius: "100%",
shape: "arc",
backgroundColor: '#f2f2f2'
}
},
// the value axis
yAxis: {
min: 0,
max: this.max,
stops: [
[0.1, "#c00000"], // green
[0.5, "#ffc000"], // yellow
[0.9, "#4f6228"] // red
],
// minColor: '#DF5353',
// maxColor: '#55BF3B',
lineWidth: 0,
//tickWidth: 0,
minorTickInterval: null,
tickPositions: [0, this.max],
title: {
y: -70
},
labels: {
y: 16
}
},
credits: {
enabled: false
},
plotOptions: {
solidgauge: {
dataLabels: {
y: -1,
borderWidth: 0,
useHTML: true,
}
}
},
series: [
{
name: this.name,
data: this.data,
dataLabels: {
format: this.format
},
},
{
data: this.target,
dataLabels: {
enabled: true,
format:this.targetFormat,
verticalAlign: 'top',
borderWidth: 0,
//useHTML: true,
},
tooltip: {
enabled: false
},
type: "gauge",
dial: {
baseLength: "100%",
radius: "110%",
rearLength: "-45%",
},
}
]
}
};
},
}
};
</script>
Is there anything i can add or do to make sure that the chart position does not change?
I am trying to implement stacked bar graph using Highcharts . The problem I am facing is : When the series data for a stack is all null , I want to display 0 as stack label ,but nothing is displayed as stack label .
And setting "minPointLength" to some value , the stack labels are getting overlapped with the stack graph . The distance between stack labels and the stack should vary dynamically but its not happening.
Here's my JSfiddle
https://jsfiddle.net/anandabhishe/6fuffmpt/10/
$(function() {
$('#container').highcharts({
colors: ['#8dafb7', '#f19962', '#e97381', '#f8c465', '#6cd299', '#87cfe2'],
chart: {
type: 'column',
marginBottom: 50,
marginTop: 150,
height: 700
},
title: {
text: ''
},
xAxis: {
categories: ['Q2,16', 'Q3,16', 'Q4,16', 'Q1,17'],
width: 700,
tickmarkPlacement: 'on',
labels: {
y: 40,
style: {
color: '#333333',
fontSize: '25',
fontFamily: 'ProximaNova-Light',
opacity: '.6'
},
}
},
yAxis: {
gridLineWidth: 0,
min: 0,
tickInterval: 20,
title: {
text: ''
},
labels: {
style: {
color: '#333333',
fontSize: '25',
fontFamily: 'ProximaNova-Light',
opacity: '.5'
},
formatter: function() {
return '$' + this.value;
}
},
stackLabels: {
style: {
color: '#555555',
fontSize: '25',
fontFamily: 'ProximaNova-Regular'
},
enabled: true,
formatter:function() {
if (this.total < 1000) {
return '$' + this.total;
} else {
return '$' + (this.total / 1000).toFixed(2) + 'K';
};
}
}
},
legend: {
enabled: false,
width: 600,
floating: false,
x: 50,
align: 'left',
style: {
color: '#555555',
fontSize: '25',
fontFamily: 'ProximaNova-Regular',
opacity: '.8'
},
borderWidth: 0
},
tooltip: {
enabled: false
},
plotOptions: {
column: {
stacking: 'normal',
dataLabels: {
enabled: false,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
}
},
series: {
minPointLength: 20,
pointWidth: 30
}
},
series: [{
name: 'FTE-OpEx ',
data: [null, 30, 40, 70],
pointWidth: 30,
}, {
name: 'FTE-CapEx',
data: [null, 20, 30, 20],
pointWidth: 30
}, {
name: 'AWF-OpEx',
data: [null, 40, 40, 20],
pointWidth: 30
}, {
name: 'AWF-CapEx',
data: [null, 40, 40, 20],
pointWidth: 30
}, {
name: 'HW/SW',
data: [null, 40, 40, 20],
pointWidth: 30
}, {
name: 'Other',
data: [null, 40, 40, 20],
pointWidth: 30
}]
});
});
I am very new to Highcharts. I am trying to use the solid gauge. The problem is that the percentage text is not present in the center. Is there anyway to put the percentage in the center of the chart?
Here is the code:
$(function () {
Highcharts.chart('container', {
chart: {
type: 'solidgauge'
},
title: {
text: ''
},
tooltip: {
borderWidth: 0,
backgroundColor: 'none',
shadow: false,
style: {
fontSize: '16px'
},
pointFormat: '{series.name}<br><span style="font-size:2em; color: {point.color}; font-weight: bold">{point.y}%</span>',
positioner: function (labelWidth, labelHeight) {
return {
x: 200 - labelWidth / 2,
y: 180
};
}
},
pane: {
center: ['50%', '27%'],
startAngle: 0,
endAngle: 360,
background: [{ // Track for Stand
outerRadius: '62%',
innerRadius: '38%',
backgroundColor: Highcharts.Color(Highcharts.getOptions().colors[2]).setOpacity(0.3).get(),
borderWidth: 0,
}],
},
yAxis: {
min: 0,
max: 100,
lineWidth: 0,
tickPositions: []
},
plotOptions: {
solidgauge: {
borderWidth: '34px',
dataLabels: {
enabled: false
},
linecap: 'round',
stickyTracking: false
}
},
series: [{
name: 'Stand',
borderColor: Highcharts.getOptions().colors[2],
data: [{
color: Highcharts.getOptions().colors[2],
radius: '50%',
innerRadius: '50%',
y: 50
}]
}]
},
});
The x and y in the label option can set the position but I want it to be dynamic.
Secondly I want it to be always shown. Here is the result of the code above.
I'm using highcharts and i'd like to show a big gauge(500x500px).
Resizing the gauge was quite easy, but the small block with the value in it doesn't resize. How can I make that small block bigger?
Thanks for the help!
jsFiddle: http://jsfiddle.net/AVd8k/
$(function () {
$('#container').highcharts({
chart: {
type: 'gauge',
plotBackgroundColor: null,
plotBackgroundImage: null,
plotBorderWidth: 0,
plotShadow: false,
width: 500,
height: 500
},
title: {
text: 'Speedometer'
},
pane: {
startAngle: -150,
endAngle: 150,
background: [{
backgroundColor: {
linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
stops: [
[0, '#FFF'],
[1, '#333']
]
},
borderWidth: 0,
outerRadius: '109%'
}, {
backgroundColor: {
linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
stops: [
[0, '#333'],
[1, '#FFF']
]
},
borderWidth: 1,
outerRadius: '107%'
}, {
// default background
}, {
backgroundColor: '#DDD',
borderWidth: 0,
outerRadius: '105%',
innerRadius: '103%'
}]
},
// the value axis
yAxis: {
min: 0,
max: 200,
minorTickInterval: 'auto',
minorTickWidth: 1,
minorTickLength: 10,
minorTickPosition: 'inside',
minorTickColor: '#666',
tickPixelInterval: 30,
tickWidth: 2,
tickPosition: 'inside',
tickLength: 10,
tickColor: '#666',
labels: {
step: 2,
rotation: 'auto'
},
title: {
text: 'km/h'
},
plotBands: [{
from: 0,
to: 120,
color: '#55BF3B' // green
}, {
from: 120,
to: 160,
color: '#DDDF0D' // yellow
}, {
from: 160,
to: 200,
color: '#DF5353' // red
}]
},
series: [{
name: 'Speed',
data: [80],
tooltip: {
valueSuffix: ' km/h'
}
}]
},
// Add some life
function (chart) {
if (!chart.renderer.forExport) {
setInterval(function () {
var point = chart.series[0].points[0],
newVal,
inc = Math.round((Math.random() - 0.5) * 20);
newVal = point.y + inc;
if (newVal < 0 || newVal > 200) {
newVal = point.y - inc;
}
point.update(newVal);
}, 3000);
}
});
});
try this by replacing series (whole object) with:
series: [{
name: 'Speed',
data: [80],
tooltip: {
valueSuffix: ' km/h'
},
dataLabels: {
enabled: true,
style: {
//fontWeight:'bold',
fontSize: '22px'
}
}
}]
Proof: http://jsfiddle.net/nmQfE/
Of course, you can adjust the font size as you want
It looks like the property you are after is:
plotOptions.gauge.dataLabels.style.fontSize
http://api.highcharts.com/highcharts#plotOptions.gauge.dataLabels.style
Try adding something like this to the options:
plotOptions: {
gauge: {
dataLabels: {
style: {
fontSize: '60px'
}
}
}
}
You may need to reposition it using the x and y properties.