JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdn.zoomcharts-cloud.com/1/latest/zoomcharts.js"></script>

<div id="demo"></div>

JavaScript

var displayUnits = [
	{unit: "day",name:"Day"},
	{unit: "week",name:"Week"},
	{unit: "month",name:"Month"},
	{unit: "year",name:"year"},
];



var t = new TimeChart({
	container: document.getElementById("demo"),
	data: {
		units:["h"],
    url: "https://zoomcharts.com/dvsl/data/time-chart/temperature-kuldiga-h.json"
	},
	area:{
  	displayUnits:displayUnits
 	},
  toolbar: {
		items: [
    	{ item: "back", align: "left", onClick: backButtonClick},
      { item: "zoomOut", align: "left" },
     	{ item: "logScale", align: "right" },
      { item: "displayPeriod", align: "right"},
      { item: "displayUnit", align: "right", dropDownItems: [{"label": "ItemWontAppear", onClick: onDisplayUnitClick}] },
      { item: "export", align: "right",dropDownItems: [{"label": "Custom Item", onClick: function(){
      	alert("custom item clicked");
      }
      }] },
      { item: "fullscreen", align: "right" , onClick: fullScreenClick}
    ],
    extraItems: [
    {
    	label: "Custom DD",
      showLabel:true,
      align: "right",
      image: "https://zoomcharts.com/dvsl/data/gears.png",
      dropDownItems: [
      	{"label": "Custom Item", onClick: function(){
					alert("custom item clicked");
      	}
    	}
      ]
    }
    ],
    fullscreen: true
  }
});

function fullScreenClick() { 
	alert("Fullscreen button clicked");
}

function backButtonClick() {
	alert("Back button is clicked");
}

function onDisplayUnitClick() {
	//This will not be called
}