Develop Reference

echart data point gradient color

I am trying to make a gradient line chart, The issue is with tooltip legend color and color of data points, they appear in brown gradient which was the default.
I was able to change the tooltip color, anyhow that is not the actual data point color but able to fix it to one color at least. whereas the points on the line do not pick up the color of the line.
Can someone point me in right direction?
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {};
var option;
var data = [["2020-06-05",116],["2020-06-06",129],["2020-06-07",135],["2020-06-08",86],["2020-06-09",73],["2020-06-10",85],["2020-06-11",73],["2020-06-12",68],["2020-06-13",92],["2020-06-14",130],["2020-06-15",245],["2020-06-16",139],["2020-06-17",115],["2020-06-18",111],["2020-06-19",309],["2020-06-20",206],["2020-06-21",137],["2020-06-22",128],["2020-06-23",85],["2020-06-24",94],["2020-06-25",71],["2020-06-26",106],["2020-06-27",84],["2020-06-28",93],["2020-06-29",85],["2020-06-30",73],["2020-07-01",83],["2020-07-02",125],["2020-07-03",107],["2020-07-04",82],["2020-07-05",44],["2020-07-06",72],["2020-07-07",106],["2020-07-08",107],["2020-07-09",66],["2020-07-10",91],["2020-07-11",92],["2020-07-12",113],["2020-07-13",107],["2020-07-14",131],["2020-07-15",111],["2020-07-16",64],["2020-07-17",69],["2020-07-18",88],["2020-07-19",77],["2020-07-20",83],["2020-07-21",111],["2020-07-22",57],["2020-07-23",55],["2020-07-24",60]];
var dateList = data.map(function (item) {
return item[0];
});
var valueList = data.map(function (item) {
return item[1];
});
option = {
color: {
type: 'linear',
x: 0, y: 1,x2:0,y2:0,
colorStops: [{
offset: 0, color: '#00d4ff' // color at 0% position
}, {
offset: 1, color: '#090979' // color at 100% position
}],
global:true
},
// Make gradient line here
visualMap: [{
show: true,
type: 'continuous',
seriesIndex: 0,
min: 0,
max: 400
}],
title: [{
left: 'center',
text: 'Gradient along the y axis'
}],
xAxis: [{
data: dateList,
axisPointer: {
label:{
color:['#5470c6'],
}
},
axisLabel: {
formatter: function (value) {
return moment(value).format("MMM YY");
// And other formatter tool (e.g. moment) can be used here.
}
}
}],
yAxis: [{
type: 'value',
axisPointer: {
label:{
color:['#5470c6'],
}
}
}],
grid: [{
width:'auto',
height:'auto'
}],
tooltip : {
trigger: 'axis',
axisPointer: {
animation: true,
},
formatter: function (params) {
var colorSpan = color => '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:' + color + '"></span>';
let rez = '<p>' + params[0].axisValue + '</p>';
console.log(params); //quite useful for debug
params.forEach(item => {
// console.log(item); //quite useful for debug
var xx = '<p>' + colorSpan('#00d4ff') + ' ' + item.seriesName + ': ' + item.data + '</p>'
rez += xx;
});
console.log(rez);
return rez;
}
},
series: [{
color:['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc'],
type: 'line',
showSymbol: false,
data: valueList,
// smooth: true,
label:{
show:true,
position:'top'
},
lineStyle:{
color: {
type: 'linear',
x: 0, y: 1,x2:0,y2:0,
colorStops: [{
offset: 0, color: '#00d4ff' // color at 0% position
}, {
offset: 1, color: '#090979' // color at 100% position
}],
global:false
}
}
}]
};
console.log(myChart);
if (option && typeof option === 'object') {
myChart.setOption(option);
}

You need to add gradientColor array to echarts options. Now echart will take care of changing color of tooltip and data point. You can also remove your custom tooltip formatted function.
gradientColor: ["#00d4ff", "#090979"]
Here the complete options object:
var data = [];
var dateList = data.map(function(item) {
return item[0];
});
var valueList = data.map(function(item) {
return item[1];
});
option = {
gradientColor: ["#00d4ff", "#090979"],
// Make gradient line here
visualMap: [
{
show: true,
type: "continuous",
seriesIndex: 0,
min: 0,
max: 400
}
],
title: [
{
left: "center",
text: "Gradient along the y axis"
}
],
xAxis: [
{
data: dateList,
axisPointer: {
label: {
color: ["#5470c6"]
}
},
axisLabel: {
formatter: function(value) {
return moment(value).format("MMM YY");
// And other formatter tool (e.g. moment) can be used here.
}
}
}
],
yAxis: [
{
type: "value",
axisPointer: {
label: {
color: ["#5470c6"]
}
}
}
],
grid: [
{
width: "auto",
height: "auto"
}
],
tooltip: {
trigger: "axis",
axisPointer: {
animation: true
}
},
series: [
{
type: "line",
showSymbol: false,
data: valueList,
// smooth: true,
label: {
show: true,
position: "top"
}
}
]
};

ArcGIS: h {name: "esri.layers.graphics.QueryEngine", message: "Unsupported query", details: undefined} when load data with api request

I'm facing issue with Feature layer. When plot map with local data. But when I'm using hosted data in feature layer then Drawing feature is working fine and query on drawing data is also working perfectly.
But when I'm using my local system data using api request then draw objects on map is working fine but query filtering is not working on feature layer data. Below is the example code.
<link rel="stylesheet" href="https://js.arcgis.com/4.8/esri/css/main.css">
<style>
#viewDiv {
height: 100%;
}
.popUpMapView {
height: 400px;
border: 1px solid #A8A8A8;
}
#drawActions {
padding: 0 5px;
background: #eee;
border-left: 1px solid #999;
border-right: 1px solid #999;
}
#drawActions ul {
list-style-type: none;
margin: 0;
padding: 0;
}
#drawActions ul li {
display: inline-block;
}
#drawActions ul li .esri-widget--button {
background: #eee;
}
#drawActions ul li .esri-widget--button:hover {
background: #fff;
}
.esri-ui-top-left .esri-component {
margin-bottom: 0;
border-top: solid 1px rgba(50,50,50,0.25);
}
.esri-popup.esri-widget {
max-height: 100%;
}
.esri-view-width-xlarge .esri-popup__main-container {
width: 580px;
}
.esri-view-height-less-than-medium .esri-popup__main-container {
max-height: 500px;
}
.esri-view-height-small .esri-ui-corner .esri-component .esri-expand__content,
.esri-view-width-greater-than-xsmall .esri-expand--auto .esri-expand__content {
margin-left: 0;
white-space: nowrap;
}
.esri-widget--button {
outline: 0;
}
.esri-legend__layer-body {
display: table;
width: 100%;
margin: 0;
}
.color-selection-item-container {
cursor: pointer;
}
.item-selected .color-selection-item-container {
opacity: 0.5;
}
.item-selected .color-selection-item-container.active {
opacity: 1;
}
.item-selected .color-selection-item-container.active .esri-legend__layer-cell--info {
color: #000;
}
</style>
<script>
var dojoConfig = {
has: {
"esri-featurelayer-webgl": 1
}
}
</script>
<script src="https://js.arcgis.com/4.8/"></script>
<script>
let highlight;
let highlightFields = [];
let povLayer;
let plantTypeFilterObj = [];
require([
"esri/Map",
"esri/views/MapView",
"esri/WebMap",
"esri/widgets/Sketch/SketchViewModel",
"esri/Graphic",
"esri/layers/GraphicsLayer",
"esri/layers/FeatureLayer",
"esri/widgets/Home",
"esri/widgets/Legend",
"esri/widgets/Expand",
"esri/geometry/Point",
"esri/config",
"esri/request",
"dojo/domReady!"
], function(
Map, MapView, WebMap, SketchViewModel, Graphic, GraphicsLayer, FeatureLayer, Home, Legend, Expand, Point, erisConfig, Request
) {
const tempGraphicsLayer = new GraphicsLayer();
var map = new Map({
basemap: "dark-gray",
layers: [tempGraphicsLayer]
});
const view = new MapView({
map: map,
container: "viewDiv",
center: [-91.891111, 42.477778],
zoom: 4,
highlightOptions: {
color: "black",
haloOpacity: 0,
fillOpacity: 0.45
},
});
let highlightHandle = null;
view.when(function() {
getData()
.then(createGraphics)
.then(createLayer)
.catch(errback);
});
function getData() {
let url = "http://localhost/arcgis/points-listing";
return Request(url, {
responseType: "json"
});
}
function createGraphics(response) {
let items = response.data.data;
let geojson = items.map(function(item, i) {
return {
geometry: new Point({
x: item.lng,
y: item.lat
}),
attributes: {
ObjectID: item.plant_id,
name: item.name,
address: item.street_address,
city: item.city,
state_code: item.state_code,
zip: item.zip,
county: item.county,
lng: item.lng,
lat: item.lat,
nameplate_capacity: item.nameplate_capacity,
plant_type: item.plant_type
}
};
});
return geojson;
}
function createLayer(graphics) {
let layer = new FeatureLayer({
source: graphics,
fields: getFields(),
objectIdField: "ObjectID",
renderer: getRender(),
geometryType: "point",
popupTemplate: getTemplate(),
elevationInfo: {
mode: "on-the-ground"
}
});
var legend = new Legend({
view: view,
layerInfos: [{
layer: layer,
title: "Plants detail"
}]
});
view.ui.add(legend, "top-right");
map.add(layer);
view.whenLayerView(layer).then(function(layerView) {
sketchGraphics(layerView);
setTimeout(function() {
hideShowPointsOnPlantTypeBasis();
colorSelectionClick();
}, 1000);
});
return layer;
}
function hideShowPointsOnPlantTypeBasis()
{
let legendContainer = document.getElementsByClassName("esri-legend__layer-table--size-ramp")[0];
legendContainer.className += " color-section";
let legendInfoItem = legendContainer.getElementsByClassName("esri-legend__layer-cell--info");
for (let i = 0; i < legendInfoItem.length; i++) {
let element = legendInfoItem[i];
let text = element.innerHTML;
let value = (text.toUpperCase()).replace(" ", "_");
checkbox = document.createElement("input");
checkbox.setAttribute("type", "checkbox");
checkbox.setAttribute("class", "plant-type-filtering-checkbox");
checkbox.setAttribute("style", "display:none;");
checkbox.setAttribute("value", value);
element.parentNode.classList.add("color-selection-item-container");
element.parentNode.insertBefore(checkbox, element.parentNode.firstChild);
}
}
function colorSelectionClick() {
$('.esri-expand__content').on('click', '.color-selection-item-container', function(e) {
e.preventDefault();
let $this = $(this);
let $input = $this.find('input.plant-type-filtering-checkbox');
let selectedVal = $input.val();
if(!$input.is(':checked')) {
plantTypeFilterObj.push(selectedVal);
$input.prop('checked', true);
$this.addClass('active');
} else {
$this.removeClass('active');
plantTypeFilterObj = plantTypeFilterObj.filter(function(value, index, arr){
return value != selectedVal;
});
$input.prop('checked', false);
}
let layerViews = view.layerViews;
if(plantTypeFilterObj.length > 0) {
viewLayer.layer.definitionExpression = "nameplate_capacity > 0 AND plant_type IN ('" + plantTypeFilterObj.join("','") + "')";
} else {
viewLayer.layer.definitionExpression = '';
}
let selectedCount = $('.esri-expand__content').find('.color-selection-item-container.active').length;
if(selectedCount > 0) {
$('.esri-expand__content').addClass('item-selected');
} else {
$('.esri-expand__content').removeClass('item-selected');
}
});
}
function sketchGraphics(layer) {
viewLayer = layer;
// create a new sketch view model
const sketchViewModel = new SketchViewModel({
view: view,
layer: tempGraphicsLayer,
pointSymbol: {
type: "simple-marker", // autocasts as new SimpleMarkerSymbol()
style: "square",
size: "16px"
}
});
setUpClickHandler(view);
sketchViewModel.on("create", createGraphic);
sketchViewModel.on("create-complete", addGraphic);
// Listen the sketchViewModel's update-complete and update-cancel events
sketchViewModel.on("update-complete", updateGraphic);
sketchViewModel.on("update-cancel", updateGraphic);
var drawCircleButton = document.getElementById("circleButton");
var drawRectangleButton = document.getElementById("rectangleButton");
var drawPolygonButton = document.getElementById("polygonButton");
drawCircleButton.onclick = function() {
resetSketchView();
sketchViewModel.create("circle");
setActiveButton(this);
};
drawRectangleButton.onclick = function() {
resetSketchView();
sketchViewModel.create("rectangle");
setActiveButton(this);
};
drawPolygonButton.onclick = function() {
resetSketchView();
sketchViewModel.create("polygon");
setActiveButton(this);
};
view.on('click', function(event) {
resetSketchView();
});
// reset all the changes from map on btn click.
document.getElementById("resetBtn").onclick = function() {
resetSketchView();
};
function addGraphic(event) {
const graphic = new Graphic({
geometry: event.geometry,
symbol: sketchViewModel.graphic.symbol
});
tempGraphicsLayer.add(graphic);
selectFeatures(event.geometry);
}
function createGraphic(event) {
resetHideShowPoints();
}
function updateGraphic(event) {
event.graphic.geometry = event.geometry;
tempGraphicsLayer.add(event.graphic);
editGraphic = null;
}
function setActiveButton(selectedButton) {
view.focus();
var elements = document.getElementsByClassName("active");
for (var i = 0; i < elements.length; i++) {
elements[i].classList.remove("active");
}
if (selectedButton) {
selectedButton.classList.add("active");
}
}
function resetSketchView() {
sketchViewModel.reset();
tempGraphicsLayer.removeAll();
// remove existing highlighted features
if (highlight) {
highlight.remove();
}
}
}
function selectFeatures(geometry) {
view.graphics.removeAll();
if (viewLayer) {
let query = {};
query.returnGeometry = true;
query.outFields = ["*"];
viewLayer.queryFeatures(query).then(function(results) {
const graphics = results.features;
if (graphics.length > 0) {
// remove existing highlighted features
if (highlight) {
highlight.remove();
}
highlight = viewLayer.highlight(graphics);
}
})
.catch(errback);
}
}
function removeUnSelectedPoints(viewLayer, graphics)
{
graphics.forEach(item => {
highlightFields.push(item.attributes.FID);
});
setTimeout(function() {
viewLayer.layer.definitionExpression = "FID IN (" + highlightFields.join(",") + ")";
}, 1000);
}
function resetHideShowPoints() {
if(highlightFields.length > 0) {
highlightFields = [];
viewLayer.layer.definitionExpression = "";
console.log('reset', highlightFields);
}
}
function errback(error) {
console.error(error);
}
function setUpClickHandler(mapview) {
mapview.on("click", function(event) {
event.stopPropagation();
streetView(view, event)
mapview.hitTest(event).then(function(response) {
var results = response.results;
});
});
}
function streetView(mainMapView, event) {
// Make sure that there is a valid latitude/longitude
if (event && event.mapPoint) {
// Create lat/lon vars to display in popup title
var lat = Math.round(event.mapPoint.latitude * 1000) / 1000;
var lon = Math.round(event.mapPoint.longitude * 1000) / 1000;
mainMapView.popup.open({
// Set the popup's title to the coordinates of the location
title: "Map view coordinates: [" + lon + ", " + lat + "]",
location: event.mapPoint, // Set the location of the popup to the clicked location
content: innerMapPopUp(
mainMapView,
mainMapView.center,
mainMapView.scale
)
});
} else {
mainMapView.popup.open({
// Set the popup's title to the coordinates of the location
title: "Invalid point location",
location: event.mapPoint, // Set the location of the popup to the clicked location
content: "Please click on a valid location."
});
}
}
function innerMapPopUp(mainMapView, center, scale) {
var popupDiv = document.createElement("div");
popupDiv.classList.add("popUpMapView");
var popupView = new MapView({
container: popupDiv,
map: new Map({
basemap: "topo"
}),
center: center,
zoom: 8,
ui: {
components: []
}
});
console.log(popupView);
// Return a dom node
return popupView.container;
}
function getFields() {
var fields = [
{
name: "ObjectID",
alias: "ObjectID",
type: "oid"
}, {
name: "name",
alias: "name",
type: "string"
}, {
name: "address",
alias: "address",
type: "string"
}, {
name: "city",
alias: "city",
type: "string"
}, {
name: "state_code",
alias: "state_code",
type: "string"
}, {
name: "zip",
alias: "zip",
type: "string"
}, {
name: "county",
alias: "county",
type: "string"
}, {
name: "plant_type",
alias: "plant_type",
type: "string"
}, {
name: "nameplate_capacity",
alias: "nameplate_capacity",
type: "double"
}
];
return fields;
}
function getTemplate() {
// Set up popup template for the layer
var pTemplate = {
title: "{name}",
content: [{
type: "fields",
fieldInfos: [
{
fieldName: "street_address",
label: "Address",
visible: true
},
{
fieldName: "city",
label: "City",
visible: true
},
{
fieldName: "state_code",
label: "State Code",
visible: true
},
{
fieldName: "zip",
label: "Zip",
visible: true
},
{
fieldName: "county",
label: "County",
visible: true
},
{
fieldName: "plant_type",
label: "Plant Type",
visible: true
},
{
fieldName: "latitude",
label: "Latitude",
visible: true
},
{
fieldName: "longitude",
label: "Longitude",
visible: true
},
{
fieldName: "nameplate_capacity",
label: "Capacity (MW)",
visible: true
}
]
}]
};
return pTemplate;
}
function getRender() {
var renderer = {
type: "unique-value", // autocasts as new SimpleRenderer()
// Define a default marker symbol with a small outline
symbol: {
type: "simple-marker", // autocasts as new SimpleMarkerSymbol()
color: "#FFD733"
},
defaultLabel: "Other",
field: "plant_type",
label: "Plant Type",
uniqueValueInfos: [
{
value: "HYDRO",
symbol: {
type: "simple-marker",
color: "hsla(345,80%, 65%, 1)"
},
label: "Hydro"
},
{
value: "NATURAL_GAS",
symbol: {
type: "simple-marker",
color: "hsla(213,80%, 65%, 1)"
},
label: "Natural Gas"
},
{
value: "BIOMASS",
symbol: {
type: "simple-marker",
color: "hsla(195,80%, 65%, 1)"
},
label: "Biomass"
},
{
value: "COAL",
symbol: {
type: "simple-marker",
color: "hsla(336,80%, 65%, 1)"
},
label: "Coal"
},
{
value: "NUCLEAR",
symbol: {
type: "simple-marker",
color: "hsla(224,80%, 65%, 1)"
},
label: "Nuclear"
},
{
value: "PETROLIUM",
symbol: {
type: "simple-marker",
color: "hsla(264,80%, 65%, 1)"
},
label: "Petrolium"
},
{
value: "SOLAR",
symbol: {
type: "simple-marker",
color: "hsla(287,80%, 65%, 1)"
},
label: "Solar"
},
{
value: "WIND",
symbol: {
type: "simple-marker",
color: "hsla(344,80%, 65%, 1)"
},
label: "Wind"
}
],
visualVariables: [
{
type: "size",
field: "nameplate_capacity",
valueUnit: "unknown",
legendOptions: {
title: "Nameplate Capacity (MW)"
},
stops: [
{
value: 500,
size: 10,
label: "<500"
},
{
value: 2000,
size: 15,
label: "1000"
},
{
value: 3000,
size: 20,
label: "4000"
},
{
value: 5000,
size: 35,
label: "< 10000"
}]
}
]
};
return renderer;
}
// Set up a home button for resetting the viewpoint to the intial extent
var homeBtn = new Home({
view: view
}, "homeDiv");
// Instructions expand widget
const drawIcons = document.getElementById("drawActions");
instructionsExpand = new Expand({
expandIconClass: "esri-icon-expand",
expandTooltip: "Draw Actions",
expanded: false,
view: view,
iconNumber: 4,
content: drawIcons
});
view.ui.add(homeBtn, "top-left");
view.ui.add(instructionsExpand, "top-left");
// hide the instructions expand widget when the view becomes focused
view.watch("focused", function(newValue, oldValue, property, object) {
if (newValue) {
instructionsExpand.expanded = false;
}
});
});
</script>
And below is the screen-shot what issue I'm getting.
I spend my too much time to research on that. But unfortunately I'm not finding any way how to resolve this issue.
Please give a clue what I'm missing.

It looks like you are not setting up the query correctly. You have:
let query = {};
query.returnGeometry = true;
query.outFields = ["*"];
viewLayer.queryFeatures(query)
You need to use the featureLayer's createQuery method to create a query object:
let query = layer.createQuery();
query.returnGeometry = true;
query.outFields = ["*"];
viewLayer.queryFeatures(query)
Also, WebGL rendering is only supported for layers hosted on ArcGIS Online, or on ArcGIS Server 10.6.1 so highlight and other functionality will not work on layers that do not meet these requirements.

how to drag jqxscheduler outside the calendar

I am using jqxscheduler. I want to enable the dragging of event to whole window
below give code I am using to initialize the calendar what I need to add move to make the event boxes drag-able outside the calendar
$("#scheduler").jqxScheduler({
date: new $.jqx.date(2017, 11, 23),
width: "100%",
height: "100%",
source: adapter,
renderAppointment: function(data) {
set();
var img = "<img style='top: 2px; height: 17px; position: relative;' src='" + data.appointment.location + "'/>";
if (data.view == "weekView" || data.view == "dayView" || data.view == "monthView") {
data.style = data.appointment.desc;
data.style = data.appointment.description;
data.html = img + "<i>" + data.appointment.subject + "</i>";
/*
if (data.appointment.id == "id1") {
data.style = "#AA4643";
}
else if (data.appointment.id == "id2" || data.appointment.id == "id6") {
data.style = "#309B46";
}
else if (data.appointment.id == "id3") {
data.style = "#447F6E";
}*/
}
return data;
},
ready: function() {
$("#scheduler").jqxScheduler('ensureAppointmentVisible', 'id-11');
},
appointmentDataFields: {
from: "start",
to: "end",
id: "id",
description: "description",
location: "location",
subject: "subject",
style: "style",
color: "color",
background: "background",
borderColor: "borderColor"
},
view: 'weekView',
appointmentsMinHeight: 20,
width: '100%',
height: '100%',
views: [{
type: "dayView",
showWeekends: false,
timeRuler: {
scale: "quarterHour"
}
},
{
type: "weekView",
showWeekends: false,
timeRuler: {
scale: "quarterHour"
}
},
{
type: "monthView",
showWeekends: false,
timeRuler: {
scale: "quarterHour"
}
},
]
});
Please check the output of above defined code

getKendoChart() is showing as undefiend in javascript

I am forming the kendo char chart in the below way. In javascript getKendoChart is coming as undefined. Could you please check and let me know how to resolve this.
var rdChartBy = '#Model.paretoFilters.ReportBy';
if(rdChartBy == 'Project Submitted')
$("#rbnprojSub").prop("checked", true);
if(rdChartBy == 'FA Completed')
$("#rbnprojComp").prop("checked", true);
var paretoData = #Html.Raw(Json.Encode(#Model.paretoChartData));
var dsParetoData = new kendo.data.DataSource({
data: paretoData
});
$("#ParetoChart").kendoChart({
title: {
text: "Pareto Chart Report",
font: "bold 20px Arial,Helvetica,sans-serif",
color: "brown"
},
dataSource: dsParetoData,
series: [{
type: "column",
categoryField: "Month",
name : "No.Of Projects",
field:"No_Of_Projects"
},{
type:"line",
categoryField:"Month",
style: "rigid",
name:"Cumilative%",
field:"Cumulative"
}],
valueAxis: {
title: {
text: "No.OfProjects/Cumilative%",
font: "bold 15px Arial,Helvetica,sans-serif",
color: "brown"
}
},
chartArea: {
width: 850,
height: 400
},
categoryAxis:{
title: {
text: "Month",
font: "bold 18px Arial,Helvetica,sans-serif",
color: "brown"
},
labels: { rotation: -45 },
width:50
},
tooltip: {
visible: true,
template: "${series.name} : ${value}"
}
});
function exportChart(e)
{
debugger;
var chart = $("#ParetoChart").getKendoChart();
chart.exportImage().done(function (data) {
kendo.saveAs({
dataURI: data,
fileName: "chart.png",
proxyURL: "#Url.Action("Export_Save", "Chart_Api")"
});
});

Try replacing
var chart = $("#ParetoChart").getKendoChart();
with
var chart = $("#ParetoChart").data("kendoChart");

apply new theme without reloading the charts in highcharts

Can I apply theme without reloading the whole chart. Can I push the themes settings within the chart code? In highcharts site all examples are single theme based. Here is my code
$(function() {
$.getJSON('http://api-sandbox.oanda.com/v1/candles?instrument=EUR_USD&candleFormat=midpoint&granularity=W', function(data) {
// create the chart
var onadata =[];
var yData=[];
var type='line';
var datalen=data.candles.length;
var all_points= [];
var all_str="";
for(var i=0; i<datalen;i++)
{
var each=[Date._parse(data.candles[i].time), data.candles[i].openMid, data.candles[i].highMid, data.candles[i].lowMid, data.candles[i].closeMid]
onadata.push(each);
yData.push(data.candles[i].closeMid);
}
$( "#change_theme" ).on("change", function() {
var optionSelected = $("option:selected", this);
var valueSelected = this.value;
//alert(valueSelected);
if(valueSelected=='default.js')
{
location.reload();
}
else{ $.getScript('js/themes/'+valueSelected, function() {
//alert('Load was performed.');
chart();
});
}
});
chart();
function chart()
{
$('#container').highcharts('StockChart', {
credits: {
enabled : 0
},
rangeSelector : {
buttons: [{
type: 'month',
count: 1,
text: '1M'
}, {
type: 'month',
count: 3,
text: '3M'
},{
type: 'month',
count: 6,
text: '6M'
},{
type: 'all',
text: 'All'
}],
selected:3
},
legend: {
enabled: true,
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
title : {
text : 'Stock Price'
},
xAxis :{
minRange : 3600000
},
yAxis : [{
offset: 0,
ordinal: false,
height:280,
labels: {
format: '{value:.5f}'
}
}],
chart: {
events: {
click: function(event) {
var x1=event.xAxis[0].value;
var x2 =this.xAxis[0].toPixels(x1);
var y1=event.yAxis[0].value;
var y2 =this.yAxis[0].toPixels(y1);
selected_point='['+x1+','+y1+']';
all_points.push(selected_point);
all_str=all_points.toString();
if(all_points.length>1)
{
this.addSeries({
type : 'line',
name : 'Trendline',
id: 'trend',
data: JSON.parse("[" + all_str + "]"),
color:'#'+(Math.random()*0xEEEEEE<<0).toString(16),
marker:{enabled:true}
});
}
if(all_points.length==2)
{
all_points=[];
}
}
}
},
series : [{
//allowPointSelect : true,
type : type,
name : 'Stock Price',
id: 'primary',
data : onadata,
tooltip: {
valueDecimals: 5,
crosshairs: true,
shared: true
},
dataGrouping : {
units : [
[
'hour',
[1, 2, 3, 4, 6, 8, 12]
], [
'day',
[1]
], [
'week',
[1]
], [
'month',
[1, 3, 6]
], [
'year',
[1]
]
]
}
},
]
});
}
});
});
and this is my js fiddle
Please help. Thanks in advance.

This is possible if you're using modern browsers that support CSS variables.
Highcharts.theme = {
colors: [
'var(--color1)',
'var(--color2)',
'var(--color3)',
'var(--color4)',
'var(--color5)',
'var(--color6)',
]
}
Highcharts.setOptions(Highcharts.theme);
function setTheme(themeName) {
// remove theme-* classes from body
removeClasses = Array.from(document.body.classList).filter(s => s.startsWith('theme-'));
document.body.classList.remove(...removeClasses)
if (themeName) {
document.body.classList.add('theme-' + themeName);
}
}
CSS
body {
--color1: #e00;
--color2: #b00;
--color3: #900;
--color4: #600;
--color5: #300;
--color6: #000;
}
body.theme-dark {
--color1: #555;
--color2: #444;
--color3: #333;
--color4: #222;
--color5: #111;
--color6: #000;
}
body.theme-retro {
--color1: #0f0;
--color2: #ff0;
--color3: #0ff;
--color4: #0a0;
--color5: #aa0;
--color6: #00a;
}

Unfortunately it is not possible, so you need to destroy and create new chart.