CODEWITHSUNDEEP
javascriptdynamichighcharts
Nisanth
Nisanth

Reputation: 333

How to add fill color in highcharts data series

I need to fill the color of data series dynamically based on the variable ( left , right , center ) from my code.

I have attached my code and expected output: 

$(document).ready(function() {
var left = [
  [4, 7],
  [9, 2]
];
var right = [
   [2, 2],
   [9, 9]
];

var center = [
        [4,5.5],
        [10,5.5] 
];

 Highcharts.chart('container', {
  chart: {
  events: {
   load: function () {
     const xAxis = this.xAxis[0]
     const yAxis = this.yAxis[0]

     const leftBottom = {
       x: xAxis.toPixels(right[0][0]),
       y: yAxis.toPixels(right[0][1])
     }

     const leftTop = {
       x: xAxis.toPixels(left[0][0]),
       y: yAxis.toPixels(left[0][1])
     }

     const rightBottom = {
       x: xAxis.toPixels(left[1][0]),
       y: yAxis.toPixels(left[1][1])
     }

     const rightTop = {
       x: xAxis.toPixels(right[1][0]),
       y: yAxis.toPixels(right[1][1])
     }

    const leftMiddle = {
       x: xAxis.toPixels(4),
       y: yAxis.toPixels(5.5)
     }

     const rightMiddle = {
       x: xAxis.toPixels(10),
       y: yAxis.toPixels(5.5)
     }

     const leftTopMiddle = {
       x: xAxis.toPixels(3.7),
       y: yAxis.toPixels(6.5)
     }

    const leftBottomMiddle = {
       x: xAxis.toPixels(2.1),
       y: yAxis.toPixels(4)
     }




     const rightTopMiddle = {
       x: xAxis.toPixels(9.8),
       y: yAxis.toPixels(8)
     }

     const rightBottomMiddle = {
       x: xAxis.toPixels(9.8),
       y: yAxis.toPixels(3)
     }





     const curveTopLeft = this.curveTopLeft = this.renderer.path().attr({
       d: `M ${leftMiddle.x} ${leftMiddle.y} Q ${leftTopMiddle.x} ${leftTopMiddle.y} ${leftTop.x} ${leftTop.y}`,
       'stroke-width': 2,
       stroke: 'red',
       zIndex: 99
     }).add()

       const curveBottomLeft = this.curveBottomLeft = this.renderer.path().attr({
      d: `M ${leftMiddle.x} ${leftMiddle.y} Q ${leftBottomMiddle.x} ${leftBottomMiddle.y} ${leftBottom.x} ${leftBottom.y}`,
       'stroke-width': 2,
       stroke: 'red',
       zIndex: 99
     }).add()


       const curveTopRight = this.curveTopRight = this.renderer.path().attr({
       d: `M ${rightMiddle.x} ${rightMiddle.y} Q ${rightTopMiddle.x} ${rightTopMiddle.y} ${rightTop.x} ${rightTop.y}`,
       'stroke-width': 2,
       stroke: 'red',
       zIndex: 99
     }).add()

       const curveBottomRight = this.curveBottomRight = this.renderer.path().attr({
      d: `M ${rightMiddle.x} ${rightMiddle.y} Q ${rightBottomMiddle.x} ${rightBottomMiddle.y} ${rightBottom.x} ${rightBottom.y}`,
       'stroke-width': 2,
       stroke: 'red',
       zIndex: 99
     }).add()


   }
 }
 },

  title: {
    text: ''
  },

   tooltip: {
     enabled: false
   },

   exporting: {
      enabled: false
   },

   credits: {
     enabled: false
   },


   plotOptions: {
     series: {
     pointStart: 1

   }
 },

  xAxis: {
   max: 10,
   min: 1,
   tickInterval: 1
 },

  yAxis: {
    max: 11,
    min: 0,
    tickInterval: 1,

  },
 series: [{
    showInLegend: false,
    data: left
 }, {
   showInLegend: false,
   data: right
 },
  {
 showInLegend: false,
      marker: {
               enabled: true
     },
     data: center
 }],
 });
 });

And my expected output should look like below,

enter image description here

Upvotes: 0

Views: 166

Answers (2)

morganfree
morganfree

Reputation: 12472

You need to create a new path with no stroke but fill. The new path should be combined from the points you already defined.

const d = `M ${leftBottom.x} ${leftBottom.y} 
           Q ${leftBottomMiddle.x} ${leftBottomMiddle.y} ${leftMiddle.x} ${leftMiddle.y} 
           Q ${leftTopMiddle.x} ${leftTopMiddle.y} ${leftTop.x} ${leftTop.y} 
           L ${rightBottom.x} ${rightBottom.y} 
           Q ${rightBottomMiddle.x} ${rightBottomMiddle.y} ${rightMiddle.x} ${rightMiddle.y} 
           Q ${rightTopMiddle.x} ${rightTopMiddle.y} ${rightTop.x} ${rightTop.y} 
           Z`

const fillPath = this.renderer.path().attr({
  d: d,
  'stroke-width': 0,
  fill: '#b19cd9',
  zIndex: 1
}).add()

example: http://jsfiddle.net/r0j46wn6/24/ fill

Upvotes: 2

David R
David R

Reputation: 15647

You can make use of the .css() method of your this.renderer.path() to set the fill style.

For example, Let's take the case of curveTopRight for what you can add that css as,

const curveTopRight = this.curveTopRight = this.renderer.path().css({
    color: '#c8bfe7',
    fill: '#c8bfe7'
 }).attr({
   d: `M ${rightMiddle.x} ${rightMiddle.y} Q ${rightTopMiddle.x} ${rightTopMiddle.y} ${rightTop.x} ${rightTop.y}`,
   'stroke-width': 2,
   stroke: 'red',
   zIndex: 99
 }).add()

However it is working only for the curved elements and not for the area's which are between the lines that you have drawn.

Here is a partially working example:

http://jsfiddle.net/r0j46wn6/23/

Hope this helps!

Upvotes: 0

Related Questions