CODEWITHSUNDEEP
javascriptjqueryhighcharts
RONE
RONE

Reputation: 5485

Apply outer border for the highchart area chart

I am implementing the area chart as shown in the mock up, but have strict at some portion and not able to get option s that are available in http://api.highcharts.com/highcharts for configuring the chart to look as is.

Here is the mock up look.

enter image description here

What I have achieved so far is :

Fiddle Demo

So I could not able to achieve the

1.background color

backgroundColor: {
                linearGradient: false,
                stops: [
                    [0, 'rgb(255, 255, 255)'],
                    [1, 'rgb(200, 200, 255)']
                ]
            },

2 . Only outer border line. (As shown in the mock up) enter image description here

3 . On Hover Show All 3 labels. (As shown in the mock up)

4 . Legend like "CPM IMPS SPEND BY TIME" with colors I mean I want to acheive same as in mock up.

enter image description here

Last Point to implement : enter image description here

Upvotes: 0

Views: 2091

Answers (1)

raskalbass
raskalbass

Reputation: 740

Well..

1.background color:

chart: {
   backgroundColor: 'black', //for whole plot


name: 'IMPS',
data: [
...
], color: 'rgb(213, 156, 72)' //for one area

2 . Only outer border line. (As shown in the mock up)

   yAxis: [{

        lineWidth: 1,
        title: {
            text: ''
        },
        labels: {
            formatter: function () {
                return this.value / 1000 + 'k';
            }
        },
        gridLineWidth: 0,
        minorGridLineWidth: 0
    }, {

        lineWidth: 1,
        title: {
            text: ''
        },
        labels: {
            formatter: function () {
                return this.value / 1000 + 'k';
            }
        },
        gridLineWidth: 0,
        minorGridLineWidth: 0,
        linkedTo: 0,
        opposite: true
    }],

3 . On Hover Show All 3 labels. (As shown in the mock up)

tooltip: {
  pointFormat: '{series.name} <b>${point.y:,.0f}</b> <br/>', //like in mock up
  shared: true, //all series
  crosshairs: true //vertical line
},

4 . Legend like "CPM IMPS SPEND BY TIME" with colors I mean I want to acheive same as in mock up.

so I already answered how do it in this question

Last Point to implement :

js:

    tooltip: {
        backgroundColor: null,
        borderWidth: 0,
        shadow: false,
        useHTML: true,
        style: {
            padding: 0
        },

and now you can customize your tooltip like you want:

.highcharts-tooltip>span p {
    margin: 0;
}
.highcharts-tooltip>span span{
    display: none;
}
#pCPM{background: rgb(87, 188, 0);}
#pIMPS{background: rgb(213, 156, 72);}
#pSPEND{background: rgb(12, 170, 226);}

Highchart's API don't allows you to set current values on axis, but you can disable default labels and put handmade labels with position absolute like I already doing with legend.

Summary FIDDLE

Upvotes: 1

Related Questions