I have already made a custom graph using highchart. But it doesn't look same with design.
this is chart that i already custom
this is design that what i want
this is my code that i build using vue js,
<template>
<div>
<div class="card">
<Highcharts :options="options" />
<!--<Highstock :options="options" />
<Highmaps :options="options" />
<HighchartsGantt :options="options" />-->
</div>
</div>
</template>
<script>
import Datepicker from 'vuejs-datepicker';
import moment from 'moment';
import Highcharts from 'highcharts';
import loadMap from 'highcharts/modules/map.js';
import { genComponent } from 'vue-highcharts';
loadMap(Highcharts);
export default {
name: "SummarySproutComponent",
data: function() {
return {
}
},
created() {
this.getOption()
},
components: {
Highcharts: genComponent('Highcharts', Highcharts),
Highmaps: genComponent('Highmaps', Highcharts)
},
methods: {
getOption(){
let color = {
'38,5': 'red',
'39': 'green',
'39,4': 'blue'
}
let dataColor = [
{
'name':'halo',
'value': '39,5',
'floatValue': 3.5
},
{
'name':'halo',
'value': '39,77',
'floatValue': 4
},
{
'name':'halo',
'value': '40',
'floatValue': 5
}
]
let dataPlotlines = []
for(let i=0;i<dataColor.length;i++){
let dataPlotlinesLoop = {
color: '#FF0000',
width: 2,
value: dataColor[i].floatValue,
zIndex: 1.67,
label: {
// text: 'Plot line',
formatter: function () {
return '<span>'+dataColor[i].value+'</span></br><img style="width:100px" src="https://img2.pngdownload.id/20180422/lpe/kisspng-microsoft-word-template-document-clip-art-61-clipart-5adce2aaedf920.7563442215244253869748.jpg" />';
},
verticalAlign: 'top',
align: 'right',
x: 15,
rotation: 0
}
}
dataPlotlines.push(dataPlotlinesLoop)
}
let colors = Highcharts.getOptions().colors
let optionStatic = {
chart: {
styledMode: true,
zoomType: 'xy'
},
title: {
text: 'Average Monthly Weather Data for Tokyo',
align: 'left'
},
subtitle: {
text: 'Source: WorldClimate.com',
align: 'left'
},
xAxis: [
{
categories: ['38,5', '39', '39,4', '39,5', '39,6', '39,77', '39,9', '40', '40,2', '40,4', '40,5', '41'],
plotLines:
dataPlotlines
,
labels: {
formatter () {
return `<span style="color: ${color[this.value]}">${this.value}</span>`
}
}
}
],
yAxis: [{ // Primary yAxis
labels: {
format: '{value}°C',
style: {
color: Highcharts.getOptions().colors[2]
}
},
title: {
text: 'Temperature',
style: {
color: Highcharts.getOptions().colors[2]
}
},
opposite: true,
}, { // Secondary yAxis
title: {
text: 'Rainfall',
style: {
color: Highcharts.getOptions().colors[0]
}
},
labels: {
format: '{value} mm',
style: {
color: Highcharts.getOptions().colors[0]
}
}
},],
tooltip: {
shared: true
},
legend: {
layout: 'vertical',
align: 'left',
x: 80,
verticalAlign: 'top',
y: 55,
floating: true,
backgroundColor:
Highcharts.defaultOptions.legend.backgroundColor || // theme
'rgba(255,255,255,0.25)'
},
plotOptions: {
spline: {
// lineWidth: 4,
marker: {
enabled: false
}
},
plotLines:{
dataLabels: {
enabled: true,
color: '#000000',
}
}
},
series: [{
name: 'Rainfall',
type: 'column',
yAxis: 1,
data: [0,0,0,1,2,6,2.5,1.8,0,0,0,0],
tooltip: {
valueSuffix: ' mm'
}
},
{
name: 'Temperature',
type: 'areaspline',
data: [0,10,40,80],
tooltip: {
valueSuffix: ' °C'
},
marker: {
enabled: false
},
},
{
name: 'Temperature',
type: 'spline',
// type: 'areaspline',
data: [0,10,40,80,150,280,150,80,40,10,0,0],
tooltip: {
valueSuffix: ' °C'
},
marker: {
enabled: false
}
}
],
responsive: {
rules: [{
condition: {
maxWidth: 500
},
chartOptions: {
legend: {
floating: false,
layout: 'horizontal',
align: 'center',
verticalAlign: 'bottom',
x: 0,
y: 0
},
yAxis: [{
labels: {
align: 'right',
x: 0,
y: -6
},
showLastLabel: false
}, {
labels: {
align: 'left',
x: 0,
y: -6
},
showLastLabel: false
}, {
visible: false
}]
}
}]
}
}
this.options = optionStatic
},
genComponent(name, Highcharts) {}
}
}
</script>
This is my first try making custom chart using highchart with a difficult pattern. I have already tried my best to make that design match with required one. I am still learning javascript and css (with the framework(vue)). I request someone to please help me to solve that problem.
Related
Here's a column chart - https://jsfiddle.net/kx8qqh2e/
When you hover on a column, it shows a nice tooltip. I want to show the tooltips on all the columns at all times without having the user to hover over them. How can I achieve this?
var chart_data;
chart_data = {
chart: {
type: 'column',
backgroundColor: '#FBFBFB',
plotBackgroundColor: '#FBFBFB'
},
title: {
text: '<b>Category-Wise APF</b>',
verticalAlign: 'bottom',
useHTML: true,
style: {
color: '#454545',
fontSize: '14px'
},
y: 13
},
xAxis: {
type: 'category'
},
yAxis: {
labels: {
enabled: false
},
title: '',
gridLineColor: '#EFEFEF'
},
credits: {
enabled: false
},
legend: {
enabled: false
},
tooltip: {
pointFormat: '<b>{point.y}</b>'
},
series: [
{
colorByPoint: true,
data: [
{
name: 'Sports & Fitness',
y: 1.34,
color: '#2E91A4'
}, {
name: 'Fashion Apparels',
y: 1.29,
color: '#3196A5'
}, {
name: 'Women\'s Clothing',
y: 1.24,
color: '#2F9BA6'
}, {
name: 'Footwear',
y: 1.23,
color: '#319FA7'
}, {
name: 'Clothing & Apparels',
y: 1.21,
color: '#34A3A8'
}, {
name: 'Audio Equipments',
y: 1.20,
color: '#36A3A8'
}, {
name: 'Home Decor',
y: 1.13,
color: '#38ADAA'
}, {
name: 'Health & Personal Care',
y: 1.12,
color: '#38B1AB'
}, {
name: 'Mobile Accessories',
y: 1.12,
color: '#39B7AB'
}, {
name: 'Computer Accessories',
y: 1.11,
color: '#3DBBAD'
}
]
}
]
};
$('#categorywise-apf-graph').highcharts(chart_data);
For the sake of clarity and posterity:
You can turn off the standard tooltip, and use the dataLabels to accomplish your goal.
tooltip: {
enabled: false,
crosshairs: true
},
plotOptions: {
series: {
dataLabels: {
enabled: true
}
}
}
By default, a small label with the y value of the column will be placed above the column.
You can use the extensive configuration options, and the formatter function, to customize this label in a wide variety of ways, making it more like the standard tooltip
Example of a highly customized version of the dataLabel:
Code:
plotOptions: {
series: {
dataLabels: {
enabled: true,
inside: false,
overflow: 'none',
crop: true,
shape: 'callout',
backgroundColor:'rgba(0,0,0,0.8)',
borderColor: 'rgba(0,0,0,0.9)',
color: 'rgba(255,255,255,0.75)',
borderWidth: .5,
borderRadius: 5,
y: -10,
style: {
fontFamily: 'Helvetica, sans-serif',
fontSize: '10px',
fontWeight: 'normal',
textShadow: 'none'
},
formatter: function() {
return '<strong>'+this.series.name+'</strong>'
+'<br/>Group: <strong>'+ this.x+'</strong>'
+'<br/>Value: <strong>'+ Highcharts.numberFormat(this.y,0)+'</strong>';
}
}
}
},
Fiddle:
http://jsfiddle.net/jlbriggs/5t50dLow/
Output:
[{ EDIT --
And, since having big labels like this can be distracting when what you really want to do is just see the data plotted, here's a version with a button to toggle the visibility of the labels:
Fiddle:
http://jsfiddle.net/jlbriggs/5t50dLow/4/
Code:
<button id="toggle">Toggle Data Labels</button>
$('#toggle').click(function() {
var enabled = chart.series[0].options.dataLabels.enabled;
console.log(enabled);
chart.series[0].update({ dataLabels: { enabled: !enabled }});
});
-- /EDIT }]
Hopefully This Fiddle answers your question.
The effect you want was achieved by using the plotOptionsAPI link here directive in highcharts.
$(document).ready(function() {
var chart_data;
chart_data = {
chart: {
type: 'column',
backgroundColor: '#FBFBFB',
plotBackgroundColor: '#FBFBFB'
},
title: {
text: '<b>Category-Wise APF</b>',
verticalAlign: 'bottom',
useHTML: true,
style: {
color: '#454545',
fontSize: '14px'
},
y: 13
},
xAxis: {
type: 'category'
},
yAxis: {
labels: {
enabled: false
},
title: '',
gridLineColor: '#EFEFEF'
},
credits: {
enabled: false
},
legend: {
enabled: false
},
plotOptions: {
series: {
dataLabels: {
align: 'left',
enabled: true
}
}
},
series: [{
colorByPoint: true,
data: [{
name: 'Sports & Fitness',
y: 1.34,
color: '#2E91A4'
}, {
name: 'Fashion Apparels',
y: 1.29,
color: '#3196A5'
}, {
name: 'Women\'s Clothing',
y: 1.24,
color: '#2F9BA6'
}, {
name: 'Footwear',
y: 1.23,
color: '#319FA7'
}, {
name: 'Clothing & Apparels',
y: 1.21,
color: '#34A3A8'
}, {
name: 'Audio Equipments',
y: 1.20,
color: '#36A3A8'
}, {
name: 'Home Decor',
y: 1.13,
color: '#38ADAA'
}, {
name: 'Health & Personal Care',
y: 1.12,
color: '#38B1AB'
}, {
name: 'Mobile Accessories',
y: 1.12,
color: '#39B7AB'
}, {
name: 'Computer Accessories',
y: 1.11,
color: '#3DBBAD'
}]
}]
};
$('#categorywise-apf-graph').highcharts(chart_data);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/highcharts-3d.js"></script>
<div style="width: 500px; height: 500px;" id="categorywise-apf-graph"></div>
I am using High-charts to show pie charts, can any one tell me how can I remove this white border around the radius. My code is given below also the screen shot image of chart.
I have no lot of experience with high-charts if anyone know this please help me. The documentation is also very tough to read and understand
$(function () {
$('#cashflow_graph').highcharts({
chart: {
type: 'pie',
backgroundColor:'red',
},
title: {
text: false
},
yAxis: {
title: {
text: false
}
},
plotOptions: {
pie: {
dataLabels: {
enabled: false
},
shadow: false,
center: ['50%', '50%']
},
series: {
states: {
hover: {
enabled: false,
halo: {
size: 0
}
}
}
},
},
credits: {
enabled: false
},
tooltip: {
enabled: false,
valueSuffix: '%'
},
series: [{
name: 'Cash Flow',
data: [
{
name: 'Incoming',
y: 40,
color: '#87b22e'
},
{
name: 'Outgoing',
y: 30,
color: 'black'
},
{
name: '',
y: 30,
color: 'white'
}
],
size: '80%',
innerSize: '80%',
dataLabels: {
enabled: false,
formatter: function () {
return false;
}
}
}]
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highcharts/4.1.5/highcharts.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highcharts/4.1.5/highcharts-more.src.js"></script>
<div id="cashflow_graph" style="height: 300px; width:100%;"></div>
You need to set the plotOptions.pie.borderWidth property to 0:
$(function() {
$('#cashflow_graph').highcharts({
chart: {
type: 'pie',
backgroundColor: 'red',
},
title: {
text: false
},
yAxis: {
title: {
text: false
}
},
plotOptions: {
pie: {
dataLabels: {
enabled: false
},
shadow: false,
center: ['50%', '50%'],
borderWidth: 0 // < set this option
},
series: {
states: {
hover: {
enabled: false,
halo: {
size: 0
}
}
}
},
},
credits: {
enabled: false
},
tooltip: {
enabled: false,
valueSuffix: '%'
},
series: [{
name: 'Cash Flow',
data: [{
name: 'Incoming',
y: 40,
color: '#87b22e'
}, {
name: 'Outgoing',
y: 30,
color: 'black'
}, {
name: '',
y: 30,
color: 'white'
}
],
size: '80%',
innerSize: '80%',
dataLabels: {
enabled: false,
formatter: function() {
return false;
}
}
}]
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highcharts/4.1.5/highcharts.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highcharts/4.1.5/highcharts-more.src.js"></script>
<div id="cashflow_graph" style="height: 300px; width:100%;"></div>
I'm creating a bar chart using high charts. Here is a sample: http://jsfiddle.net/anishantha87/kfg5c/3/
$(function () {
$('#container').highcharts({
chart: {
type: 'bar'
},
title: {
text: 'Historic World Population by Region'
},
subtitle: {
text: 'Source: Wikipedia.org'
},
xAxis: {
categories: ['Europe', 'Oceania','France'],
title: {
text: null
}
},
yAxis: {
min: 0,
title: {
text: 'Population (millions)',
align: 'high'
},
labels: {
overflow: 'justify'
}
},
tooltip: {
valueSuffix: ' millions'
},
plotOptions: {
bar: {
dataLabels: {
enabled: true
}
},
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -40,
y: 100,
floating: true,
borderWidth: 1,
backgroundColor: '#FFFFFF',
shadow: true
},
credits: {
enabled: false
},
series: [{
name: 'Year 1800',
data: [ 203, 200,200]
}, {
name: 'Year 1900',
data: [ 408, 60,null]
}, {
name: 'Year 2008',
data: [ 732, 34,null]
}]
});
});
In that I have null value for France. It displays the bar down below the France.(not vertically aligned with the Y axis name)
Any suggestions pls?
i made a bar stacked chart using highcharts and i want the legend to be on top, i used the attribute verticalAlign with the value top but it didn't work !
here is my jsfiddle http://jsfiddle.net/rchod/sbtt6/
$(function () {
$('#container').highcharts({
chart: {
type: 'bar'
},
legend: {
align: 'right',
verticalAlign: 'top',
x: 0,
y: 100
},
credits: {
enabled: false
},
title: {
text: ''
},
xAxis: {
labels: {
enabled: false
},
categories: ['']
},
yAxis: {
labels: {
enabled: true
},
min: 0,
title: {
text: ''
}
},
legend: {
backgroundColor: '#FFFFFF',
reversed: true
},
tooltip: {
enabled: false
},
plotOptions: {
series: {
minPointLength: 3,
dataLabels: {
color: 'white',
align: 'center',
enabled: true,
format: '{y} %'
},
stacking: 'percent'
},
bar: {
events: {
legendItemClick: function () {
vote(1,this.userOptions.id);
return false;
}
}
,
showInLegend: true
}
},
series: [
{
name: 'yes',
data: [{ y : 73.91, id : '1' }],
id: '1'
},
{
name: 'no',
data: [{ y : 26.09, id : '2' }],
id: '2'
},
]
});
});
You have the legend property twice in your options. The 2nd one is overriding the first. Put them together:
legend: {
backgroundColor: '#FFFFFF',
reversed: true,
align: 'right',
verticalAlign: 'top',
x: 0,
y: 100
},
Updated fiddle.
Kindly take a look at following fiddle in which i tried to remove the categories but on removing categories its placing numbers instead of it by default and also showing those numbers in tooltip.
All I am trying to do is that categories or numbers doesnot display on chart or on tooltip and only stackedbar appears on the chart , So kindly let me know how can i do it .Thanks,
http://jsfiddle.net/EJFsH/3/
$(function () {
var data = [ {
name: 'Year 2008',
data: [0, 914, 4054, 732, 34]
}];
data = $.grep(data, function (category) {
return $.grep(category.data, function (item) {
return item > 0;
}).length > 0;
});
$('#container').highcharts({
chart: {
type: 'bar'
},
title: {
text: 'Historic World Population by Region'
},
subtitle: {
text: 'Source: Wikipedia.org'
},
xAxis: {
title: {
text: null
}
},
yAxis: {
min: 0,
title: {
text: 'Population (millions)',
align: 'high'
},
labels: {
overflow: 'justify'
}
},
tooltip: {
valueSuffix: ' millions'
},
plotOptions: {
bar: {
dataLabels: {
enabled: true
}
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -100,
y: 100,
floating: true,
borderWidth: 1,
backgroundColor: '#FFFFFF',
shadow: true
},
credits: {
enabled: false
},
series: data
});
});
I'm not 100% sure of what you are asking for. But, to turn off the XAxis or yAxis labels, juse labels : {enabled:false} and to change the tooltips use tooltip:{formatter: function() {...}}
see this fiddle:
http://jsfiddle.net/6ypq4/
xAxis: {
title: {
text: null
},
labels : {
enabled: false
}
},
yAxis: {
min: 0,
title: {
text: 'Population (millions)',
align: 'high'
},
labels: {
overflow: 'justify',
enabled: false
}
},
tooltip: {
formatter: function() {
return this.y + ' millions';
}
},