I have about 6 charts on one page, one of them needs to have a different theme from the other five. I have the themes working individually but the second one initialized is applied to all the charts.
Is there a way to specify which theme a chart uses?
After reading Ricardo's comment I realized I just had to move the setOptions() call inside the $(document).ready call.
A much simplified version of my code:
Highcharts.theme1 = {
chart: {
borderWidth: 0,
},
};
var chart;
$(document).ready(function() {
// Apply the theme
var highchartsOptions = Highcharts.setOptions(Highcharts.theme1);
// Build the chart
chart = new Highcharts.Chart({});
});
Highcharts.theme2 = {
chart: {
borderWidth: 5,
},
};
var chart2;
$(document).ready(function() {
// Apply the theme
var highchartsOptions = Highcharts.setOptions(Highcharts.theme2);
// Build the chart
chart = new Highcharts.Chart({});
});
Best practice currently would be to merge in the theme with your chart options:
chart1 = new Highcharts.Chart(Highcharts.merge(options1, theme1));
var options1 = {
// options goes here
chart: {
renderTo: 'chart1',
type: 'bar',
},
title: {
text: 'Conversions'
},
};
var theme1 = {
// themes goes here
};
var chart1 = new Highcharts.Chart(Highcharts.merge(options1, theme1));
this way you can set individual themes for each chart if you need too
Related
In my code, I am loading many files during navigation of chart but i want to include feathure like zoomType and hover and mousever on some specific files. For example, i am changing zoomType='x' of chart by reading sample.json file.
$(function() {
var chart;
var options = {
chart : {
type : 'polygon',
renderTo : 'container',
zoomType:''
},
title : {
text : ''
},
credits: {
enabled: false
},
$.getJSON('sample.json', function(data) {
options.series=data;
options.chart.zoomType='x'; /*including zoom feature only for sample.json file*/
var chart = new Highcharts.Chart(options);
});
But this code does not work. How can i fix this error?
See the working demo
I am setting 'x' for default series and zoomtype 'y' for next json data (when you click plus icon), see your previous code and demo at plunker link
$("#container").html("<div style='style:margin:0 auto'>Loading Data</div>") ;
$.getJSON('data10.json', function(data) {
options.series=data;
options.chart.zoomType='x';
chart = new Highcharts.Chart(options);
});
Trying to create a chart with 1 dashed line and solid lines. I've only ever created a chart in which all the lines were styled the same. I'm using the getJSON method any everything works well, however I would like to individually style one of the lines. I thought I would be able to add something to the empty series section within options - but I can't seem to get it to work.
$(document).ready(function() {
var options = {
chart: {
renderTo: 'container',
type: 'spline',
marginBottom: 100
},
xAxis: {
categories: [],
},
series: []
}
$.getJSON("php/mysqldata.php", function(json) {
options.xAxis.categories = json[0]['data'];
options.series[0] = json[1];
options.series[1] = json[2];
options.series[2] = json[3];
options.series[3] = json[4];
chart = new Highcharts.Chart(options);
});
});
Add style information in that way (for example for second serie).
options.series[1] = json[2];
options.series[1].dashstyle = 'Dash';
In highcharts initialization I've set array of only one color. I would like to change this with another array on charts's hover event. In other words chart is default monochromatic and after hover it becomes colorful.
config = {
colors: ["#C0C0C0"]
};
chart = $('#chart').highcharts(config).highcharts()
$('#chart').hover(function(){
chart.options.colors = ["#E84C3D", "#C1392B", '#D25400', "#E67F22", "#F39C11"]
}, function(){
chart.options.colors = ["#C0C0C0"]
});
Unfortunately it doesn't work. How should I do it?
You can set the plotOptions events:
plotOptions: {
column:{colorByPoint:true},
series: {
animation:false,
events: {
mouseOver: function(e) {
//console.log( chart.options);
var options = chart.options;
if(options.colors[0]!='#E84C3D')
{
options.colors=['#E84C3D','#C1392B','#D25400','#E67F22','#F39C11'];
chart = new Highcharts.Chart(options);
}
},
mouseOut: function(e) {
var options = chart.options;
if(options.colors[0]!='#C0C0C0')
{
options.colors=['#C0C0C0'];
chart = new Highcharts.Chart(options);
}
}
}
}
}
demo http://jsfiddle.net/eNMvw/134/
Instad of creating chart multiple time, better is using series.update() and apply colors per bars.
Highcharts upgraded their library to version 3. But in this version I can't capture the mouse's right click like before:
chart1 = new Highcharts.Chart({
chart: {
renderTo: 'container-chart-1',
zoomType: 'xy'
},
(...),
plotOptions: {
series: {
cursor: 'pointer',
point: {
events: {
click: function(e) {
alert('LEFT CLICK YEAH!');
},
contextmenu: function (e) {
alert('RIGHT CLICK NOT SO YEAH!');
}
}
}
}
}, (...)
I'm still on version 2 since I cannot make it to work.
Ideas and thoughts would be much appreciated?
It's interesting, I was sure that setting context menu in that way doesn't work since 1-2years. Now, possible way is to add custom events using Element.on(), for example:
for(var j in chart.series){
var series = chart.series[j];
for(var i in series.data){
(function(i){
var point = series.data[i];
if(point.graphic){
point.graphic.on('contextmenu', function(e){
// show your context menu
});
}
})(i)
}
}
I want to change the zoom-type from "x" to "xy" without creating new instance,
I want do do it like update() method they have..
located in myChart.options.chart.zoomType
You can do something like this:
var chart1 = new Highcharts.StockChart({
chart: {
zoomType: 'xy', //requried!
...
}
...
});
function SwitchToZoomX() {
chart1.pointer.zoomX = true;
chart1.pointer.zoomY = false;
chart1.pointer.zoomHor = true;
chart1.pointer.zoomVert = false;
}
function SwitchToZoomY() {
chart1.pointer.zoomY = true;
chart1.pointer.zoomX = false;
chart1.pointer.zoomVert = true;
chart1.pointer.zoomHor = false;
}
With Highcharts v5 you can now do this:
chart1.update({chart: {zoomType: "y"}})
The update function dynamically updates the chartoptions to imperitively change zoomType post render.
First Prepare a string for the chart to display
Clone Series To Redraw as highcharts set it null after draw.
var seriesClone=[{
name: 'USD to EUR',
data: [1,2,3,4,4,5,6,7,7,8,8,8,9,10,14]
}]
Series Options To SET
var chartOptions={
chart: {
renderTo:'container',
zoomType: 'xy'
},
rangeSelector: {
selected: 1
},
series: [{
name: 'USD to EUR',
data: [1,2,3,4,4,5,6,7,7,8,8,8,9,10,14]
}]
}
var chart = new Highcharts.StockChart(chartOptions);
And When you want to change the value of ZoomType redeclare the chart like this
chartOptions.chart.zoomType='y';
chartOptions.series=seriesClone;
myChart=new Highcharts.StockChart(chartOptions);
Working example JSFIDDLE